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

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

import HuAlert from '@material-hu/components/design-system/Alert';
import HuTitle from '@material-hu/components/design-system/Title';

import { Event } from 'src/types/events';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CreateVisibility from './CreateVisibility';
import EditVisibility from './EditVisibility';

type Props = {
  hasError?: boolean;
  event?: Event;
};

export const VisibilityStep: FC<Props> = ({ hasError, event }) => {
  const { t } = useLokaliseTranslation('events');
  const { watch } = useFormContext();
  const { visibility } = watch();
  const eventId = event?.id;

  return (
    <Stack>
      <HuTitle
        title={t('CREATE_EVENT_FORM.PRIVACY_LABEL')}
        variant="M"
      />
      {eventId && (
        <EditVisibility
          event={event}
          visibility={visibility}
        />
      )}
      {!eventId && <CreateVisibility visibility={visibility} />}

      {hasError && (
        <HuAlert
          severity="error"
          title={t('ERROR_OCURRED')}
          sx={{ mt: 2 }}
        />
      )}
    </Stack>
  );
};

export default VisibilityStep;