import { IconMath1Divide2 } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

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

import useFormatDate from 'src/hooks/useFormatDate';
import { ConsumptionType } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type DateRangeDetailProps = {
  date: string;
  consumptionType: ConsumptionType;
};

const DateRangeDetail = (props: DateRangeDetailProps) => {
  const { date, consumptionType } = props;
  const { formatDate } = useFormatDate();
  const theme = useTheme();

  const { t } = useLokaliseTranslation('time_off');

  const dayOfMonth = formatDate(date, 'd');
  const monthAndYear = formatDate(date, 'MMM yy');

  return (
    <>
      <HuCardContainer
        sx={{
          '& .MuiCardContent-root': {
            p: consumptionType === ConsumptionType.HALF_DAY ? 0 : 1,
          },
          maxWidth: 72,
          height: 72,
        }}
      >
        <Stack
          sx={{
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Typography
            variant="globalM"
            sx={{
              fontWeight: 'fontWeightSemiBold',
              color: theme.palette.new.text.neutral.brand,
            }}
          >
            {dayOfMonth}
          </Typography>
          <Typography
            variant="globalXS"
            fontWeight="fontWeightRegular"
          >
            {monthAndYear}
          </Typography>
        </Stack>
        {consumptionType === ConsumptionType.HALF_DAY && (
          <HuTooltip title={t('CONSUMPTION_TYPE_HALF_DAY')}>
            <Stack
              sx={{
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: theme.palette.new.background.feedback.info,
                height: 25,
              }}
            >
              <IconMath1Divide2
                height={20}
                width={20}
                color={theme.palette.new.text.feedback.info}
              />
            </Stack>
          </HuTooltip>
        )}
      </HuCardContainer>
    </>
  );
};
export default DateRangeDetail;