import { type FC, memo } from 'react';

import HuUserAvatar from '@material-hu/components/composed-components/UserAvatar';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import DaysInfoInMonth from 'src/pages/dashboard/timeOff/components/calendar/DaysInfoInMonth';
import {
  type CalendarRequests,
  type CalendarUser,
  type HolidaysInfo,
  type RegionInfo,
  type ResponseRequestTimeOff,
} from 'src/types/vacations';
import { getFullName } from 'src/utils/userUtils';
import { getDaysInMonth } from 'src/utils/vacations';

import { ellipsisTypographyStyle } from '../../constant';

export type RequestCalendarRowContentProps = {
  month: Date;
  requestCalendar: CalendarRequests;
};

export const RequestCalendarRowContent: FC<
  RequestCalendarRowContentProps
> = props => {
  const { month, requestCalendar } = props;

  type RenderRowWithRequestInMonthProps = {
    user: CalendarUser;
    requests: ResponseRequestTimeOff[];
    holidays: HolidaysInfo[];
    region: RegionInfo;
  };

  const renderRowWithRequestInMonth = ({
    user,
    requests,
    holidays,
    region,
  }: RenderRowWithRequestInMonthProps) => {
    const amountDaysInMonth = getDaysInMonth(month);

    return amountDaysInMonth.map((_, index) => (
      <DaysInfoInMonth
        key={`${getFullName(user)}-${index}`}
        month={month}
        day={index + 1}
        workdays={user.workdays}
        holidays={holidays}
        requests={requests}
        region={region}
        amountDaysInMonth={amountDaysInMonth.length}
      />
    ));
  };

  const user = requestCalendar.user;

  return (
    <HuTableRow>
      <HuTableCell
        sx={{
          borderRight: ({ palette }) =>
            `1px solid ${palette?.new?.border?.neutral?.default}`,
          position: 'sticky',
          left: 0,
          zIndex: 50,
          backgroundColor: theme =>
            theme?.palette?.new?.background?.layout?.tertiary,
          p: 0,
        }}
      >
        <HuTooltip title={getFullName(user)}>
          <HuUserAvatar
            user={user}
            sx={{
              width: 240,
              '& .MuiListItem-root': { pl: 1 },
              '& .MuiTypography-root': {
                fontWeight: 'fontWeightRegular',
                ...ellipsisTypographyStyle,
              },
            }}
          />
        </HuTooltip>
      </HuTableCell>
      {renderRowWithRequestInMonth({
        user,
        requests: requestCalendar.requests,
        holidays: requestCalendar.holidays,
        region: requestCalendar.region,
      })}
    </HuTableRow>
  );
};

export default memo(RequestCalendarRowContent);