import React from 'react';
import PropTypes from 'prop-types';
import Image from 'next/image';
import { useTheme } from '@mui/material/styles';
import { DeleteRounded, FileUploadRounded, ImageRounded } from '@mui/icons-material';

import { IconButton, Stack, Typography } from '@/mui/components';

import styles from './UploadImage.module.scss';

function UploadImage(props) {
  const theme = useTheme();
  // eslint-disable-next-line react/prop-types
  const backgroundColor = props.backgroundColor ?? theme.palette.background.paper;

  return (
    <Stack spacing={2} direction="row">
      <div>
        <div className={styles.ImageWrapper}>
          {!props.image && (
            <ImageRounded fontSize="xLarge" htmlColor={theme.palette.getContrastText(backgroundColor)} />
          )}
          {props.image && <Image className={styles.Image} src={props.image} alt="" width={120} height={120} />}
        </div>
      </div>
      <Stack spacing={1} fullWidth>
        <Stack direction="row" alignItems="flex-start" spacing={1} className={styles.ControllerWrapper}>
          <IconButton size="small" color="neutral" disabled={props.disabled} onClick={props.onClick}>
            <FileUploadRounded />
          </IconButton>
          {props.image && (
            <IconButton size="small" color="neutral" component="span" onClick={props.onDelete}>
              <DeleteRounded />
            </IconButton>
          )}
        </Stack>
        <Typography component="div" variant="caption" color="text.secondary">
          {`${props.accept.map((item) => item.toUpperCase()).join(', ')}. Max File Size ${props.size}kb`}
        </Typography>
      </Stack>
    </Stack>
  );
}

UploadImage.propTypes = {
  image: PropTypes.string.isRequired,
  accept: PropTypes.arrayOf(PropTypes.string).isRequired,
  size: PropTypes.number.isRequired,
  disabled: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
  onDelete: PropTypes.func.isRequired,
};

export default UploadImage;
