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

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuUserAvatar from '@material-hu/components/composed-components/UserAvatar';
import HuAvatarGroup from '@material-hu/components/design-system/AvatarGroup';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import HuDrawer from '@material-hu/components/design-system/Drawer';

import { userInitials } from 'src/pages/dashboard/events/utils';
import ApproversAccordion from 'src/pages/dashboard/timeOff/components/requestReport/ApproversAccordion';
import { type User } from 'src/types/user';
import { type ApprovalStepsType } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getStepToObtainApprovers } from 'src/utils/vacations';

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

export type ApproversProps = {
  vacationId: number;
  approvalSteps: ApprovalStepsType;
  isManagerView: boolean;
};

export type AvatarGroupStyledProps = {
  potentialApproversCount: number;
};

const Approvers: FC<ApproversProps> = props => {
  const { approvalSteps, vacationId, isManagerView } = props;
  const [seeApprovers, setSeeApprovers] = useState(false);
  const { t } = useLokaliseTranslation('time_off');

  const { count, approvers } = getStepToObtainApprovers(approvalSteps);

  const openSeeApprovers = () => setSeeApprovers(true);
  const closeSeeApprovers = () => setSeeApprovers(false);

  return (
    <CardContainer
      color="grey"
      fullWidth
    >
      <Stack>
        <Typography
          variant="globalXS"
          sx={{
            color: theme => theme.palette.new.text.neutral.lighter,
          }}
        >
          {t('responsible_for_response', { count })}
        </Typography>
        {count === 1 && (
          <HuUserAvatar
            profileProps={{
              redirectToPath: `/profile/${approvers[0].id}`,
            }}
            user={approvers[0]}
            sx={{
              '& .MuiListItem-root': { py: 0.5, px: 0 },
              '& .MuiStack-root': { gap: 2 },
              '& .MuiTypography-root': {
                ...ellipsisTypographyStyle,
                maxWidth: 500,
              },
            }}
          />
        )}
        {count !== 1 && (
          <Stack
            onClick={openSeeApprovers}
            sx={{ cursor: 'pointer' }}
          >
            <HuAvatarGroup
              avatars={approvers.map((user: User) => ({
                src: user.profilePicture,
                text: !user.profilePicture && userInitials(user),
                color: 'primary',
              }))}
            />
          </Stack>
        )}
        <HuDrawer
          open={seeApprovers}
          onClose={closeSeeApprovers}
          title={t('responsible_for_response_other')}
          hasBackButton
        >
          <Stack sx={{ gap: 2 }}>
            {approvalSteps.map(stepItem => (
              <ApproversAccordion
                key={stepItem.id}
                step={stepItem}
                isManagerView={isManagerView}
                vacationId={vacationId}
                approvalSteps={approvalSteps}
              />
            ))}
          </Stack>
        </HuDrawer>
      </Stack>
    </CardContainer>
  );
};

export default Approvers;