import {useEffect, useState} from 'react';
import { ColorButtonKey } from '../interfaces';
import BaseButton from './BaseButton';
import FileUploader from "./Uploaders/UploadService";
import { mdiReload } from '@mdi/js';
import { useAppSelector } from '../stores/hooks';

type Props = {
  label?: string;
  icon?: string;
  accept?: string;
  color: ColorButtonKey;
  isRoundIcon?: boolean;
  path: string;
  schema: object;
  field: any;
  form: any;
};

const FormFilePicker = ({ label, icon, accept, color, isRoundIcon,  path,
                          schema,
                          form,
                          field, }: Props) => {
  const [file, setFile] = useState(null);
  const [loading, setLoading] = useState(false);
  const corners = useAppSelector((state) => state.style.corners);
  const bgColor = useAppSelector((state) => state.style.cardsColor);
  let cornersRight;
  if (corners === 'rounded'){
    cornersRight = 'rounded-r'
  } else if (corners === 'rounded-lg'){
    cornersRight = 'rounded-r-lg'
  }else if (corners === 'rounded-full'){
    cornersRight = 'rounded-r-3xl'
  }else{
    cornersRight = ''
  }

  useEffect(() => {
    if (field.value) {
      setFile(field.value[0]);
    }
  }, [field.value]);
  const handleFileChange = async (event) => {
    const file = event.currentTarget.files[0];
    setFile(file);

    FileUploader.validate(file, schema);
    setLoading(true);
    const remoteFile = await FileUploader.upload(path, file, schema);

    form.setFieldValue(field.name, [{ ...remoteFile }]);
    setLoading(false);
  };

  const showFilename = !isRoundIcon && file;

  return (
      <div className='flex items-stretch justify-start relative'>
        <label className='inline-flex'>
          <BaseButton
              className={`${isRoundIcon ? 'w-12 h-12' : ''} ${
                  showFilename ? 'rounded-r-none' : ''
              }`}
              iconSize={isRoundIcon ? 24 : undefined}
              label={isRoundIcon ? null : label}
              icon={loading ? mdiReload : icon}
              iconClassName={loading && 'animate-spin'}
              color={color}
              roundedFull={isRoundIcon}
              asAnchor
          />
          <input
              type='file'
              className='absolute top-0 left-0 w-full h-full opacity-0 outline-none cursor-pointer -z-1'
              onChange={handleFileChange}
              accept={accept}
              disabled={loading}
          />
        </label>
        {showFilename && !loading && (
            <div className={` px-4 py-2 max-w-full flex-grow-0 overflow-x-hidden ${bgColor}  dark:bg-slate-800 border-gray-200 dark:border-slate-700 border ${cornersRight} `}>
          <span className='text-ellipsis max-w-full line-clamp-1'>
            {file.name}
          </span>
            </div>
        )}
      </div>
  );
};

export default FormFilePicker;