import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '../Button';
import { AnimationInOut } from './index';

storiesOf('Components/AnimationInOut', module)
   .add('default', () => {
      const [open, setOpen] = useState(true);

      return (
         <div className="p-4 overflow-hidden">
            <Button onClick={() => setOpen(!open)}>{open ? 'Fade out' : 'Fade in'}</Button>
            <AnimationInOut visible={open} durationIn={1000} durationOut={5000}>
               <img
                  src="https://i.pinimg.com/originals/0e/12/04/0e120409b3c3668e48359d5698615763.jpg"
                  alt=""
                  width={200}
               />
            </AnimationInOut>
         </div>
      );
   })
   .add('slideLeftIn slideLeftOut', () => {
      const [open, setOpen] = useState(true);

      return (
         <div className="p-4 overflow-hidden">
            <Button onClick={() => setOpen(!open)}>{open ? 'slideLeft out' : 'slideLeft in'}</Button>
            <AnimationInOut
               visible={open}
               durationIn={1000}
               durationOut={1000}
               animationOut="slideLeft"
               animationIn="slideLeft"
            >
               <img
                  src="https://i.pinimg.com/originals/0e/12/04/0e120409b3c3668e48359d5698615763.jpg"
                  alt=""
                  width={200}
               />
            </AnimationInOut>
         </div>
      );
   })
   .add('slideRightIn slideRightOut', () => {
      const [open, setOpen] = useState(true);

      return (
         <div className="p-4 overflow-hidden">
            <Button onClick={() => setOpen(!open)}>{open ? 'slideLeft out' : 'slideLeft in'}</Button>
            <AnimationInOut
               visible={open}
               durationIn={1000}
               durationOut={1000}
               animationOut="slideRight"
               animationIn="slideRight"
            >
               <img
                  src="https://i.pinimg.com/originals/0e/12/04/0e120409b3c3668e48359d5698615763.jpg"
                  alt=""
                  width={200}
               />
            </AnimationInOut>
         </div>
      );
   })
   .add('fadeSlideLeftIn fadeSlideLeftOut', () => {
      const [open, setOpen] = useState(true);

      return (
         <div className="p-4 overflow-hidden">
            <Button onClick={() => setOpen(!open)}>{open ? 'fadeSlideLeft out' : 'fadeSlideLeft in'}</Button>
            <AnimationInOut
               visible={open}
               durationIn={1000}
               durationOut={1000}
               animationOut="fadeSlideLeft"
               animationIn="fadeSlideLeft"
            >
               <img
                  src="https://i.pinimg.com/originals/0e/12/04/0e120409b3c3668e48359d5698615763.jpg"
                  alt=""
                  width={200}
               />
            </AnimationInOut>
         </div>
      );
   })
   .add('fadeSlideRightIn fadeSlideRightOut', () => {
      const [open, setOpen] = useState(true);

      return (
         <div className="p-4 overflow-hidden">
            <Button onClick={() => setOpen(!open)}>{open ? 'fadeSlideLeft out' : 'fadeSlideLeft in'}</Button>
            <AnimationInOut
               visible={open}
               durationIn={1000}
               durationOut={1000}
               animationOut="fadeSlideRight"
               animationIn="fadeSlideRight"
            >
               <img
                  src="https://i.pinimg.com/originals/0e/12/04/0e120409b3c3668e48359d5698615763.jpg"
                  alt=""
                  width={200}
               />
            </AnimationInOut>
         </div>
      );
   });
