import * as React from 'react';
import { useRef, useState } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import { useImmer } from 'use-immer';
import { DNDGroupContainer, Step } from './DNDBoard/DNDGroupContainer';
import { DNDContainer } from './DNDContainer';

const items = [
   { id: 1, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/7287e0d0e0125b12c7ebe9352a1638d6.jpg' },
   { id: 2, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/6c7abc3d7b08284a248c22ffc83883f7.jpg' },
   { id: 3, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/d909f94d61ab3c6a74bb0f630c57efab.jpg' },
   { id: 4, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/2947e188331d5126dbfc3f02098d1c3d.jpg' },
   { id: 5, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/60e3853869575d37088f0a78ad7758a8.jpg' },
   { id: 6, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/03255ee47ca8d96d98f4961437799b37.jpg' },
   { id: 7, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/a4ee60729a77318940c2132dad814b4a.jpg' },
   { id: 8, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/3717499e799fce9bc64208ffe3032b2c.jpg' },
   { id: 9, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/d1d7aa9552ba6dc3642e48153134f4df.jpg' },
   { id: 10, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/2766fb145b2283a86cd753c30fcdb0bd.jpg' },
   { id: 11, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/965fd76cf1a2ec501fa4f44196f3ac20.jpg' },
   { id: 12, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/dd1f14be6634a121d2efdcccfb96c5e5.jpg' },
   { id: 13, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/744d7f19be9655951e7bdec18af6ddd5.jpg' },
   { id: 14, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/0035a8b9b9a5075b0be2a4553c47295b.jpg' },
   { id: 15, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/a420b21c7db77f126df6885e83bc6e1f.jpg' },
   { id: 16, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/fd070a76ed0387ad00d6cf34ca8d8b5f.jpg' },
   { id: 17, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/89874647786c4faec4b5817473395c1e.jpg' },
   { id: 18, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/020fbda5ba5afc340bfddffa130072f0.jpg' },
   { id: 19, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/6449c6aeb3ba0d4026ce8b4c9b048b8c.jpg' },
   { id: 20, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/d78f9b99d1db1183d230cc55812250ce.jpg' },
   { id: 21, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/ae5fdf96d836e9db4756608bc2f209df.jpg' },
   { id: 22, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/0c89bb6ab4b6810b1753be6d99b2141a.jpg' },
   { id: 23, image: 'https://resizedimgs.vivareal.com/crop/142x80/vr.images.sp/cc3731fc3006a00a926140c258833700.jpg' },
];

const steps = [
   {
      id: 1,
      name: 'A fazer',
      items: [
         {
            id: 1,
            color: 'Red',
         },
         {
            id: 2,
            color: 'Orange',
         },
         {
            id: 3,
            color: 'Purple',
         },
         {
            id: 4,
            color: 'Blue',
         },
      ],
   },
   {
      id: 1,
      name: 'Fazendo',
      items: [
         {
            id: 5,
            color: 'Black',
         },
         {
            id: 6,
            color: 'White',
         },
         {
            id: 7,
            color: 'Pink',
         },
      ],
   },
   {
      id: 1,
      name: 'Finalizado',
      items: [],
   },
];

export const Card = styled.div<any>`
   display: flex;
   width: 200px;
   height: 200px;
   background: url(${(p) => p.image});
   ${(p) => p.dragging && 'opacity: 0.7'}
`;

export const Kanban = styled.div<any>`
   width: 100%;
   display: flex;
   flex-direction: row;

   .card-ghost {
      transition: transform 0.18s ease;
      transform: rotateZ(5deg);
   }

   .card-ghost-drop {
      transition: transform 0.18s ease-in-out;
      transform: rotateZ(0deg);
   }

   .drop-preview {
      background: #ebedf5;
      border: 1px dashed #98abbb;
      margin-bottom: 10px;
   }

   .step {
      flex: 0 0 200px;
      background: #eee;
      padding: 10px;
      margin: 10px;
      min-height: 130px;
      background: rgba(0, 0, 0, 0.1);

      .listing {
         height: 200px;
      }

      .steps-card-listing--inner {
      }
   }

   .smooth-dnd-container {
      min-height: 100%;
   }
`;

export const CardVertical = styled.div<any>`
   display: flex;
   width: 100%;
   height: 200px;
   background-color: #222;
   background-image: url(${(p) => p.image});
   ${(p) => p.dragging && 'opacity: 0.7'}
`;

export const CardKaban = styled.div<any>`
   display: flex;
   height: 100px;
   background: white;
   margin-bottom: 10px;
`;

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

      return (
         <div className="container">
            <DNDContainer
               items={images}
               onChange={setImages}
               containerCardStyle={{ padding: 10 }}
               renderCard={(props) => (
                  <Card dragOverlay={props.dragOverlay} dragging={props.dragging} image={props.data.image} />
               )}
            />
         </div>
      );
   })
   .add('vertical', () => {
      const [images, setImages] = useState(items);

      return (
         <div className="container">
            <DNDContainer
               vertical
               items={images}
               onChange={setImages}
               containerCardStyle={{ padding: 10 }}
               renderCard={(props) => (
                  <CardVertical dragOverlay={props.dragOverlay} dragging={props.dragging} image={props.data.image} />
               )}
            />
         </div>
      );
   })
   .add('horizontal', () => {
      const [images, setImages] = useState(items);

      return (
         <DNDContainer
            horizontal
            items={images}
            onChange={setImages}
            containerCardStyle={{ padding: 10 }}
            renderCard={(props) => (
               <Card dragOverlay={props.dragOverlay} dragging={props.dragging} image={props.data.image} />
            )}
         />
      );
   });

storiesOf('Components/DragDropsUtilsBoards', module)
   .add('default', () => {
      const [images, setImages] = useImmer(steps);

      function onDrop(result: any, stepIndex: number): void {
         if (result.removedIndex !== null) {
            setImages((draft) => {
               draft[stepIndex].items.splice(result.removedIndex, 1);
               return draft;
            });
         }

         if (result.addedIndex !== null) {
            setImages((draft) => {
               draft[stepIndex].items.splice(result.addedIndex, 0, result.payload);
               return draft;
            });
         }
      }

      const renderCard = (value: any) => <CardKaban>{value.color}</CardKaban>;

      return (
         <Kanban className="container">
            {images.map((step, i) => (
               <div className="step">
                  <h4>{step.name}</h4>
                  <br />

                  <Step groupName="steps" step={step} index={i} renderCard={renderCard} onDrop={onDrop} />
               </div>
            ))}
         </Kanban>
      );
   })
   .add('scroll horizontal steps', () => {
      const [images, setImages] = useImmer(steps);

      function onDrop(result: any, stepIndex: number): void {
         if (result.removedIndex !== null) {
            setImages((draft) => {
               draft[stepIndex].items.splice(result.removedIndex, 1);
               return draft;
            });
         }

         if (result.addedIndex !== null) {
            setImages((draft) => {
               draft[stepIndex].items.splice(result.addedIndex, 0, result.payload);
               return draft;
            });
         }
      }

      const renderCard = (value: any) => <CardKaban>{value.color}</CardKaban>;

      return (
         <Kanban className="container">
            {images.map((step, i) => (
               <div className="step small" key={`step-${i}`}>
                  <h4>{step.name}</h4>
                  <br />

                  <div className="listing">
                     <Step groupName="steps" step={step} index={i} renderCard={renderCard} onDrop={onDrop} />
                  </div>
               </div>
            ))}
         </Kanban>
      );
   });
