import React from 'react';
import { useIntl, defineMessages, FormattedMessage } from 'react-intl';

import { updateConfig } from 'soapbox/actions/admin';
import { RadioGroup, RadioItem } from 'soapbox/components/radio';
import { useAppDispatch, useInstance } from 'soapbox/hooks';
import toast from 'soapbox/toast';

import type { Instance } from 'soapbox/types/entities';

type RegistrationMode = 'open' | 'approval' | 'closed';

const messages = defineMessages({
  saved: { id: 'admin.dashboard.settings_saved', defaultMessage: 'Settings saved!' },
});

const generateConfig = (mode: RegistrationMode) => {
  const configMap = {
    open: [{ tuple: [':registrations_open', true] }, { tuple: [':account_approval_required', false] }],
    approval: [{ tuple: [':registrations_open', true] }, { tuple: [':account_approval_required', true] }],
    closed: [{ tuple: [':registrations_open', false] }],
  };

  return [{
    group: ':pleroma',
    key: ':instance',
    value: configMap[mode],
  }];
};

const modeFromInstance = (instance: Instance): RegistrationMode => {
  if (instance.approval_required && instance.registrations) return 'approval';
  return instance.registrations ? 'open' : 'closed';
};

/** Allows changing the registration mode of the instance, eg "open", "closed", "approval" */
const RegistrationModePicker: React.FC = () => {
  const intl = useIntl();
  const dispatch = useAppDispatch();
  const instance = useInstance();

  const mode = modeFromInstance(instance);

  const onChange: React.ChangeEventHandler<HTMLInputElement> = e => {
    const config = generateConfig(e.target.value as RegistrationMode);
    dispatch(updateConfig(config)).then(() => {
      toast.success(intl.formatMessage(messages.saved));
    }).catch(() => {});
  };

  return (
    <RadioGroup onChange={onChange}>
      <RadioItem
        label={<FormattedMessage id='admin.dashboard.registration_mode.open_label' defaultMessage='Open' />}
        hint={<FormattedMessage id='admin.dashboard.registration_mode.open_hint' defaultMessage='Anyone can join.' />}
        checked={mode === 'open'}
        value='open'
      />
      <RadioItem
        label={<FormattedMessage id='admin.dashboard.registration_mode.approval_label' defaultMessage='Approval Required' />}
        hint={<FormattedMessage id='admin.dashboard.registration_mode.approval_hint' defaultMessage='Users can sign up, but their account only gets activated when an admin approves it.' />}
        checked={mode === 'approval'}
        value='approval'
      />
      <RadioItem
        label={<FormattedMessage id='admin.dashboard.registration_mode.closed_label' defaultMessage='Closed' />}
        hint={<FormattedMessage id='admin.dashboard.registration_mode.closed_hint' defaultMessage='Nobody can sign up. You can still invite people.' />}
        checked={mode === 'closed'}
        value='closed'
      />
    </RadioGroup>
  );
};

export default RegistrationModePicker;