import React, { useEffect, useState } from 'react';
import { faPlay } from '@fortawesome/free-solid-svg-icons/faPlay';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import { Slider } from './Slider';

export const Container = styled.div<any>`
   .carousel--play {
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 3px solid #fff;
      border-radius: 250px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
      color: #fff;
      cursor: pointer;
      font-size: 40px;
      height: 90px;
      line-height: 84px;
      text-align: center;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
      transition: 0.4s all;
      width: 90px;
      z-index: 10;

      &:hover {
         background: rgba(0, 0, 0, 0.3);
         border-color: #eee;
         color: #eee;
         cursor: pointer;
         transition: 0.4s all;
         zoom: 1.1;
      }
   }
}
`;

const images = [
   {
      image: 'https://i.pinimg.com/originals/bf/cb/78/bfcb784e79876d8db7f66ba6be3efeec.jpg',
   },
   {
      image:
         'https://ae01.alicdn.com/kf/He7d47c113d504fd6988313c94af1590dM/Cabletime-esta-o-de-carga-com-adaptador-usb-usb-hub-c-4k-60hz-pd100w-m-2.jpg_Q90.jpg_.webp',
   },
   {
      image:
         'https://ae01.alicdn.com/kf/He7d47c113d504fd6988313c94af1590dM/Cabletime-esta-o-de-carga-com-adaptador-usb-usb-hub-c-4k-60hz-pd100w-m-2.jpg_Q90.jpg_.webp',
   },
   {
      image:
         'https://ae01.alicdn.com/kf/H20bc2fe65dc2407383a5d5596931db8ba/Cabletime-esta-o-de-carga-com-adaptador-usb-usb-hub-c-4k-60hz-pd100w-m-2.jpg_Q90.jpg_.webp',
   },
];

storiesOf('Components/Slider', module)
   .add('padrão', () => {
      return (
         <div style={{ maxWidth: '500px', margin: 'auto' }}>
            <Slider items={images} />
         </div>
      );
   })
   .add('com width 100%', () => {
      return (
         <>
            <Slider items={images} width="100%" height={400} />
         </>
      );
   })
   .add('com height 100%', () => {
      return (
         <div style={{ height: 400, margin: '20px auto', display: 'table' }}>
            <Slider items={images} height="100%" width={500} />
         </div>
      );
   })
   .add('boxCountPos', () => {
      return (
         <div>
            <div className="row">
               <div className="col-4">
                  <div className="p-2">
                     <Slider items={images} height="300px" width="100%" boxCountPos="top-left" />
                  </div>
               </div>
               <div className="col-4">
                  <div className="p-2">
                     <Slider items={images} height="300px" width="100%" boxCountPos="top-center" />
                  </div>
               </div>
               <div className="col-4">
                  <div className="p-2">
                     <Slider items={images} height="300px" width="100%" boxCountPos="top-right" />
                  </div>
               </div>
               <div className="col-4">
                  <div className="p-2">
                     <Slider items={images} height="300px" width="100%" boxCountPos="bottom-left" />
                  </div>
               </div>
               <div className="col-4">
                  <div className="p-2">
                     <Slider items={images} height="300px" width="100%" boxCountPos="bottom-center" />
                  </div>
               </div>
               <div className="col-4">
                  <div className="p-2">
                     <Slider items={images} height="300px" width="100%" boxCountPos="bottom-right" />
                  </div>
               </div>
            </div>
         </div>
      );
   })
   .add('showBoxCount', () => {
      return (
         <div>
            <div className="row">
               <div className="col-6">
                  <div className="p-2">
                     <Slider items={images} height="300px" width="100%" boxCountPos="top-left" showBoxCount />
                  </div>
               </div>
               <div className="col-6">
                  <div className="p-2">
                     <Slider items={images} height="300px" width="100%" boxCountPos="top-center" showBoxCount={false} />
                  </div>
               </div>
            </div>
         </div>
      );
   })
   .add('onChangeSlide', () => {
      return (
         <div>
            <div className="p-2">
               <Slider
                  items={images}
                  height="300px"
                  width="300px"
                  boxCountPos="top-left"
                  onChangeSlide={action('onChangeSlide')}
               />
            </div>
         </div>
      );
   })
   .add('clicar em no fundo', () => {
      return (
         <div>
            <div className="p-2">
               <Slider items={images} onRequestClose={action('onRequestClose')} />
            </div>
         </div>
      );
   })
   .add('usar esc e setas', () => {
      return (
         <div>
            <div className="p-2">
               <Slider items={images} onRequestClose={action('onRequestClose')} />
            </div>
         </div>
      );
   })
   .add('controlar slide pos', () => {
      const [slide, setSlide] = useState(0);

      useEffect(() => {
         setInterval(() => {
            setSlide((s) => {
               if (s + 1 >= images.length) {
                  return 0;
               }

               return s + 1;
            });
         }, 2000);
      }, []);

      return (
         <div>
            <div className="p-2">
               <Slider
                  slidePos={slide}
                  onChangeSlide={(s) => setSlide(s)}
                  items={images}
                  onRequestClose={action('onRequestClose')}
               />
            </div>
         </div>
      );
   })
   .add('arrowSize', () => {
      return (
         <div>
            <div className="p-2">
               <Slider items={images} height="300px" width="300px" arrowSize={40} />
            </div>
         </div>
      );
   })
   .add('with Component', () => {
      function Video(): any {
         return (
            <Container>
               <div className="carousel--video-ytb">
                  <img src="https://img.youtube.com/vi/ATSgwZXOuUo/sddefault.jpg" />
                  <div className="carousel--play" data-testid="play-video">
                     <FontAwesomeIcon icon={faPlay} />
                  </div>
               </div>
            </Container>
         );
      }

      return (
         <div>
            <div className="p-2">
               <Slider
                  items={[Video, ...images]}
                  height="300px"
                  width="300px"
                  boxCountPos="top-left"
                  onChangeSlide={action('onChangeSlide')}
                  arrowSize={40}
               />
            </div>
         </div>
      );
   });
