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

import HTMLBody from '@material-hu/components/composed-components/HTMLBody';
import Button from '@material-hu/components/design-system/Buttons/Button';
import { Title } from '@material-hu/components/design-system/Title';

import { LiveDot } from 'src/pages/dashboard/learning/sessions/Detail/components/LiveDot';
import { type SessionDetail } from 'src/pages/dashboard/learning/sessions/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

const InProgressState = ({ session }: { session: SessionDetail }) => {
  const { t } = useLokaliseTranslation('learning');
  const { palette } = useTheme();
  const titleText = palette.new.text.neutral.inverted;

  const handleJoinSession = () => {
    if (!session.meetingLink) return;
    window.open(session.meetingLink, '_blank', 'noopener,noreferrer');
  };

  if (session.type !== 'PRESENTIAL') {
    return (
      <Stack sx={{ gap: 2, my: 1 }}>
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 1,
          }}
        >
          <LiveDot sx={{ alignSelf: 'start', ml: '-33px' }} />
          <Title
            centered
            title={t('session.status.live')}
            description={t('session.attendance.join_session')}
            sx={{ '& span': { color: titleText } }}
          />
        </Stack>
        <Button
          variant="secondary"
          onClick={handleJoinSession}
        >
          {t('session.attendance.join_session_action')}
        </Button>
      </Stack>
    );
  }

  if (session.type === 'PRESENTIAL') {
    if (session.meetingLink) {
      return (
        <Stack sx={{ gap: 2 }}>
          <Title
            centered
            title={t('session.status.started')}
            description={
              <HTMLBody
                body={`
                ${t('session.attendance.remember_that_it_is_presential_in', { address: '' })} 
                <br /> ${session.address}.
                <br /><br /> 
                ${t('session.attendance.remember_that_it_is_presential_in_description')}`}
              />
            }
            sx={{ '& span': { color: titleText } }}
          />
          <Button
            variant="secondary"
            onClick={handleJoinSession}
            fullWidth
          >
            {t('session.attendance.join_session_action')}
          </Button>
        </Stack>
      );
    }

    return (
      <Title
        centered
        title={t('session.status.started')}
        description={
          <HTMLBody
            body={`${t('session.attendance.remember_that_it_is_presential_in', { address: '' })} <br /> ${session.address}`}
          />
        }
        sx={{ '& span': { color: titleText } }}
      />
    );
  }

  return null;
};

export default InProgressState;
