import fileDialog from 'file-dialog';
import { useCallback, useMemo, useState } from 'react';
import { useUploadController } from '../Components/Upload';
import useHandleMove from "./useHandleMove";

export default function useMultiFilePicker(value:any, onChange:(value: any) => void) {
  const uploadController = useUploadController();

  const controllers = useMemo(() => (value || []).map(b => uploadController(b)), [value]);

  const [ pendingControllers, setPendingControllers] = useState([] as any);

  const allControllers = controllers.concat(pendingControllers);
  
  const _onChange = useCallback(function(controller) {
    if(controller.$state === 2) {
        return ;
    }

    if(controller.$state === 1) {
        if (pendingControllers.indexOf(controller) !== -1) {
          setPendingControllers(pendingControllers.filter(a => a !== controller));
        } else if(controllers.indexOf(controller) !== -1) {
          onChange(controllers.filter(a => a !== controller));
        }
    } else {
      if (pendingControllers.indexOf(controller) !== -1) {
        setPendingControllers(pendingControllers.filter(a => a !== controller));
        onChange((controllers || []).concat([controller]));
      }
    }
  }, [ onChange, pendingControllers, setPendingControllers, controllers ]);

  const onMove = useHandleMove(value, onChange);

  const chooseFile = useCallback(async function(accepts, e) {
    e && e.preventDefault();

    const files = await fileDialog({
        accept: accepts || '*/*',
        multiple: true
    });

    const add = [] as any;

    for(let i = 0; i < files.length; ++i) {
        let file = files[i];
        let controller = uploadController();
        controller.upload(file.name, file.type, file);
        add.push(controller);
    }

    setPendingControllers((controllers) => [ ...controllers, ...add ]);
  }, [ uploadController, setPendingControllers ]);

  return [ allControllers, _onChange, chooseFile, onMove ];
}