import React from 'react';
import { useDropzone } from 'react-dropzone';
import { Iconify } from '@seliseblocks/next-images';

import Box from '@mui/material/Box';
import { alpha } from '@mui/material/styles';

import { IUploadProps } from '../types';

/**
 * @description {UploadBox} - Function for handling file uploads.
 * @param {boolean} disabled - Indicates whether the upload is disabled.
 * @param {boolean} error - Indicates whether there is an error.
 * @param {SxProps<Theme>} sx - The style for the upload.
 * @return {JSX.Element} The rendered upload component.
 */
export const UploadBox = ({ placeholder, error, disabled, sx, ...other }: IUploadProps) => {
  const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
    disabled,
    ...other,
  });

  const hasError = isDragReject || error;

  return (
    <Box
      {...getRootProps()}
      sx={{
        m: 0.5,
        width: 64,
        height: 64,
        flexShrink: 0,
        display: 'flex',
        borderRadius: 1,
        cursor: 'pointer',
        alignItems: 'center',
        color: 'text.disabled',
        justifyContent: 'center',
        bgcolor: (theme) => alpha(theme.palette.grey[500], 0.08),
        border: (theme) => `dashed 1px ${alpha(theme.palette.grey[500], 0.16)}`,
        ...(isDragActive && {
          opacity: 0.72,
        }),
        ...(disabled && {
          opacity: 0.48,
          pointerEvents: 'none',
        }),
        ...(hasError && {
          color: 'error.main',
          borderColor: 'error.main',
          bgcolor: (theme) => alpha(theme.palette.error.main, 0.08),
        }),
        '&:hover': {
          opacity: 0.72,
        },
        ...sx,
      }}
    >
      <input {...getInputProps()} />

      {placeholder || <Iconify icon="eva:cloud-upload-fill" width={28} />}
    </Box>
  );
};