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

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

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

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

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

const GroupsSettingsDrawer = (props: GroupsSettingsDrawerProps) => {
  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(GroupsSettingsBody, {
    open: open,
    onClose: handleClose,
    title: getCustomTitle(
      capabilityToi18nKey(UserPermissions.VIEW_GROUPS),
      'TITLE_' + UserPermissions.VIEW_GROUPS,
    ),
    primaryButtonProps: {
      children: t('SAVE'),
      onClick: handleSaveAndClose,
      disabled: !isDirty,
    },
    secondaryButtonProps: {
      children: t('CANCEL'),
      onClick: handleClose,
    },
  });

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

const GroupsSettingsBody = () => {
  const { t } = useLokaliseTranslation('permissions');
  const form = useFormContext();

  return (
    <Controller
      name={`capabilities.${UserPermissions.VIEW_MULTICOMPANY_GROUPS}`}
      control={form.control}
      render={({ field }) => (
        <Switcher
          {...field}
          title={t('MULTI_COMPANY_GROUPS.TITLE')}
          description={t('MULTI_COMPANY_GROUPS.DESCRIPTION')}
        />
      )}
    />
  );
};

export default GroupsSettingsDrawer;