'use client';

import React, { ChangeEvent, FC } from 'react';

import { IFileResult, IInputUpload } from '../../interfaces/input-upload';

const InputUpload: FC<IInputUpload> = ({
  onChange,
  readAsArrayBuffer,
  ...props
}: IInputUpload) => {
  const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
    if (props.read && event.target.files) {
      readFileBlob(event.target.files[0], false)
        .then((result) => onChange(result))
        .catch((err) => {
          console.error('file read error', err);
          onChange({ name: '', size: 0, data: '' });
        });
    } else {
      onChange(event.target.files);
    }
  };

  const readFileBlob = (blob: File, image: boolean): Promise<IFileResult> => {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      if (image) fileReader.readAsDataURL(blob);
      else if (readAsArrayBuffer) fileReader.readAsArrayBuffer(blob);
      else fileReader.readAsText(blob);

      fileReader.onload = () => {
        const fileResult: IFileResult = {
          name: blob.name,
          size: blob.size,
          data: fileReader.result as string,
        };

        resolve(fileResult);
      };
      fileReader.onerror = (error) => {
        reject(error);
      };
    });
  };

  return (
    <div className="flex flex-col w-full gap-1 text-center">
      {props.label && (
        <label
          className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
          htmlFor={`file-input-${props.id}`}
        >
          {props.label}
        </label>
      )}
      <input
        className="file:transition-all file:delay-150 block w-full text-sm text-slate-500
        file:mr-4 file:py-2 file:px-4 file:rounded-md
        file:border-0 file:text-sm file:font-semibold
        file:bg-gray-100 file:text-blue-600
        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed"
        aria-describedby={`file-input-${props.id}-help`}
        id={`file-input-${props.id}`}
        type="file"
        onChange={onChangeHandler}
        {...props}
      />
      <p
        className="mt-1 text-sm text-gray-500 dark:text-gray-300 text-start"
        id={`file-input-${props.id}-help`}
      >
        {props.helpText?.toUpperCase()}
      </p>
    </div>
  );
};

export default InputUpload;