import { type FC } from 'react';

import { isBefore, parseISO } from 'date-fns';
import { IconArrowNarrowRight } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import CardContainer from '@material-hu/components/design-system/CardContainer';

import { DateRangeDetail } from 'src/pages/dashboard/timeOff/components/shared';
import { type DateToRequest } from 'src/types/vacations';

export type DateRangeDescriptionProps = {
  title: string;
  from: DateToRequest;
  to: DateToRequest;
};

export const DateRangeDescription: FC<DateRangeDescriptionProps> = props => {
  const { title, from, to } = props;

  const isStartDateBeforeEndDate = isBefore(
    new Date(parseISO(from.date)),
    new Date(parseISO(to.date)),
  );

  return (
    <CardContainer
      color="grey"
      fullWidth
    >
      <Stack>
        <Typography
          variant="globalXS"
          color={theme => theme.palette.new.text.neutral.lighter}
        >
          {title}
        </Typography>
        <Stack
          sx={{ mt: 1, alignItems: 'center', gap: 3, flexDirection: 'row' }}
        >
          <DateRangeDetail
            date={from.date}
            consumptionType={from.consumptionType}
          />
          {isStartDateBeforeEndDate && (
            <>
              <IconArrowNarrowRight />
              <DateRangeDetail
                date={to.date}
                consumptionType={to.consumptionType}
              />
            </>
          )}
        </Stack>
      </Stack>
    </CardContainer>
  );
};

export default DateRangeDescription;