import { memo, useState } from 'react';

import { IconCalendarEvent } from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';
import { alpha } from '@material-hu/mui/styles';

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

import DaysRequestInMonth from 'src/pages/dashboard/timeOff/components/calendar/DaysRequestInMonth';
import HolidaysDetail from 'src/pages/dashboard/timeOff/components/calendar/HolidaysDetail';
import {
  type HolidaysInfo,
  type RegionInfo,
  type ResponseRequestTimeOff,
} from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';
import {
  checkIsToday,
  checkIsWorkingDay,
  getHolidaysDayInfo,
  getTitleTooltip,
} from 'src/utils/vacations';

import { useCellWidth } from '../../hooks/useCellWidth';

export type DaysInfoInMonthProps = {
  month: Date;
  day: number;
  workdays: string[];
  holidays: HolidaysInfo[];
  requests: ResponseRequestTimeOff[];
  region: RegionInfo;
  amountDaysInMonth: number;
};

export const DaysInfoInMonth = (props: DaysInfoInMonthProps) => {
  const {
    month,
    day,
    workdays,
    holidays,
    requests,
    region,
    amountDaysInMonth,
  } = props;

  const [openDrawerHolidays, setOpenDrawerHolidays] = useState(false);

  const handleOpenDrawerHolidays = () => setOpenDrawerHolidays(true);
  const handleCloseDrawerHolidays = () => setOpenDrawerHolidays(false);

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

  const date = new Date(month.getFullYear(), month.getMonth(), day);
  const isWorkingDay = checkIsWorkingDay(date, workdays);
  const holidaysDayInfo = getHolidaysDayInfo(date, holidays);
  const isToday = checkIsToday(date);
  const titleTooltip = getTitleTooltip(isWorkingDay, !!holidaysDayInfo, t);
  const { width, ref } = useCellWidth();

  const handleOnClick = () => {
    if (holidaysDayInfo) {
      handleOpenDrawerHolidays();
    }
  };

  const boxContent = (
    <Box
      ref={ref}
      sx={{
        minHeight: '75px',
        width: '75px',
        height: '100%',
      }}
      onClick={handleOnClick}
    >
      {!!holidaysDayInfo && (
        <IconButton
          sx={{
            position: 'absolute',
            bottom: 3,
            right: 3,
            p: 0,
          }}
        >
          <IconCalendarEvent />
        </IconButton>
      )}
      {!!requests?.length &&
        requests.map(request => (
          <DaysRequestInMonth
            key={request.id}
            date={date}
            request={request}
            amountDaysInMonth={amountDaysInMonth}
            cellWidth={width}
          />
        ))}
    </Box>
  );

  return (
    <>
      <HolidaysDetail
        open={openDrawerHolidays}
        onClose={handleCloseDrawerHolidays}
        holidaysDayInfo={holidaysDayInfo!}
        region={region}
      />
      <HuTableCell
        key={Math.random()}
        sx={{
          cursor: holidaysDayInfo ? 'pointer' : 'default',
          position: 'relative',
          minWidth: '75px',
          maxWidth: '75px',
          verticalAlign: 'top',
          boxShadow: theme =>
            isToday
              ? `inset 0 0 0 100px ${alpha(theme.palette.newBase?.brand[400]!, 0.08)}`
              : undefined,
          backgroundColor: theme =>
            titleTooltip || holidaysDayInfo
              ? alpha(theme?.palette?.new.background.layout.default!, 0.5)
              : undefined,
          '&:last-child': {
            borderRight: '0 !important',
          },
          borderRight: ({ palette }) =>
            `1px solid ${palette?.new.border.neutral.default}`,
          px: 0.5,
          py: 0.5,
        }}
      >
        {titleTooltip ? (
          <HuTooltip title={titleTooltip}>{boxContent}</HuTooltip>
        ) : (
          boxContent
        )}
      </HuTableCell>
    </>
  );
};

export default memo(DaysInfoInMonth);