import { useMemo } from 'react';

import { compact } from 'lodash-es';
import { IconBriefcase, IconCake } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

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

import { useRequiredAuth } from 'src/contexts/JWTContext';
import useFormatDate from 'src/hooks/useFormatDate';
import { type UserProfile } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullName } from 'src/utils/userUtils';

import { COVER_ASPECT_RATIO } from '../constants';
import { getSeniorityDuration } from '../utils';

import CoverDate from './CoverDate';
import CoverFunctions from './CoverFunctions';
import EditCoverPictureButton from './EditCoverPictureButton';
import ProfilePicture from './ProfilePicture';

type CoverProps = {
  user: UserProfile;
};

const Cover = ({ user }: CoverProps) => {
  const { instance } = useRequiredAuth();
  const { t } = useLokaliseTranslation('profile');
  const { formatDayWithoutYear } = useFormatDate();
  const positionDescription = compact([
    user.jobPosition?.name,
    user.department?.name,
  ]).join(' | ');

  const seniorityDuration = useMemo(() => {
    const duration = !user.hiringDate
      ? { years: 0, months: 0, days: 0 }
      : getSeniorityDuration(user.hiringDate);

    const years = duration.years ?? 0;
    const months = duration.months ?? 0;
    const days = duration.days ?? 0;

    if (years >= 1) {
      return { key: 'hiringDate', value: years };
    }
    if (months >= 1) {
      return { key: 'hiring_date_months', value: months };
    }
    if (days >= 1) {
      return { key: 'hiring_date_days', value: days };
    }
    return { key: 'hiring_date_days', value: 0 };
  }, [user.hiringDate]);

  return (
    <CardContainer
      hasShadow
      fullWidth
      img={user.coverPicture || instance.defaultCoverPicture}
      sx={{
        position: 'relative',
        '.CardContainerImage-root': {
          aspectRatio: COVER_ASPECT_RATIO,
          objectFit: 'cover',
          objectPosition: 'center center', // currently not all cover pictures are 4/1, so we need to center the image
        },
      }}
      padding={24}
    >
      <EditCoverPictureButton user={user} />
      <Stack sx={{ gap: 2.5, flexDirection: 'row', alignItems: 'flex-start' }}>
        <ProfilePicture user={user} />
        <Stack
          sx={{
            flex: 1,
            minWidth: 0,
            gap: 1,
          }}
        >
          <Title
            title={
              getFullName(user) + (user.nickname ? ` (${user.nickname})` : '')
            }
            sx={{
              '*': {
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              },
            }}
            description={positionDescription}
            variant="L"
          />
          <Stack sx={{ gap: 0.25 }}>
            {user.birthdate && (
              <CoverDate
                Icon={IconCake}
                text={formatDayWithoutYear(user.birthdate)}
              />
            )}
            {user.hiringDate && !!seniorityDuration.value && (
              <CoverDate
                Icon={IconBriefcase}
                text={t(seniorityDuration.key, {
                  count: seniorityDuration.value,
                })}
              />
            )}
          </Stack>
        </Stack>
        <CoverFunctions user={user} />
      </Stack>
    </CardContainer>
  );
};

export default Cover;