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

import { TYPE_WARNING } from '@/modules/@common/notify/constants';

import { notifyAction } from '@/modules/@common/notify/redux/slices';

import { Button, DateTimePicker, Stack, Typography } from '@/mui/components';

function FilterTimePickerComponent(props) {
  const dispatch = useDispatch();
  const [startDate, setStartDate] = useState(
    props.selected.startDate && dayjs(props.selected.startDate).isValid()
      ? dayjs(props.selected.startDate)
      : dayjs().add(-7, 'days'),
  );
  const [endDate, setEndDate] = useState(
    props.selected.startDate && dayjs(props.selected.endDate).isValid() ? dayjs(props.selected.endDate) : dayjs(),
  );
  const [error, setError] = useState(false);

  const handleSetDateTimeClick = () => {
    const startDateTime = startDate.toDate().getTime();
    const endDateTime = endDate.toDate().getTime();
    const isInThePast = startDateTime >= endDateTime;

    if (!isInThePast) {
      props.selectAction({
        ...props.config,
        value: {
          startDate: startDate.toDate().getTime(),
          endDate: endDate.toDate().getTime(),
        },
      });
      props.onClose();
    } else {
      dispatch(
        notifyAction({
          variant: TYPE_WARNING,
          message: 'The start date cannot be greater than the end date',
        }),
      );

      setError(isInThePast);
    }
  };

  return (
    <Stack fullWidth spacing={2}>
      <Stack spacing={1} direction="row" alignItems="center" justifyContent="space-between">
        <Typography variant="body2">Custom</Typography>
        <Button size="xSmall" variant="text" onClick={handleSetDateTimeClick}>
          Apply
        </Button>
      </Stack>
      <Stack spacing={1}>
        <DateTimePicker
          value={dayjs(startDate)}
          data-id="datePickerDateCreation"
          maxDate={endDate ? dayjs(endDate) : dayjs().endOf('day')}
          onChange={(date) => setStartDate(date)}
          onAccept={(date) => setStartDate(date)}
          format="MM/DD/YYYY hh:mm A"
          slotProps={{
            actionBar: {
              hidden: true,
            },
            textField: {
              size: 'xSmall',
              placeholder: 'Add From Date',
              InputProps: {
                error,
              },
            },
          }}
        />
        <DateTimePicker
          value={dayjs(endDate)}
          data-id="datePickerDateCreation"
          minDate={startDate ? dayjs(startDate) : dayjs(0)}
          maxDate={dayjs().endOf('day')}
          onChange={(date) => setEndDate(date)}
          onAccept={(date) => setEndDate(date)}
          format="MM/DD/YYYY hh:mm A"
          slotProps={{
            actionBar: {
              hidden: true,
            },
            textField: {
              size: 'xSmall',
              placeholder: 'Add To Date',
              InputProps: {
                error,
              },
            },
          }}
        />
      </Stack>
    </Stack>
  );
}

FilterTimePickerComponent.propTypes = {
  config: PropTypes.shape({}).isRequired,
  selected: PropTypes.shape({
    startDate: PropTypes.string.isRequired,
    endDate: PropTypes.string.isRequired,
  }).isRequired,
  selectAction: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
};

export default FilterTimePickerComponent;
