/**
 * @deprecated Use `@material-hu/components/composed-components/CoverPictureUploader/form` instead
 */
// name: the react-hook-form field with the original url and the object url of the selected images
// you can restart both by using setValues(name, null)
import { Controller, useFormContext } from 'react-hook-form';

import { type Accept, useDropzone } from '@humanddev/material-hu/dropzone';
import CloudUploadIcon from '@material-hu/icons/material/CloudUpload';
import Box, { type BoxProps } from '@material-hu/mui/Box';
import Link from '@material-hu/mui/Link';
import Stack from '@material-hu/mui/Stack';
import { alpha } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { bytesToSize } from 'src/utils/filesUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  fileDescription: string;
  maxFiles: number;
  name: string;
  sx?: BoxProps['sx'];
  rules?: any;
  accept?: Accept;
  maxSize?: number;
};
const FormFileDropZone = ({
  fileDescription,
  maxFiles,
  name,
  sx,
  accept,
  maxSize,
  rules,
}: Props) => {
  const { control, trigger } = useFormContext();
  const { t } = useLokaliseTranslation('backoffice_only');
  const isSingleFile = maxFiles === 1;

  return (
    <Controller
      name={name}
      control={control}
      rules={rules}
      render={({ field: { onChange, value } }) => {
        const onDrop = (files: File[]) => {
          if (!files[0]) {
            return;
          }
          onChange({ file: files[0], url: null });
          trigger(name);
        };

        const { getRootProps, getInputProps, isDragActive } = useDropzone({
          onDrop,
          accept: accept || { 'image/png': [], 'image/jpeg': [] },
          maxFiles,
          multiple: !isSingleFile,
          maxSize,
        });
        return (
          <Box
            sx={{
              border: 1,
              borderRadius: 1,
              borderColor: 'divider',
              backgroundColor: theme =>
                alpha(theme.palette.action.active, isDragActive ? 0.1 : 0.05),
              borderStyle: 'dashed',
              height: 200,
              ...sx,
            }}
          >
            {isSingleFile && value ? (
              <Stack
                sx={{
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '100%',
                }}
              >
                <img
                  src={value.url || URL.createObjectURL(value.file)}
                  alt="alt"
                  style={{ maxWidth: '100%', maxHeight: '100%' }}
                />
              </Stack>
            ) : (
              <Stack
                {...getRootProps()}
                sx={{
                  height: '100%',
                  alignItems: 'center',
                  justifyContent: 'center',
                  cursor: 'pointer',
                  '&:hover': {
                    opacity: 0.5,
                  },
                }}
              >
                <input {...getInputProps()} />
                <CloudUploadIcon fontSize="large" />
                <Typography>
                  {t('backoffice_only:form_file_dropzone.drag_cover_picture', {
                    fileDescription,
                  })}
                </Typography>
                <Typography>
                  {t('backoffice_only:form_file_dropzone.or')}
                </Typography>
                <Typography>
                  {' '}
                  <Link
                    color="primary"
                    underline="always"
                  >
                    {t('backoffice_only:form_file_dropzone.select')}
                  </Link>{' '}
                  {t('backoffice_only:form_file_dropzone.from_your_pc')}
                </Typography>
                {maxSize && (
                  <Typography color="secondary">
                    {t('backoffice_only:form_file_dropzone.max_size', {
                      maxSize: bytesToSize(maxSize),
                    })}
                  </Typography>
                )}
              </Stack>
            )}
          </Box>
        );
      }}
    />
  );
};
export default FormFileDropZone;