import React, { useReducer, useRef } from 'react';
import { IFile, IUploadManagerOptions, IUploadStatus } from '@devesharp/upload-files-js';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import { IRefUploadFiles, UploadFiles } from './UploadFiles';

const css = styled.div;

const Style = css`
   .drag-zone {
      width: 200px;
      height: 200px;
      border: 2px dashed rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      text-align: center;
      padding: 15px;
      color: #333;
      justify-content: center;
      font-size: 13px;

      i {
         font-size: 28px;
         color: crimson;
      }

      b {
         font-size: 15px;
         color: crimson;
         font-weight: 600;
         margin-bottom: 15px;
      }

      &.drag {
         i {
            color: #ffc107;
         }

         b {
            color: #ffc107;
         }
      }
   }

   .dragging {
      background: crimson;

      i {
         color: #333;
      }

      b {
         color: #333;
      }
   }

   .file {
      color: #333;
      padding-top: 15px;
   }

   .ext {
      font-weight: 600;
      padding: 1px 10px;
      vertical-align: middle;
      display: inline-block;
      /* border: 2px solid crimson; */
      border-radius: 5px;
      color: #333;
      background: #516bf0;
   }

   .filename {
      display: inline-block;
      vertical-align: middle;
      padding-left: 15px;
   }

   .status {
      background: lightseagreen;
      color: #333;
      display: table;
      padding: 4px;
      font-weight: bold;
      font-size: 12px;
   }

   .close {
      color: #333;
      padding: 4px;
      color: crimson;
      text-shadow: none;
      opacity: 1;
   }
`;

storiesOf('Components/UploadFiles', module)
   .add('drag enabled', () => {
      const uploadManagerRef = useRef<IRefUploadFiles>();

      const [files, setFiles] = useReducer((old, file: IFile) => {
         const newValue = [...old];
         const index = newValue.findIndex((i) => i.id === file.id);

         if (index !== -1) {
            if (file.status === IUploadStatus.Cancelled) {
               newValue.splice(index, 1);
            } else {
               newValue[index] = file;
            }
         } else {
            newValue.push(file);
         }

         return newValue;
      }, []);

      function removeFile(file: IFile): void {
         uploadManagerRef.current.cancelFile(file);
      }

      const options = {
         url: '/',
         handleFile: (file) => {
            setFiles(file);
         },
      };

      return (
         <Style>
            <div className="m-4">
               <UploadFiles options={options} ref={uploadManagerRef} drag multiple>
                  {({ dragging }) => (
                     <Style>
                        <div className={`drag-zone ${dragging && 'dragging'}`}>
                           <i className="fas fa-arrow-up" />
                           <b>ARRASTE & SOLTE</b>
                           <div>Ou clique aqui para procurar no disco</div>
                        </div>
                     </Style>
                  )}
               </UploadFiles>

               {files &&
                  files.map((file) => (
                     <div className="file" key={file.id}>
                        <div className="ext">{file.ext}</div>

                        <div className="filename">
                           <b>{file.filename}</b>
                           <div className="size">{file.size} KB</div>
                           <div className="status">{IUploadStatus[file.status]}</div>
                        </div>

                        <div className="close" onClick={() => removeFile(file)}>
                           X
                        </div>
                     </div>
                  ))}
            </div>
         </Style>
      );
   })
   .add('drag disabled', () => {
      const uploadManagerRef = useRef<IRefUploadFiles>();

      const [files, setFiles] = useReducer((old, file: IFile) => {
         const newValue = [...old];
         const index = newValue.findIndex((i) => i.id === file.id);

         if (index !== -1) {
            if (file.status === IUploadStatus.Cancelled) {
               newValue.splice(index, 1);
            } else {
               newValue[index] = file;
            }
         } else {
            newValue.push(file);
         }

         return newValue;
      }, []);

      function removeFile(file: IFile): void {
         uploadManagerRef.current.cancelFile(file);
      }

      const options: IUploadManagerOptions = {
         url: '/',
         handleFile: (file) => setFiles(file),
      };

      return (
         <Style>
            <div className="m-4">
               <UploadFiles options={options} ref={uploadManagerRef} drag={false} multiple>
                  {({ dragging }) => (
                     <Style>
                        <div className={`drag-zone drag ${dragging && 'dragging'}`}>
                           <i className="fas fa-arrow-up" />
                           <b>CLIQUE AQUI</b>
                           <div>Clique aqui para procurar no disco</div>
                        </div>
                     </Style>
                  )}
               </UploadFiles>

               {files &&
                  files.map((file) => (
                     <div className="file" key={file.id}>
                        <div className="ext">{file.ext}</div>

                        <div className="filename">
                           <b>{file.filename}</b>
                           <div className="size">{file.size} KB</div>
                           <div className="status">{IUploadStatus[file.status]}</div>
                        </div>

                        <div className="close" onClick={() => removeFile(file)}>
                           X
                        </div>
                     </div>
                  ))}
            </div>
         </Style>
      );
   })
   .add('multiple false', () => {
      const uploadManagerRef = useRef<IRefUploadFiles>();

      const [files, setFiles] = useReducer((old, file: IFile) => {
         const newValue = [...old];
         const index = newValue.findIndex((i) => i.id === file.id);

         if (index !== -1) {
            if (file.status === IUploadStatus.Cancelled) {
               newValue.splice(index, 1);
            } else {
               newValue[index] = file;
            }
         } else {
            newValue.push(file);
         }

         return newValue;
      }, []);

      function removeFile(file: IFile): void {
         uploadManagerRef.current.cancelFile(file);
      }

      const options = {
         url: '/',
         handleFile: (file) => setFiles(file),
      };

      return (
         <Style>
            <div className="m-4">
               <UploadFiles options={options} ref={uploadManagerRef} drag={false} multiple={false}>
                  {({ dragging }) => (
                     <Style>
                        <div className={`drag-zone drag ${dragging && 'dragging'}`}>
                           <i className="fas fa-arrow-up" />
                           <b>CLIQUE AQUI</b>
                           <div>Clique aqui para procurar no disco</div>
                        </div>
                     </Style>
                  )}
               </UploadFiles>

               {files &&
                  files.map((file) => (
                     <div className="file" key={file.id}>
                        <div className="ext">{file.ext}</div>

                        <div className="filename">
                           <b>{file.filename}</b>
                           <div className="size">{file.size} KB</div>
                           <div className="status">{IUploadStatus[file.status]}</div>
                        </div>

                        <div className="close" onClick={() => removeFile(file)}>
                           X
                        </div>
                     </div>
                  ))}
            </div>
         </Style>
      );
   });
