import * as React from 'react';
import { useRef, useState } from 'react';
import { storiesOf } from '@storybook/react';
import { useImmer } from 'use-immer';
import { ImagesSortable } from '.';
import { Button } from '../Button';
import { CardImage } from './__mocks__/CardImage';
import { CardImageUploadSortable } from './CardImageUploadSortable';

const imagesArray = [
   {
      id: '1',
      image: 'https://http2.mlstatic.com/D_NQ_NP_2X_903122-MLB44358527254_122020-F.webp',
   },
   {
      id: '2',
      image: 'https://http2.mlstatic.com/D_NQ_NP_2X_903122-MLB44358527254_122020-F.webp',
   },
   {
      id: '3',
      image: 'https://http2.mlstatic.com/D_NQ_NP_2X_884643-MLB44358533181_122020-F.webp',
   },
   {
      id: '4',
      image: 'https://http2.mlstatic.com/D_NQ_NP_2X_841782-MLB44358538197_122020-F.webp',
   },
   {
      id: '5',
      image: 'https://http2.mlstatic.com/D_NQ_NP_2X_941295-MLB44358506929_122020-F.webp',
   },
   {
      id: '6',
      image: 'https://http2.mlstatic.com/D_NQ_NP_2X_993728-MLB44358525332_122020-F.webp',
   },
   {
      id: '7',
      image: 'https://http2.mlstatic.com/D_NQ_NP_2X_785801-MLB44358525331_122020-F.webp',
      disabled: true,
   },
];

const propertiesArray = [
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/7287e0d0e0125b12c7ebe9352a1638d6.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/6c7abc3d7b08284a248c22ffc83883f7.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/d909f94d61ab3c6a74bb0f630c57efab.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/2947e188331d5126dbfc3f02098d1c3d.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/60e3853869575d37088f0a78ad7758a8.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/03255ee47ca8d96d98f4961437799b37.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/a4ee60729a77318940c2132dad814b4a.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/3717499e799fce9bc64208ffe3032b2c.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/d1d7aa9552ba6dc3642e48153134f4df.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/2766fb145b2283a86cd753c30fcdb0bd.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/965fd76cf1a2ec501fa4f44196f3ac20.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/dd1f14be6634a121d2efdcccfb96c5e5.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/744d7f19be9655951e7bdec18af6ddd5.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/0035a8b9b9a5075b0be2a4553c47295b.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/a420b21c7db77f126df6885e83bc6e1f.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/fd070a76ed0387ad00d6cf34ca8d8b5f.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/89874647786c4faec4b5817473395c1e.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/020fbda5ba5afc340bfddffa130072f0.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/6449c6aeb3ba0d4026ce8b4c9b048b8c.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/d78f9b99d1db1183d230cc55812250ce.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/ae5fdf96d836e9db4756608bc2f209df.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/0c89bb6ab4b6810b1753be6d99b2141a.jpg',
   'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/cc3731fc3006a00a926140c258833700.jpg',
];

storiesOf('Components/ImagesSortable', module).add('default', () => {
   const [images, setImages] = useState(imagesArray);

   return (
      <div
         style={{
            width: '100%',
            padding: 20,
            display: 'flex',
            alignContent: 'center',
            justifySelf: 'center',
            justifyContent: 'center',
         }}
      >
         <div
            style={{
               maxWidth: '800px',
            }}
         >
            <ImagesSortable
               images={images}
               onChange={(im) => {
                  setImages(im);
               }}
               renderItem={(props) => <CardImage {...props} />}
            />
         </div>
      </div>
   );
});

