import { useForm, FormProvider } from 'react-hook-form';

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

import {
  KnowledgeLibraryArticle,
  UpdateEditorsValues,
} from 'src/types/library';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { logEvent, LogEvents } from 'src/utils/logging';

import useFormatEditorsOptions from '../hooks/useFormatEditorsOptions';
import useGetEditors from '../hooks/useGetEditors';
import useUpdateEditors from '../hooks/useUpdateEditors';
import CancelEditPermissionsModal from '../LibraryArticle/CancelEditPermissionsModal';
import EditPermissionsFormContent from '../LibraryArticle/EditPermissionsFormContent';
import { splitEditors } from '../utils';

export const useEditPermissionsDrawer = (library: KnowledgeLibraryArticle) => {
  const { t } = useLokaliseTranslation('general');

  const formatEditorsOptions = useFormatEditorsOptions();

  const form = useForm<UpdateEditorsValues>({
    defaultValues: {
      parentEditors: [],
      editors: [],
      search: '',
    },
  });

  const { handleSubmit, getValues, setValue, reset } = form;

  const editorsQuery = useGetEditors(library.id, {
    onSuccess: response => {
      const splitedEditors = splitEditors(response);
      setValue('editors', formatEditorsOptions(splitedEditors.childEditors));
      setValue(
        'parentEditors',
        formatEditorsOptions(splitedEditors.parentEditors),
      );
    },
  });

  const editorsMutation = useUpdateEditors(library.id);

  const { modal: cancelModal, showModal: showCancelModal } = useModal(
    CancelEditPermissionsModal,
    { maxWidth: 'sm', fullWidth: true },
  );

  const formDisabled = editorsMutation.isLoading;

  const closeDrawer = () => {
    closeEditDrawer();

    const splitedEditors = splitEditors(editorsQuery.data);

    reset({
      parentEditors: formatEditorsOptions(splitedEditors.parentEditors),
      editors: formatEditorsOptions(splitedEditors.childEditors),
      search: '',
    });
  };

  const haveEditorsChanged = () => {
    const { editors, parentEditors } = getValues();
    const allEditors = [...editors, ...parentEditors];

    if (allEditors.length !== editorsQuery.data?.length) return true;
    return allEditors.some(
      editor => !editorsQuery.data?.some(e => e.id === editor.id),
    );
  };

  const handleClose = () => {
    if (!haveEditorsChanged()) return closeDrawer();
    showCancelModal({ onConfirm: closeDrawer });
  };

  const submit = handleSubmit(values => {
    editorsMutation.mutate(values, {
      onSuccess: () => {
        logEvent(LogEvents.LIBRARY_EDIT_PERMISSIONS_GIVE, {
          libraryId: library.id,
          parentId: library.parentId,
          title: library.title,
        });
        closeDrawer();
      },
    });
  });

  const {
    drawer: editDrawer,
    showDrawer: showEditDrawer,
    closeDrawer: closeEditDrawer,
  } = useDrawerV2(args => ({
    ...args,
    component: 'form',
    onSubmit: submit,
    onClose: handleClose,
    title: t('permissions.edit.label'),
    primaryButtonProps: {
      children: t('save'),
      type: 'submit',
      disabled: formDisabled,
      loading: editorsMutation.isLoading,
    },
    secondaryButtonProps: {
      children: t('exit'),
      onClick: handleClose,
      disabled: formDisabled,
    },
    children: (
      <EditPermissionsFormContent
        library={library}
        disabled={formDisabled}
        isLoadingEditors={editorsQuery.isFetching}
      />
    ),
  }));

  return {
    editPermissionsDrawer: (
      <FormProvider {...form}>
        {editDrawer}
        {cancelModal}
      </FormProvider>
    ),
    showEditPermissionsDrawer: showEditDrawer,
  };
};

export default useEditPermissionsDrawer;