import * as React from 'react';
import { css } from 'glamor';
import { get } from '../../utils/obj/get';
import { merge } from '../../utils/obj/merge';
import { BsUpload } from 'react-icons/bs';
import { Text } from '../Text';
import { observer } from 'mobx-react';
import { useApphouse } from '../../context/useApphouse';
import { FileDropperStyles, getFileDropperStyles } from './fileDropper.styles';
import { ButtonGetFile } from './ButtonGetFile';

export interface FileMetadataType {
  lastModified: number;
  lastModifiedDate: string;
  name: string;
  size: number;
  type: string;
  webkitRelativePath: string;
}

export interface FileDropperType {
  id: string;
  label?: string;
  onFileDrop: (file: FileList[]) => void;
  onFileContentAvailable: (file: File) => void;
  showIcon?: boolean;
  styleOverwrites?: FileDropperStyles;
  onError?: (error: Error) => void;
}

export const FileDropper: React.FC<FileDropperType> = observer(
  ({
    id,
    label = 'Drop files here!',
    showIcon = true,
    styleOverwrites = {},
    onFileContentAvailable,
    onFileDrop,
    onError
  }) => {
    const { theme } = useApphouse();
    const FileDropper: React.RefObject<any> = React.createRef();
    const [over, setOver] = React.useState<boolean>(false);
    const componentStyles = getFileDropperStyles(theme);
    const handleDrop = (e: any) => {
      e.preventDefault();
      const files = get(e, 'dataTransfer.files') || get(e, 'target.files');
      if (!files) {
        return;
      }
      onFileDrop(files);
      setOver(false);
    };

    const handleDragOver = (e: any) => {
      e.preventDefault();
      setOver(true);
    };

    const handleDragLeave = (e: any) => {
      e.preventDefault();
      setOver(false);
    };

    const localStyles: FileDropperStyles = merge(
      {},
      componentStyles,
      styleOverwrites
    );
    return (
      <div
        key={id}
        {...css(localStyles.container, over ? localStyles.over : {})}
        onDrop={handleDrop}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        ref={FileDropper}
      >
        <div {...css(localStyles.wrapper)}>
          {showIcon && (
            <div {...css(localStyles.iconWrapper)} data-style="iconWrapper">
              <span {...css(localStyles.icon)} data-style="icon">
                <BsUpload size={60} title="upload" />
              </span>
            </div>
          )}
          <Text styleOverwrites={localStyles.label}>{label}</Text>
          <ButtonGetFile
            label="Browse Desktop"
            onError={onError}
            variant="primary"
            acceptedFileTypes={['json']}
            onFileContentAvailable={(fileContent: File) => {
              onFileContentAvailable(fileContent);
              setOver(false);
            }}
            styleOverwrites={{
              button: localStyles.uploadBtn
            }}
          />
        </div>
      </div>
    );
  }
);