import { forwardRef } from 'react';

import { capitalize } from 'lodash-es';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';

import useFormatDate from 'src/hooks/useFormatDate';
import { checkIsToday } from 'src/utils/vacations';

export type DaysOfMonthProps = {
  month: Date;
  day: number;
};

export const DaysOfMonth = forwardRef<HTMLInputElement, DaysOfMonthProps>(
  function DaysOfMonthComponent(props, ref) {
    const { month, day } = props;
    const { formatDate } = useFormatDate();

    const date = new Date(month.getFullYear(), month.getMonth(), day);
    const isToday = checkIsToday(date);

    return (
      <HuTableCell
        sx={{
          '&:last-child': {
            borderRight: '0 !important',
          },
          borderRight: ({ palette }) =>
            `1px solid ${palette?.new?.border?.neutral?.default}`,
          p: 0,
          minWidth: '75px',
          maxWidth: '75px',
          zIndex: 100,
          backgroundColor: theme => theme.palette.new.background.layout.default,
          borderBottom: ({ palette }) =>
            `${isToday ? 4 : 1}px solid ${isToday ? palette.newBase?.brand[400] : 'none'} !important`,
        }}
      >
        <Stack
          sx={{ alignItems: 'center', justifyContent: 'center' }}
          ref={isToday ? ref : null}
        >
          <Typography
            variant="globalS"
            sx={{ fontWeight: 'fontWeightSemiBold', textAlign: 'center' }}
          >
            {formatDate(date, 'd')}
          </Typography>
          <Typography
            variant="globalS"
            sx={{ fontWeight: 'fontWeightSemiBold', textAlign: 'center' }}
          >
            {capitalize(formatDate(date, 'EEE'))}
          </Typography>
        </Stack>
      </HuTableCell>
    );
  },
);

export default DaysOfMonth;