import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

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

import { type ResponseRequestTimeOff } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';
import {
  analizeRequest,
  getCorrectBordersInRequest,
} from 'src/utils/vacations';

import { useCollaboratorView } from '../../CollaboratorViewContext';
import getCalendarRequestDrawer from '../Drawers/getCalendarRequestDrawer';
import { getRequestDetailsDrawer } from '../Drawers/RequestDetailsDrawer';

export type DaysRequestInMonthProps = {
  date: Date;
  request: ResponseRequestTimeOff;
  amountDaysInMonth: number;
  cellWidth: number;
};

export const DaysRequestInMonth = (props: DaysRequestInMonthProps) => {
  const { t } = useLokaliseTranslation('time_off');
  const { date, request, amountDaysInMonth, cellWidth } = props;
  const theme = useTheme();
  const { isCollaboratorView } = useCollaboratorView();

  const requestInfoToShowInCalendar = analizeRequest(
    request,
    date,
    amountDaysInMonth,
    cellWidth,
    theme,
    isCollaboratorView,
  );

  const { drawer: requestDetailDrawer, showDrawer: showRequestDetailDrawer } =
    useDrawerV2(args =>
      getRequestDetailsDrawer({
        ...args,
        requestId: request.id,
        openWithCalendar: true,
        isManagerView: !isCollaboratorView,
      }),
    );

  const {
    drawer: baseCalendarRequestDrawer,
    showDrawer: showBaseCalendarRequestDrawer,
  } = useDrawerV2(args =>
    getCalendarRequestDrawer({
      ...args,
      requestId: request.id,
    }),
  );

  if (!requestInfoToShowInCalendar) return null;

  const handleOnClick = (e: React.MouseEvent<HTMLDivElement>) => {
    e.stopPropagation();
    if (isCollaboratorView) {
      showBaseCalendarRequestDrawer({});
    } else {
      showRequestDetailDrawer({});
    }
  };

  return (
    <>
      {requestDetailDrawer}
      {baseCalendarRequestDrawer}
      <Stack
        onClick={handleOnClick}
        sx={{
          cursor: 'pointer',
          justifyContent: 'center',
          position: requestInfoToShowInCalendar.isEnd ? 'absolute' : 'relative',
          right: requestInfoToShowInCalendar.isEnd ? 6 : 0,
          backgroundColor: requestInfoToShowInCalendar.backgroundColor,
          width: requestInfoToShowInCalendar.width,
          border: requestInfoToShowInCalendar.border,
          height: 36,
          ...getCorrectBordersInRequest(
            requestInfoToShowInCalendar.isInDifferentsMonth,
            requestInfoToShowInCalendar.isBegin,
            requestInfoToShowInCalendar.isEnd,
          ),
          p: 1,
          my: 0.5,
          zIndex: requestInfoToShowInCalendar.isInDifferentsMonth ? 1 : 5,
        }}
      >
        <HuTooltip title={request.policyType.name || t('away')}>
          <Typography
            sx={{
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              textTransform: 'capitalize',
              color: requestInfoToShowInCalendar.color,
              fontWeight: 'fontWeightSemiBold',
              display: 'inline-block',
              maxWidth: '100%',
              width: 'fit-content',
            }}
          >
            {request.policyType.name || t('away')}
          </Typography>
        </HuTooltip>
      </Stack>
    </>
  );
};

export default DaysRequestInMonth;