import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'clsx';
import dayjs from 'dayjs';
import isSameOrAfterPlugin from 'dayjs/plugin/isSameOrAfter';

import { DatePicker, Grid, Stack } from '@/mui/components';

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

dayjs.extend(isSameOrAfterPlugin);

const disableTodayAndFuture = (dateFromCalendar) => {
  const boolFlagTable = [
    dayjs(new Date()).subtract(31, 'days').isSameOrAfter(dateFromCalendar),
    dayjs(new Date()).subtract(1, 'days').isBefore(dateFromCalendar),
  ];

  return boolFlagTable.some(Boolean);
};

const disabledPastAndOver30Day = (startDate) => (dateFromCalendar) => {
  const boolFlagTable = [
    dayjs(startDate).isSameOrAfter(dateFromCalendar),
    dayjs(startDate).add(31, 'days').isBefore(dateFromCalendar),
    dayjs(new Date()).subtract(30, 'days').isSameOrAfter(dateFromCalendar),
    dayjs(new Date()).isBefore(dateFromCalendar),
  ];

  return boolFlagTable.some(Boolean);
};

function CustomPeriod({ from = null, to = null, ...props }) {
  const [startDate, setStartDate] = useState(from);
  const [endDate, setEndDate] = useState(to);
  const shouldShowCustomPeriodCalendars = props.showCustomPeriodCalendars && !props.titleMode;

  const handleSetStartDate = (momentDate) => {
    const date = momentDate.toDate();

    setStartDate(date);
    setEndDate(null);
  };
  const handleSetEndDate = (momentDate) => {
    const date = momentDate.toDate();
    setEndDate(date);
    props.onPeriodSelect({
      from: startDate,
      to: date,
    });
  };

  return (
    <Grid container direction="column">
      <Grid
        item
        className={classNames({
          [styles.LabelWrapper]: shouldShowCustomPeriodCalendars,
        })}
      >
        {props.titleMode && from && to
          ? `${dayjs(from).format('MMM DD, YYYY')} - ${dayjs(to).format('MMM DD, YYYY')}`
          : props.label}
      </Grid>

      {shouldShowCustomPeriodCalendars && (
        <Stack spacing={2}>
          <DatePicker
            className={styles.DatePicker}
            value={dayjs(startDate)}
            onChange={handleSetStartDate}
            shouldDisableDate={disableTodayAndFuture}
            format="MM/DD/YYYY"
            slotProps={{
              textField: {
                size: 'small',
                placeholder: 'MM/DD/YYYY',
                error: false,
              },
            }}
          />
          <DatePicker
            className={styles.DatePicker}
            inputVariant="outlined"
            value={dayjs(endDate)}
            onChange={handleSetEndDate}
            shouldDisableDate={disabledPastAndOver30Day(startDate)}
            format="MM/DD/YYYY"
            slotProps={{
              textField: {
                size: 'small',
                placeholder: 'MM/DD/YYYY',
                error: false,
              },
            }}
          />
        </Stack>
      )}
    </Grid>
  );
}

CustomPeriod.propTypes = {
  label: PropTypes.string.isRequired,
  from: PropTypes.string,
  to: PropTypes.string,
  showCustomPeriodCalendars: PropTypes.bool.isRequired,
  titleMode: PropTypes.bool.isRequired,
  onPeriodSelect: PropTypes.func.isRequired,
};

export default CustomPeriod;
