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

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

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

import { ellipsisTypographyStyle } from '../../constant';
import { DateRangeDescription, GenericTitleDescription } from '../shared';

type BaseDataRequestProps = {
  vacationDetail: ResponseRequestTimeOff;
};

const BaseDataRequest = ({ vacationDetail }: BaseDataRequestProps) => {
  const { t } = useLokaliseTranslation('time_off');
  return (
    <Stack sx={{ gap: 2 }}>
      <CardContainer
        color="grey"
        fullWidth
      >
        <Typography
          variant="globalXS"
          color={theme => theme.palette.new.text.neutral.lighter}
        >
          {t('requested_by')}
        </Typography>
        <UserAvatar
          user={vacationDetail?.issuer}
          profileProps={{
            redirectToPath: `/profile/${vacationDetail?.issuer?.id}`,
          }}
          sx={{
            '& .MuiListItem-root': {
              py: 0.5,
              px: 0,
            },
            '& .MuiTypography-root': {
              ...ellipsisTypographyStyle,
              maxWidth: 500,
            },
          }}
        />
      </CardContainer>
      <GenericTitleDescription
        title={t('request_type_one')}
        description={vacationDetail?.policyType?.name || t('away')}
      />
      <DateRangeDescription
        title={t('absence.period')}
        from={vacationDetail?.from}
        to={vacationDetail?.to}
      />
    </Stack>
  );
};

export default BaseDataRequest;