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

import { useDrawer } from '@material-hu/hooks/useDrawer';
import Typography from '@material-hu/mui/Typography';

import HuFormRadioButtonGroup from '@material-hu/components/composed-components/RadioButtonGroup/form';
import { DrawerProps } from '@material-hu/components/design-system/Drawer/types';

import {
  capabilityToi18nKey,
  useCustomServerTranslation,
} from 'src/hooks/useCustomServerTranslation';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { UserPermissions } from 'src/utils/permissions';

const POST_APPROVAL_FORM_NAME = `capabilities.${UserPermissions.REQUEST_FEED_POST_APPROVAL}`;

type FeedSettingsDrawerProps = DrawerProps & {
  onClose: () => void;
  handleSave: () => void;
};

const FeedSettingsDrawer = (props: FeedSettingsDrawerProps) => {
  const { open, onClose, handleSave } = props;
  const { t } = useLokaliseTranslation('apps');
  const HuGoThemeProvider = useHuGoTheme();
  const form = useFormContext();
  const formState = form.formState;
  const isDirty = formState.isDirty;

  const handleSaveAndClose = () => {
    handleSave();
    handleClose();
  };

  const handleClose = () => {
    closeDrawer();
    onClose();
  };

  const getCustomTitle = useCustomServerTranslation();

  const { drawer, closeDrawer } = useDrawer(FeedSettingsBody, {
    open: open,
    onClose: handleClose,
    title: getCustomTitle(
      capabilityToi18nKey(UserPermissions.VIEW_POSTS),
      'TITLE_' + UserPermissions.VIEW_POSTS,
    ),
    primaryButtonProps: {
      children: t('SAVE'),
      onClick: handleSaveAndClose,
      disabled: !isDirty,
    },
    secondaryButtonProps: {
      children: t('CANCEL'),
      onClick: handleClose,
    },
  });

  return <HuGoThemeProvider>{drawer}</HuGoThemeProvider>;
};

export enum PostApprovalOptions {
  YES = 'YES',
  NO = 'NO',
}

const FeedSettingsBody = () => {
  const { t } = useLokaliseTranslation('apps');
  const postApprovalOptions = [
    {
      value: true,
      label: t(`GENERAL:${PostApprovalOptions.YES}`),
      helperText: t('POST_APPROVAL_INFO', { context: PostApprovalOptions.YES }),
    },
    {
      value: false,
      label: t(`GENERAL:${PostApprovalOptions.NO}`),
      helperText: t('POST_APPROVAL_INFO', { context: PostApprovalOptions.NO }),
    },
  ];

  const form = useFormContext();

  return (
    <>
      <Typography
        variant="h6"
        sx={{ mb: 3 }}
      >
        {t('POST_APPROVAL_TITLE')}
      </Typography>
      <Controller
        name={POST_APPROVAL_FORM_NAME}
        control={form.control}
        render={({ field }) => (
          <HuFormRadioButtonGroup
            {...field}
            value={String(field.value)}
            onChange={event => field.onChange(event.target.value === 'true')}
            options={postApprovalOptions}
            sx={{ gap: 2 }}
          />
        )}
      />
    </>
  );
};

export default FeedSettingsDrawer;