import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import Image from 'next/image';

import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Grid, Stack, Typography } from '@/mui/components';

import blue from '@/assets/img/form-banner/blue.png';
import coffee from '@/assets/img/form-banner/coffee.png';
import desk from '@/assets/img/form-banner/desk.png';
import flower from '@/assets/img/form-banner/flower.png';
import green from '@/assets/img/form-banner/green.png';
import notebook from '@/assets/img/form-banner/notebook.png';
import pink from '@/assets/img/form-banner/pink.png';
import textureBlue from '@/assets/img/form-banner/textureblue.png';

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

function UploadPictureBanner(props) {
  const fileInputRef = useRef(null);
  const defaultImageFiles = [blue, coffee, desk, flower, green, notebook, pink, textureBlue];

  return (
    <Dialog open={props.isOpen} onClose={props.onClose} maxWidth="x2l">
      <DialogTitle onClose={props.onClose}>Select a Banner</DialogTitle>
      <DialogContent>
        <Stack spacing={2} fullWidth alignItems="center">
          <Grid container className={styles.DialogBanner} spacing={2} justifyContent="space-between">
            {defaultImageFiles.map((item) => (
              <Grid key={item.src} className={styles.PhotoItem} item xs={6}>
                <Button className={styles.PhotoChoose} onClick={() => props.onChoose(item)} disabled={!!props.disabled}>
                  <Image src={item} alt={item} className={styles.Photo} width={500} height={500} />
                </Button>
              </Grid>
            ))}
          </Grid>
          <Stack spacing={1} direction="row" alignItems="center" fullWidth className={styles.SectionDivider}>
            <Typography variant="body2" fontWeight={400} align="center" component="div" color="text.disabled">
              Or
            </Typography>
          </Stack>
          <div>
            <Button variant="contained" component="label" size="small">
              Upload Custom Banner
              <input
                id="upload-logo"
                hidden
                disabled={props.disabled}
                type="file"
                accept={props.accept.map((item) => `.${item}`).join(',')}
                ref={fileInputRef}
                onChange={props.onChange}
                onClick={(e) => {
                  e.target.value = null;
                }}
              />
            </Button>
          </div>
        </Stack>
      </DialogContent>
      <DialogActions>
        <Button size="small" variant="contained" color="primary" onClick={props.onClose}>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}

UploadPictureBanner.propTypes = {
  accept: PropTypes.arrayOf(PropTypes.string).isRequired,
  disabled: PropTypes.bool.isRequired,
  isOpen: PropTypes.bool.isRequired,
  onChoose: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
  onChange: PropTypes.func.isRequired,
};

export default UploadPictureBanner;
