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

import Divider from '@material-hu/mui/Divider';
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 HuFormSwitcher from '@material-hu/components/design-system/Switcher/form';

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

import CollapsibleSection from './CollapsibleSection';

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

export const RemoteLocationForm: FC<Props> = ({ requiredRules }) => {
  const { t } = useLokaliseTranslation('events');
  const { watch } = useFormContext();
  const urlRules = useRules({
    requiredWithMessage: true,
    url: true,
  });

  const { locationType, hasLocation } = watch();

  return (
    <CollapsibleSection>
      <HuFormSelectionCard
        name="locationType.videocall"
        isOnlyOption
        sx={{ width: '100%', p: 2 }}
      >
        <HuRadioButton
          label={t('CREATE_EVENT_FORM.ORIGIN_ONLINE_LABEL')}
          description={t('CREATE_EVENT_FORM.ORIGIN_ONLINE_DESCRIPTION')}
          isActive={locationType.videocall}
        />
      </HuFormSelectionCard>
      {locationType.videocall && (
        <Stack sx={{ p: 3 }}>
          <HuFormInputClassic
            inputProps={{
              label: t('CREATE_EVENT_FORM.VIDEO_CALL_LABEL'),
              placeholder: t('CREATE_EVENT_FORM.VIDEO_CALL_PLACEHOLDER'),
            }}
            name="videoCallUrl"
            rules={urlRules}
          />
          <Divider sx={{ my: 2 }} />
          <HuFormSwitcher
            name="hasLocation"
            switcherProps={{
              description: t('CREATE_EVENT_FORM.WITH_LOCATION_DESCRIPTION'),
              title: t('CREATE_EVENT_FORM.WITH_LOCATION_TITLE'),
            }}
          />
          {hasLocation && (
            <HuFormInputClassic
              inputProps={{
                label: t('CREATE_EVENT_FORM.LOCATION_LABEL'),
                placeholder: t('CREATE_EVENT_FORM.LOCATION_PLACEHOLDER'),
                sx: { mt: 3 },
              }}
              name="location"
              rules={requiredRules}
            />
          )}
        </Stack>
      )}
    </CollapsibleSection>
  );
};