import React, { useState } from 'react';
import PropTypes from 'prop-types';
import dayjs from 'dayjs';

import {
  Button,
  Chip,
  DatePicker,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Grid,
  InputAdornment,
} from '@/mui/components';

const get30DaysBack = () => dayjs(new Date()).add(-29, 'days');

function DownloadResponse(props) {
  const [startingFrom, setStartingFrom] = useState(get30DaysBack());
  return (
    <Dialog open={props.open} onClose={props.onClose} maxWidth="md">
      <DialogTitle onClose={props.onClose}>Download responses</DialogTitle>
      <DialogContent>
        <Grid>
          <DatePicker
            format="MM/DD/YYYY"
            maxDate={dayjs(new Date())}
            minDate={get30DaysBack()}
            value={dayjs(startingFrom)}
            onChange={(d) => {
              setStartingFrom(d.toDate());
            }}
            slot={{
              toolbar: {
                hidden: true,
              },
            }}
            slotProps={{
              textField: {
                InputProps: {
                  startAdornment: (
                    <InputAdornment position="start">
                      <Chip variant="text" color="neutral" size="medium" label="Starting From:" />
                    </InputAdornment>
                  ),
                },
              },
            }}
          />
        </Grid>
      </DialogContent>
      <DialogActions>
        <Button size="small" variant="outlined" color="primary" onClick={props.onClose}>
          Cancel
        </Button>
        <Button size="small" variant="contained" color="primary" onClick={() => props.onDownload(startingFrom)}>
          Download
        </Button>
      </DialogActions>
    </Dialog>
  );
}

DownloadResponse.propTypes = {
  open: PropTypes.bool.isRequired,
  onDownload: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
};

export default DownloadResponse;
