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

import Stack from '@material-hu/mui/Stack';

import HuFormSelectionCard from '@material-hu/components/composed-components/SelectionCard/form';
import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import HuRadioButton from '@material-hu/components/design-system/RadioButton/RadioButton';

import { type Rules } from 'src/hooks/useRules';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CollapsibleSection from './CollapsibleSection';
import UsersLimitForm from './UsersLimitForm';

type Props = {
  requiredRules: { rules?: Rules; validate: Validate<any, any> };
};

export const PresencialLocationForm: FC<Props> = ({ requiredRules }) => {
  const { t } = useLokaliseTranslation('events');
  const { watch } = useFormContext();

  const { locationType } = watch();

  return (
    <CollapsibleSection>
      <HuFormSelectionCard
        name="locationType.presencial"
        isOnlyOption
        sx={{ width: '100%', p: 2 }}
      >
        <HuRadioButton
          stackSx={{ width: '100%' }}
          label={t('CREATE_EVENT_FORM.ORIGIN_IN_PERSON_LABEL')}
          description={t('CREATE_EVENT_FORM.WITH_LOCATION_DESCRIPTION')}
          isActive={locationType.presencial}
        />
      </HuFormSelectionCard>
      {locationType.presencial && (
        <Stack sx={{ p: 3 }}>
          <HuFormInputClassic
            inputProps={{
              label: t('CREATE_EVENT_FORM.LOCATION_LABEL'),
              placeholder: t('CREATE_EVENT_FORM.LOCATION_PLACEHOLDER'),
            }}
            name="location"
            rules={requiredRules}
          />
          <UsersLimitForm />
        </Stack>
      )}
    </CollapsibleSection>
  );
};

export default PresencialLocationForm;
