import { useState } from 'react';

import { isNumber } from 'lodash-es';
import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import Typography from '@material-hu/mui/Typography';

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 AdjustBalance from 'src/pages/dashboard/timeOff/components/balanceReport/AdjustBalance';
import ReportBalanceMenu from 'src/pages/dashboard/timeOff/components/balanceReport/ReportBalanceMenu';
import { type BalanceReport } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { isPolicyTypeDay } from 'src/utils/vacations';

import { ellipsisTypographyStyle } from '../../constant';
import { useCreateRequestDrawer } from '../Drawers/CreateRequestDrawer';
import { getPolicyBalanceDetailDrawer } from '../Drawers/PolicyBalanceDetailDrawer';

export type ReportBalanceRowContentProps = {
  reportItem: BalanceReport;
};

const ReportBalanceRowContent = (props: ReportBalanceRowContentProps) => {
  const { reportItem } = props;
  const { t } = useLokaliseTranslation('time_off');
  const [openAdjustAvailableTime, setOpenAdjustAvailableTime] = useState(false);
  const isDayType = isPolicyTypeDay(reportItem?.policy?.policyType);

  const handleOpenAdjustAvailableTime = () => setOpenAdjustAvailableTime(true);
  const handleCloseAdjustAvailableTime = () =>
    setOpenAdjustAvailableTime(false);

  const handleOnClickOpenPolicyBalanceDetail = () => {
    showPolicyBalanceDetailDrawer({});
  };

  const {
    drawer: policyTypeDetailDrawer,
    showDrawer: showPolicyBalanceDetailDrawer,
  } = useDrawerV2(args =>
    getPolicyBalanceDetailDrawer({
      ...args,
      policyType: reportItem.policy?.policyType,
      userCollaborator: reportItem.user,
    }),
  );

  const {
    drawer: requestByManagerDrawer,
    showDrawer: showRequestByManagerDrawer,
  } = useDrawerV2(args =>
    useCreateRequestDrawer({
      ...args,
      policyTypes: [reportItem.policy?.policyType],
      user: reportItem.user,
      isManagerRequesting: true,
      policyTypeSelected: {
        value: reportItem.policy?.policyType?.id,
        label: reportItem.policy?.policyType?.name,
      },
    }),
  );

  const amountRequestedWording = isDayType
    ? t('total_days', { count: reportItem?.amountRequested })
    : t('hours', { count: reportItem?.amountRequested });

  const currentBalanceWording =
    isNumber(reportItem.currentBalance) &&
    (isDayType
      ? t('total_days', { count: reportItem?.currentBalance })
      : t('hours', { count: reportItem?.currentBalance }));

  return (
    <>
      {policyTypeDetailDrawer}
      {requestByManagerDrawer}
      <HuTableRow
        onClick={handleOnClickOpenPolicyBalanceDetail}
        sx={{
          cursor: 'pointer',
        }}
      >
        <HuTableCell>
          <HuUserAvatar
            user={reportItem.user}
            sx={{
              '& .MuiListItem-root': { p: 0 },
              '& .MuiTypography-root': {
                fontWeight: 'fontWeightRegular',
                ...ellipsisTypographyStyle,
              },
            }}
          />
        </HuTableCell>
        <HuTableCell>
          <Typography>{reportItem?.user.employeeInternalId}</Typography>
        </HuTableCell>
        <HuTableCell
          sx={{
            '& .MuiTypography-root': {
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              maxWidth: 200,
            },
          }}
        >
          <Typography>{reportItem?.policy?.policyType?.name}</Typography>
        </HuTableCell>
        <HuTableCell>
          <Typography align="left">{amountRequestedWording}</Typography>
        </HuTableCell>
        <HuTableCell>
          <Typography align="left">{currentBalanceWording || '-'}</Typography>
        </HuTableCell>
        <HuTableCell sx={{ width: 50 }}>
          <ReportBalanceMenu
            onOpenAdjustAvailableTime={handleOpenAdjustAvailableTime}
            showRequestByManagerDrawer={showRequestByManagerDrawer}
            reportItem={reportItem}
            showPolicyBalanceDetailDrawer={showPolicyBalanceDetailDrawer}
          />
        </HuTableCell>
      </HuTableRow>
      <AdjustBalance
        open={openAdjustAvailableTime}
        onClose={handleCloseAdjustAvailableTime}
        reportItem={reportItem}
      />
    </>
  );
};

export default ReportBalanceRowContent;