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

import Grid from '@material-hu/mui/Grid';
import Typography from '@material-hu/mui/Typography';

import { COMPANY_SIZE } from 'src/constants/community';
import { OptionsCard } from 'src/pages/newCommunity/components/OptionsCard';
import { useLokaliseTranslation } from 'src/utils/i18n';

export const FormCompanySize: FC = () => {
  const { t } = useLokaliseTranslation('authentication');

  const {
    control,
    watch,
    formState: { errors },
  } = useFormContext();
  const companyDimension = watch('companySize');

  return (
    <>
      <Controller
        control={control}
        name="companySize"
        rules={{ required: true }}
        render={({ field: { onChange } }) => (
          <Grid container>
            <Grid
              item
              xs={6}
              container
              direction="column"
              sx={{ display: 'flex', alignItems: 'start' }}
            >
              {COMPANY_SIZE.filter((item, index) => index < 3).map(
                (item, index) => (
                  <OptionsCard
                    key={index}
                    className={companyDimension === item ? 'active' : undefined}
                    onClick={() => onChange(item)}
                    sx={{ whiteSpace: 'noWrap' }}
                  >
                    <Typography>{item}</Typography>
                  </OptionsCard>
                ),
              )}
            </Grid>
            <Grid
              item
              xs={6}
              container
              direction="column"
              sx={{ display: 'flex', alignItems: 'end' }}
            >
              {COMPANY_SIZE.filter((item, index) => index > 2).map(
                (item, index) => (
                  <OptionsCard
                    key={index}
                    className={companyDimension === item ? 'active' : undefined}
                    onClick={() => onChange(item)}
                    sx={{ whiteSpace: 'noWrap' }}
                  >
                    <Typography>{item}</Typography>
                  </OptionsCard>
                ),
              )}
            </Grid>
          </Grid>
        )}
      />
      {errors?.companySize && (
        <Typography sx={{ color: 'red', mt: 1, ml: 1 }}>
          {t('MANDATORY_FIELD')}
        </Typography>
      )}
    </>
  );
};

export default FormCompanySize;