storiesOf('Components/ImagesSortable/CardImageUploadSortable', module)
   .add('default', () => {
      const [images, setImages] = useImmer([
         {
            id: 0,
            image: propertiesArray[0],
            rotate: 0,
         },
         {
            id: 1,
            image: propertiesArray[1],
            rotate: 90,
         },
         {
            id: 2,
            image: propertiesArray[2],
            rotate: 0,
            percentage: 50,
            loading: true,
         },
         {
            id: 4,
            image: propertiesArray[4],
            rotate: 0,
            loading: true,
            disabled: true,
            error: true,
            percentage: 50,
         },
      ]);

      function onRemove(value: any): void {
         setImages((items) => items.filter((i) => value.id !== i.id));
      }

      function onRotate(rotate: any, value: any): void {
         setImages((items) => {
            const index = items.findIndex((i) => i.id === value.id);
            items[index].rotate = rotate;
            return items;
         });
      }

      return (
         <div
            style={{
               width: '100%',
               padding: 20,
               display: 'flex',
               alignContent: 'center',
               justifySelf: 'center',
               justifyContent: 'center',
            }}
         >
            <div
               style={{
                  maxWidth: '800px',
               }}
            >
               <ImagesSortable
                  images={images}
                  onChange={(items) => {
                     setImages(() => items);
                  }}
                  renderItem={(props) => <CardImageUploadSortable {...props} onRemove={onRemove} onRotate={onRotate} />}
               />
            </div>
         </div>
      );
   })
   .add('with loading', () => {
      const idImage = useRef(5);
      const [images, setImages] = useImmer<any>([
         {
            id: 0,
            image: propertiesArray[0],
            rotate: 0,
         },
         {
            id: 1,
            image: propertiesArray[1],
         },
      ]);

      function addImage(): void {
         const id = idImage.current;
         const startTime = Date.now();
         setImages((items) => {
            items.push({
               id,
               image: propertiesArray[idImage.current % propertiesArray.length],
               rotate: 0,
               loading: true,
               disabled: true,
               percentage: 0,
            });

            idImage.current += 1;
         });

         const interval = setInterval(() => {
            setImages((items) => {
               const index = items.findIndex((i) => i.id == id);

               items[index] = {
                  ...items[index],
                  percentage: ((Date.now() - startTime) / 1000) * 100,
               };

               if (items[index].percentage > 100) {
                  items[index].percentage = 100;
                  items[index].disabled = false;
                  items[index].loading = false;
                  clearInterval(interval);
               }
            });
         }, 100);
      }

      function onRemove(value: any): void {
         setImages((items) => items.filter((i) => value.id !== i.id));
      }

      function onRotate(rotate: any, value: any): void {
         setImages((items) => {
            const index = items.findIndex((i) => i.id === value.id);
            items[index].rotate = rotate;
            return items;
         });
      }

      return (
         <div
            style={{
               width: '100%',
               padding: 20,
               display: 'flex',
               alignContent: 'center',
               justifySelf: 'center',
               justifyContent: 'center',
            }}
         >
            <div
               style={{
                  maxWidth: '800px',
                  width: '800px',
               }}
            >
               <Button onClick={addImage}>Adicionar Imagem</Button>

               <ImagesSortable
                  images={images}
                  onChange={(items) => {
                     setImages(() => items);
                  }}
                  renderItem={(props) => <CardImageUploadSortable {...props} onRemove={onRemove} onRotate={onRotate} />}
               />
            </div>
         </div>
      );
   })
   .add('with error', () => {
      const idImage = useRef(5);
      const [images, setImages] = useImmer<any>([
         {
            id: 0,
            image: propertiesArray[0],
            rotate: 0,
         },
         {
            id: 1,
            image: propertiesArray[1],
            error: true,
         },
      ]);

      function addImage(): void {
         const id = idImage.current;
         setImages((items) => {
            items.push({
               id,
               image: propertiesArray[idImage.current % propertiesArray.length],
               rotate: 0,
               error: true,
               disabled: true,
               percentage: 0,
            });

            idImage.current += 1;
         });
      }

      function onRemove(value: any): void {
         setImages((items) => items.filter((i) => value.id !== i.id));
      }

      function onRetry(value: any): void {
         setImages((items) => {
            const index = items.findIndex((i) => i.id == value.id);
            items[index].error = false;
         });
      }

      function onRotate(rotate: any, value: any): void {
         setImages((items) => {
            const index = items.findIndex((i) => i.id === value.id);
            items[index].rotate = rotate;
            return items;
         });
      }

      return (
         <div
            style={{
               width: '100%',
               padding: 20,
               display: 'flex',
               alignContent: 'center',
               justifySelf: 'center',
               justifyContent: 'center',
            }}
         >
            <div
               style={{
                  maxWidth: '800px',
                  width: '800px',
               }}
            >
               <Button onClick={addImage}>Adicionar Imagem</Button>

               <ImagesSortable
                  images={images}
                  onChange={(items) => {
                     setImages(() => items);
                  }}
                  renderItem={(props) => (
                     <CardImageUploadSortable {...props} onRemove={onRemove} onRotate={onRotate} onRetry={onRetry} />
                  )}
               />
            </div>
         </div>
      );
   });
