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

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

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

const defineInterval = (diff) => {
  if (diff > 14) {
    return {
      interval: 'WEEKS',
      videoChartDataKey: 'date',
    };
  }
  if (diff > 1) {
    return {
      interval: 'DAYS',
      videoChartDataKey: 'date',
    };
  }
  return {
    interval: 'HOURS',
    videoChartDataKey: 'hours',
  };
};

function DialogCalendarRange(props) {
  const [dateStart, setDateStart] = useState(dayjs(new Date()).add(-30, 'days'));
  const [dateEnd, setDateEnd] = useState(dayjs(new Date()));

  const handleDateSubmit = () => {
    // do not change the format 'YYYY-MM-DD' to another or it will corrupt backend
    const toFormat = (date) => (date ? dayjs(date).format('YYYY-MM-DD') : '');
    const diff = dayjs(dateEnd).diff(dateStart, 'days');
    const changesStringFrom = dayjs(dateStart).subtract(diff, 'day');

    const { interval, videoChartDataKey } = defineInterval(Math.abs(diff));

    props.onDateSubmit({
      dateStart: toFormat(dateStart),
      dateEnd: toFormat(dateEnd),
      comparison: {
        dateStart: toFormat(changesStringFrom),
        dateEnd: toFormat(dateStart),
      },
      interval,
      videoChartDataKey,
    });
  };

  return (
    <Dialog
      open={props.open}
      onClose={props.onClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      maxWidth="xl"
    >
      <DialogTitle>Custom range</DialogTitle>
      <DialogContent>
        <Stack direction="row" justifyContent="center" spacing={13}>
          <TextField
            className={styles.FormControl}
            data-id="from"
            value={dayjs(dateStart).format('MMM DD, YYYY')}
            variant="outlined"
            size="small"
            label="From"
            textAlign="center"
            inputProps={{
              readOnly: true,
            }}
          />
          <TextField
            className={styles.FormControl}
            data-id="from"
            value={dayjs(dateEnd).format('MMM DD, YYYY')}
            variant="outlined"
            textAlign="center"
            size="small"
            label="To"
            inputProps={{
              readOnly: true,
            }}
          />
        </Stack>
        <div className={styles.Calendar}>
          <StaticDateRangePicker
            value={[dayjs(dateStart), dayjs(dateEnd)]}
            calendars={2}
            slotProps={{
              toolbar: {
                hidden: true,
              },
              actionBar: {
                actions: [],
              },
            }}
            minDate={dayjs(new Date()).subtract(props.minDate || 90, 'day')}
            maxDate={dayjs(new Date())}
            onChange={([dateStart$, dateEnd$]) => {
              setDateStart(dateStart$);
              setDateEnd(dateEnd$);
            }}
          />
        </div>
      </DialogContent>
      <DialogActions>
        <Button size="small" variant="contained" color="primary" onClick={handleDateSubmit}>
          Apply
        </Button>
      </DialogActions>
    </Dialog>
  );
}

DialogCalendarRange.propTypes = {
  open: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
  onDateSubmit: PropTypes.func.isRequired,
  minDate: PropTypes.number,
};

export default DialogCalendarRange;
