import { Popover } from '@mui/material';

import { makeStyles } from 'tss-react/mui';

import {
  defaultAnchorOrigin,
  defaultTransformOrigin,
  type PickersData,
  type PopoverData
} from './models';
import PickersStartEndDate from './PickersStartEndDate';
import usePickersStartEndDate from './usePickersStartEndDate';

const useStyles = makeStyles()((theme) => ({
  paper: {
    '& .MuiPopover-paper': {
      minWidth: 250,
      padding: theme.spacing(1)
    }
  }
}));

interface Props {
  pickersData: PickersData;
  popoverData: PopoverData;
}

const PopoverCustomTimePeriod = ({
  popoverData,
  pickersData
}: Props): JSX.Element => {
  const { classes } = useStyles();

  const { open, onClose } = popoverData;
  const { acceptDate, customTimePeriod } = pickersData;

  const { startDate, endDate, changeDate } = usePickersStartEndDate({
    acceptDate,
    customTimePeriod
  });

  const anchorEl = popoverData?.anchorEl;
  const anchorPosition = popoverData?.anchorPosition;
  const anchorOrigin = popoverData?.anchorOrigin;
  const transformOrigin = popoverData?.transformOrigin;
  const anchorReference = anchorPosition ? 'anchorPosition' : 'anchorEl';

  const disabled = {
    isDisabledEndPicker: pickersData?.isDisabledEndPicker,
    isDisabledStartPicker: pickersData?.isDisabledStartPicker
  };

  return (
    <Popover
      anchorEl={anchorEl}
      anchorOrigin={anchorOrigin ?? defaultAnchorOrigin}
      anchorPosition={anchorPosition}
      anchorReference={anchorReference}
      className={classes.paper}
      onClose={onClose}
      open={open}
      transformOrigin={transformOrigin ?? defaultTransformOrigin}
    >
      <PickersStartEndDate
        changeDate={changeDate}
        disabled={disabled}
        endDate={endDate}
        rangeEndDate={pickersData?.rangeEndDate}
        rangeStartDate={pickersData?.rangeStartDate}
        startDate={startDate}
      />
    </Popover>
  );
};

export default PopoverCustomTimePeriod;