import { FC } from 'react';
import { useForm } from 'react-hook-form';
import { useMutation, useQuery } from 'react-query';
import { useNavigate, useParams } from 'react-router';

import useHuSnackbar from '@material-hu/components/design-system/Snackbar';

import useGeneralError from 'src/hooks/useGeneralError';
import {
  CreateKioskTerminalParams,
  editKioskTerminal,
  getKioskTerminal,
} from 'src/services/timeTrackingService';
import { getDirtyValues } from 'src/utils/formUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import {
  invalidateKioskTerminals,
  timeTrackingKeys,
  updateTerminalQueryData,
} from '../../queries';
import { timeTrackingRoutes } from '../../routes';
import KioskSettingsLayout from '../components/KioskSettingsLayout';
import {
  checkFaceRecognitionBlocking,
  INITIAL_VALUES,
  TerminalFields,
} from '../form';

const EditTerminal: FC = () => {
  const { t } = useLokaliseTranslation(['time_tracker', 'general']);
  const navigate = useNavigate();
  const terminalId = parseInt(useParams().id!);
  const { enqueueSnackbar } = useHuSnackbar();
  const showGeneralError = useGeneralError();

  const form = useForm<TerminalFields>({
    defaultValues: INITIAL_VALUES,
    mode: 'onSubmit',
  });
  const {
    formState: { dirtyFields },
  } = form;

  const { isFetching } = useQuery(
    timeTrackingKeys.kioskTerminal(terminalId),
    () => getKioskTerminal(terminalId),
    {
      select: response => response.data,
      onSuccess: response => {
        const {
          name,
          description,
          faceRecognitionBlocking,
          faceRecognitionEnabled,
          pinAuthenticationEnabled,
          siteId,
        } = response;
        form.reset({
          name,
          description,
          faceRecognitionBlocking: !faceRecognitionBlocking,
          authMethod: {
            faceRecognitionEnabled,
            pinAuthenticationEnabled,
          },
          siteId,
        });
      },
    },
  );

  const { mutate: editTerminalMutation, isLoading: isLoadingEdit } =
    useMutation(
      (params: Partial<CreateKioskTerminalParams>) =>
        editKioskTerminal(terminalId, params),
      {
        onSuccess: async response => {
          await invalidateKioskTerminals({
            refetchInactive: true,
            refetchActive: false,
          });
          updateTerminalQueryData(terminalId, response.data);
          enqueueSnackbar({
            title: t('kiosk.EDIT_SUCCESS'),
            description: t('kiosk.EDIT_SUCCESS_DESCRIPTION'),
            variant: 'success',
          });
          navigate(timeTrackingRoutes.kioskBase());
        },
        onError: err => {
          showGeneralError(
            err,
            t('kiosk.EDIT_ERROR'),
            t('kiosk.EDIT_ERROR_DESCRIPTION'),
          );
        },
      },
    );

  const submit = form.handleSubmit(values => {
    const {
      authMethod: { faceRecognitionEnabled, pinAuthenticationEnabled },
      faceRecognitionBlocking,
    } = values;

    const editParams = getDirtyValues(dirtyFields, values);
    // authMethod is a nested field, backend only accepts faceRecognitionEnabled and pinAuthenticationEnabled
    if (editParams.authMethod) {
      editParams.faceRecognitionEnabled = faceRecognitionEnabled;
      editParams.faceRecognitionBlocking = checkFaceRecognitionBlocking(
        faceRecognitionEnabled,
        faceRecognitionBlocking,
      );
      editParams.pinAuthenticationEnabled = pinAuthenticationEnabled;
      delete editParams.authMethod;
    }
    editTerminalMutation(editParams);
  });

  return (
    <KioskSettingsLayout
      form={form}
      isRunningMutation={isLoadingEdit}
      isFetchingInfo={isFetching}
      submit={submit}
      isEdit
    />
  );
};

export default EditTerminal;