// @ts-nocheck
import { useTheme } from "@emotion/react";
import {
  Avatar,
  Box,
  Button,
  Chip,
  Divider,
  IconButton,
  Stack,
  Tooltip,
  Typography,
} from "@mui/material";
import { useDropzone } from "react-dropzone";
import { AiOutlineCamera } from "react-icons/ai";
import { LiaTimesSolid } from "react-icons/lia";
import { getImagePathUrl } from "../../utils/helper";

function FileUploadComponent({
  files,
  setFiles,
  path = [],
  title,
  maxFiles = 1,
  isDisabled,
}) {
  const { getRootProps, getInputProps, fileRejections } = useDropzone({
    accept: {
      "image/*": [],
    },
    onDrop: (acceptedFiles) => {
      setFiles([
        ...files,
        ...acceptedFiles?.map((file) =>
          Object.assign(file, {
            preview: URL.createObjectURL(file),
          })
        ),
      ]);
    },
    maxFiles: maxFiles,
    disabled: isDisabled,
  });

  const fileRejectionItems = fileRejections.map(({ file, errors }) => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
      <ul>
        {errors.map((e) => (
          <li key={e.code}>
            {e.message} <Chip label="Rejected" color="error" size="small" />{" "}
          </li>
        ))}
      </ul>
    </li>
  ));

  //Remove the upload files
  const handleRemoveImage = (index) => {
    const removeFile = files?.filter((item, row) => row !== index);
    setFiles(removeFile);
  };

  return (
    <>
      {title ? <Typography sx={{ mb: 1 }}> {title} </Typography> : null}

      <Box
        {...getRootProps({ className: "dropzone" })}
        sx={{
          position: "relative",
          width: 1,
          height: 140,
          border: `1.5px dashed #d7d7d7`,
          borderRadius: 1,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: "column",
          cursor: "pointer",
        }}
      >
        <input {...getInputProps()} />
        <Typography>Drag & Drop Your File</Typography>
        <Button variant="outlined" sx={{ mt: 1 }}>
          Select
        </Button>
      </Box>
      {files?.length > 0 ? (
        <Stack gap={1} mt={2}>
          {files?.map((item, index) => {
            return (
              <Box sx={{ position: "relative", width: 60, height: 60 }}>
                <Avatar
                  src={item?.preview || getImagePathUrl(path)}
                  variant="square"
                  sx={{ width: 1, height: 1 }}
                />
                <Tooltip title="Remove">
                  <IconButton
                    sx={{
                      position: "absolute",
                      right: "0",
                      top: "0",
                      background: "#d7d7d7",
                      width: 24,
                      height: 24,
                      p: 0.5,
                    }}
                    onClick={() => handleRemoveImage(index)}
                  >
                    <LiaTimesSolid />
                  </IconButton>
                </Tooltip>
              </Box>
            );
          })}
        </Stack>
      ) : null}
      {path?.length > 0 ? (
        <>
          <Typography mt={2} fontWeight={500}>
            Previous Uploaded
          </Typography>
          <Divider mb={1} />
          <Stack gap={1} mt={2}>
            {path?.map((item, index) => {
              return (
                <Box
                  sx={{ position: "relative", width: 60, height: 60 }}
                  key={item?.id}
                >
                  <Avatar
                    src={getImagePathUrl(item?.path)}
                    variant="square"
                    sx={{ width: 1, height: 1 }}
                  />
                  <Tooltip title="Remove">
                    <IconButton
                      sx={{
                        position: "absolute",
                        right: "0",
                        top: "0",
                        background: "#d7d7d7",
                        width: 24,
                        height: 24,
                        p: 0.5,
                      }}
                      onClick={() => handleRemoveImage(index)}
                    >
                      <LiaTimesSolid />
                    </IconButton>
                  </Tooltip>
                </Box>
              );
            })}
          </Stack>
        </>
      ) : null}

      {fileRejectionItems ? <ul>{fileRejectionItems}</ul> : null}
    </>
  );
}

export default FileUploadComponent;