import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { useAuth } from 'src/contexts/JWTContext';
import { formatDateFromISO, formatDistanceToNow } from 'src/utils/date';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullName } from 'src/utils/userUtils';

import ProfilePicture from 'src/components/user/ProfilePicture';

import { type Goal, type GoalCycle } from '../../types';

import DetailRow from './DetailRow';
import FormulaDisplay from './FormulaDisplay';

export type ResponsibleProps = {
  goal: Goal;
  goalCycleTitle: GoalCycle['name'];
};

const Responsible = ({ goal, goalCycleTitle }: ResponsibleProps) => {
  const user = goal.goalOwners[0].ownerUser;
  const { user: loggedUser } = useAuth();
  const { t } = useLokaliseTranslation('goals');
  const theme = useTheme();

  const type = `${t(`${goal.type.toLowerCase()}`)}, ${t(`general:${goal.visibility.toLowerCase()}`)}`;

  const creationValue = loggedUser
    ? formatDistanceToNow(new Date(goal.createdAt), loggedUser, false)
    : formatDateFromISO(goal.createdAt);

  return (
    <Stack
      sx={{
        border: `1px solid ${theme.palette.new.border.neutral.default}`,
        borderRadius: '16px',
        backgroundColor: theme.palette.new.background.layout.tertiary,
        p: 3,
        gap: 0,
        width: '100%',
        maxWidth: '312px',
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 1.5,
          pb: 2,
        }}
      >
        <ProfilePicture
          id={user.id}
          user={user}
          sx={{
            fontSize: '20px',
            width: '40px',
            height: '40px',
            borderRadius: '50%',
          }}
        />
        <Stack>
          <Typography
            variant="globalXXS"
            color="new.text.neutral.lighter"
          >
            {t('responsible')}
          </Typography>
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            color="new.text.neutral.default"
          >
            {getFullName(user)}
          </Typography>
        </Stack>
      </Stack>
      <Divider />
      <DetailRow
        label={t('detail.creation')}
        value={creationValue}
      />
      <Divider />
      <DetailRow
        label={t('detail.start')}
        value={formatDateFromISO(goal.startDate)}
      />
      <Divider />
      <DetailRow
        label={t('detail.end')}
        value={formatDateFromISO(goal.endDate)}
      />
      <Divider />
      <DetailRow
        label={t('detail.type')}
        value={type}
      />
      <Divider />
      <DetailRow
        label={`${t('general:cycle')}:`}
        value={goalCycleTitle}
      />
      {goal.formulaChainId ? (
        <>
          <Divider />
          <FormulaDisplay formulaChainId={goal.formulaChainId} />
        </>
      ) : null}
    </Stack>
  );
};

export default Responsible;
