import React, { useMemo } from "react";
import { useState } from "@storybook/addons";
import './file.css';
import Iconsvg from '../../Ui/Icon/Icon'
import {useDropzone} from 'react-dropzone';

type Props = {
    id: string,
    name: string,
    labelTittle?: string,
    labelDescription?: string,
    labelText?: string,
    buttonLabel?: string,
    disable?: boolean,
    withIcon?: boolean,
    mutiple: boolean,
    accept: string,
    fileType: 'button' | 'dragdrop'
    varient?:  'default' | 'primary' | 'secondary' | 'dark',
    size?: 'default' | 'small' | 'medium' | 'large',
    borderRadious?: 'small' | 'medium' | 'large',
    iconName?:any,
    FileChange: (event:any) => void;
}


const FileUploader = (props:Props) => {
    const {id, name, labelTittle, labelDescription, labelText, buttonLabel, disable, withIcon, borderRadious,iconName, mutiple, varient, size, fileType,accept, FileChange} = props;
    const {acceptedFiles, getRootProps, getInputProps} = useDropzone({accept: accept, disabled: disable, multiple:mutiple});
    const handleFileInput = (event:any) => {
        FileChange(event.target.files[0])
    }

    
    return (
        <div className="file-uploader">
            <label className="label-text">{labelText}</label>
            <p className="label-des">{labelDescription}</p>
            {
               fileType === 'button' ? 
               <div className={`button-uploader ${varient ? `background-${varient}` : ''} ${size ? `file-${size}` : ''} ${borderRadious ? `rounded-${borderRadious}` : ''}`}>
                   <input accept={accept} disabled={disable} id={id} name={name} type="file" multiple={mutiple}  onChange={handleFileInput}/>
                   <label htmlFor={id}>
                       {withIcon ? <span className='upload-icon'><Iconsvg addClass={`${size ? `icon-${size}` : ''}`} name={iconName}/></span> : ''}
                       {buttonLabel}
                    </label>
               </div>
               
               :
               <div className={`drag-uploader ${disable ? 'drag-disable' : ''} ${varient ? `background-${varient}` : ''} ${size ? `file-${size}` : ''} ${borderRadious ? `rounded-${borderRadious}` : ''}`}>
                    <div {...getRootProps({className: 'dropzone'})}>
                        <input {...getInputProps()} />
                        {withIcon ? <span className='upload-icon'><Iconsvg addClass={`${size ? `icon-${size}` : ''}`} name={iconName}/></span> : ''}
                        <p>{labelTittle}</p>
                    </div>
               </div>
            }
        </div>
    );
};

export default FileUploader;