import { useNavigate } from 'react-router';

import Stack from '@material-hu/mui/Stack';
import { appearFromBottom } from '@material-hu/utils/animations';

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

import DefaultSessionImg from 'src/assets/images/defaultSession.webp';
import { getTimeZoneInfo } from 'src/utils/date';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { sessionsRoutes } from '../../routes';
import { type Session } from '../../types';
import { getPillStatus } from '../../utils';

import SessionCardActions from './SessionCardActions';

type SessionCardProps = {
  session: Session;
  index: number;
};

export const SessionCard = ({ session, index }: SessionCardProps) => {
  const { t } = useLokaliseTranslation('learning');
  const navigate = useNavigate();

  const handleNavigateToSessionDetail = () => {
    navigate(sessionsRoutes.detail(session.learningSessionId), {
      state: {
        backRoute: `${location.pathname}${location.search}`,
        fromList: true,
      },
    });
  };

  const sessionTime = t('general:time_range', {
    start: session.startTime,
    end: session.endTime,
  });
  const sessionDate = `${session.localDate} • ${sessionTime} - ${getTimeZoneInfo(session.timeZone)}`;

  const pill = getPillStatus(session, t);

  return (
    <CardContainer
      sx={{
        width: '100%',
        animation: `${appearFromBottom} 125ms ${index * 0.025}s ease-in-out backwards`,
      }}
      onClick={handleNavigateToSessionDetail}
      slotProps={{
        actionArea: {
          disableRipple: true,
        },
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 1,
        }}
      >
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', mr: 'auto' }}>
          <Image
            aspectRatio="1/1"
            src={session.pictureUrl}
            defaultSrc={DefaultSessionImg}
            sx={{ maxWidth: 64, borderRadius: 1 }}
          />
          <Title
            copetin={`${t(`session.type.${session.type}_one`)} - ${session.isObligatory ? t('path.required.title') : t('general:optional')}`}
            title={session.title}
            description={sessionDate}
            variant="M"
            sx={{ ml: 1.5 }}
          />
        </Stack>
        <Pills
          label={pill.label}
          type={pill.type}
          hasIcon={pill.hasIcon ?? false}
        />
        <SessionCardActions session={session} />
      </Stack>
    </CardContainer>
  );
};
