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

import Button from '@material-hu/components/design-system/Buttons/Button';
import Pills from '@material-hu/components/design-system/Pills';

import { useConfirmAttendance } from 'src/pages/dashboard/learning/sessions/hooks/useConfirmAttendance';
import { type SessionDetail } from 'src/pages/dashboard/learning/sessions/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

const PublishedState = ({ session }: { session: SessionDetail }) => {
  const { palette } = useTheme();
  const { t } = useLokaliseTranslation('learning');

  const { mutate: confirmAttendance, isLoading: isConfirmingAttendance } =
    useConfirmAttendance(session.learningSessionId);

  const handleConfirmAttendance = () => {
    confirmAttendance({
      learningSessionId: session.learningSessionId,
      assisted: !session.confirmedAssistance,
    });
  };

  return (
    <Stack sx={{ gap: 1.5 }}>
      <Typography
        variant="globalXS"
        fontWeight="fontWeightSemiBold"
        color={palette.new.text.neutral.lighter}
      >
        {t('session.attendance.confirm_your_attendance')}
      </Typography>
      <Typography>
        {t('session.attendance.confirm_attendance_description')}
      </Typography>
      {session.confirmedAssistance ? (
        <Pills
          label={t('session.attendance.confirmed')}
          type="success"
          sx={{ width: '100%', mt: 0.5 }}
        />
      ) : (
        <Button
          color="primary"
          variant="contained"
          loading={isConfirmingAttendance}
          disabled={isConfirmingAttendance}
          onClick={handleConfirmAttendance}
        >
          {t('session.attendance.confirm_attendance_action')}
        </Button>
      )}
    </Stack>
  );
};

export default PublishedState;
