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

import {
  IconAlignCenter,
  IconAlignLeft,
  IconAlignRight,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import CardContainer from '@material-hu/components/design-system/CardContainer';

import { certificateCreateFields } from 'src/pages/dashboard/Learning/Settings/Certificates/Create/form';
import {
  type AlignmentOption,
  type CertificateCreateFormValues,
} from 'src/pages/dashboard/Learning/Settings/Certificates/Create/types';
import { CertificateAlignment } from 'src/pages/dashboard/Learning/Settings/Certificates/constants';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CertificateAlignmentOptionCard from './CertificateAlignmentOptionCard';

const CertificateAlignmentSection = () => {
  const { t } = useLokaliseTranslation('learning');
  const { palette } = useTheme();
  const { control } = useFormContext<CertificateCreateFormValues>();

  const { field } = useController({
    name: certificateCreateFields.alignment(),
    control,
  });

  const alignmentOptions: AlignmentOption[] = [
    {
      value: CertificateAlignment.LEFT,
      Icon: IconAlignLeft,
      label: t('general:left'),
    },
    {
      value: CertificateAlignment.CENTER,
      Icon: IconAlignCenter,
      label: t('general:center'),
    },
    {
      value: CertificateAlignment.RIGHT,
      Icon: IconAlignRight,
      label: t('general:right'),
    },
  ];

  return (
    <CardContainer
      fullWidth
      sx={{
        '& .MuiCardContent-root': {
          display: 'flex',
          flexDirection: 'column',
          gap: 2,
          width: '100%',
        },
      }}
    >
      <Typography
        variant="globalS"
        sx={{
          fontWeight: 'fontWeightSemiBold',
          color: palette.new.text.neutral.lighter,
        }}
      >
        {t('settings.certificates.create_flow.align_content')}
      </Typography>
      <Stack sx={{ flexDirection: 'row', gap: 1 }}>
        {alignmentOptions.map(option => (
          <CertificateAlignmentOptionCard
            key={option.value}
            option={option}
            checked={field.value === option.value}
            onClick={() => field.onChange(option.value)}
          />
        ))}
      </Stack>
    </CardContainer>
  );
};

export default CertificateAlignmentSection;
