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

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

import { type ResponseRequestTimeOff } from 'src/types/vacations';
import { insertIf } from 'src/utils/arrays';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getCorrectState } from 'src/utils/vacations';

import { Status } from './RequestRowContent';

type RequestStatusProps = {
  vacationDetail: ResponseRequestTimeOff;
  isManagerView: boolean;
};

const RequestStatus = ({
  vacationDetail,
  isManagerView,
}: RequestStatusProps) => {
  const { t } = useLokaliseTranslation('time_off');

  const statusState =
    isManagerView && vacationDetail
      ? getCorrectState(vacationDetail)
      : vacationDetail?.state;

  const elements = [
    {
      key: 'status',
      element: (
        <Stack>
          <Typography
            variant="globalXS"
            sx={{
              color: theme => theme.palette.new.text.neutral.lighter,
            }}
          >
            {t('general:state')}
          </Typography>
          <Status
            sx={{ width: 'fit-content', my: 0.5 }}
            label={t(`vacations_status_${statusState}`)}
            type={statusState}
          />
        </Stack>
      ),
    },
    ...insertIf(!!vacationDetail.resolutionReason, {
      key: 'reason',
      element: (
        <Stack>
          <Typography
            variant="globalXS"
            sx={{
              color: theme => theme.palette.new.text.neutral.lighter,
            }}
          >
            {t('reason')}
          </Typography>
          <Typography variant="globalXS">
            {vacationDetail.resolutionReason}
          </Typography>
        </Stack>
      ),
    }),
  ];

  return (
    <>
      {elements.map(element => (
        <CardContainer
          color="grey"
          fullWidth
          key={element.key}
        >
          {element.element}
        </CardContainer>
      ))}
    </>
  );
};

export default RequestStatus;