import { useFormContext, useWatch } from 'react-hook-form';

import {
  IconBuildingSkyscraper,
  IconDeviceDesktop,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import SelectionCard from '@material-hu/components/composed-components/SelectionCard';
import Avatar from '@material-hu/components/design-system/Avatar';
import Title from '@material-hu/components/design-system/Title';

import { LearningCard } from 'src/pages/dashboard/Learning/common/components/LearningCard';
import { SessionModes } from 'src/pages/dashboard/Learning/Sessions/constants';
import { newSessionFields } from 'src/pages/dashboard/Learning/Sessions/New/form';
import {
  type NewSessionFormValues,
  type SessionModeType,
} from 'src/pages/dashboard/Learning/Sessions/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useSessionStatus } from '../../../hooks/useSessionStatus';

export type SessionTypeProps = {
  onChange?: () => void;
};

const SessionType = ({ onChange }: SessionTypeProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { blockSessionEdition } = useSessionStatus();
  const { control, setValue } = useFormContext<NewSessionFormValues>();

  const typeValue = useWatch({
    control,
    name: newSessionFields.configuration.type(),
  });

  const handleChangeType = (newValue: SessionModeType) => {
    onChange?.();
    setValue(newSessionFields.configuration.type(), newValue);
  };

  const options = [
    {
      Icon: IconBuildingSkyscraper,
      color: 'highlight' as const,
      value: SessionModes.presential,
      label: t('session.type.presential_one'),
      description: t('session.type.presential_description'),
    },
    {
      Icon: IconDeviceDesktop,
      color: 'success' as const,
      value: SessionModes.virtual,
      label: t('session.type.virtual_one'),
      description: t('session.type.virtual_description'),
    },
  ];

  return (
    <LearningCard id="session-configuration-type-card">
      <Title
        variant="S"
        title={t('session.type.select')}
      />
      <Stack sx={{ flexDirection: 'row', gap: 2, width: '100%' }}>
        {options.map(({ Icon, color, value, label, description }) => (
          <SelectionCard
            key={value}
            disabled={blockSessionEdition}
            sx={{
              flex: 1,
              '& .MuiCardContent-root': {
                gap: 1.5,
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
              },
            }}
            checked={typeValue === value}
            onClick={() => handleChangeType(value)}
          >
            <Avatar
              Icon={Icon}
              color={color}
              variant="square"
            />
            <Title
              variant="M"
              title={label}
              description={description}
              centered
            />
          </SelectionCard>
        ))}
      </Stack>
    </LearningCard>
  );
};

export default SessionType;
