import React, {useRef} from 'react';
import {useTranslation} from 'react-i18next';
import {useMutation, useQueryClient} from '@tanstack/react-query';
import {ApiErrors, HumandAPIError} from '@config/api';
import {useQuery} from '@hooks/queries-v5/useQuery';
import {Navigation} from '@interfaces/navigation';
import ServiceManagementCatalogItemCover from '@modules/serviceManagement/components/ServiceManagementCatalogItemCover';
import {serviceManagementQueryKeys} from '@modules/serviceManagement/constants';
import {updateTaskQueries} from '@modules/serviceManagement/utils';
import {createTask, getCatalogItem} from '@modules/serviceManagement/services';
import {ServiceManagementErrorMessage} from '@modules/serviceManagement/components/ServiceManagementErrorMessage';
import {showSnackbar} from '@redux/dispatchers';
import {AMPLITUDE_EVENTS, Screens} from '@shared/constants';
import {logAmplitudeEvent} from '@shared/utils';
import {
  DynamicFormResponse,
  FormContainer,
  FormContainerRef,
} from '@shared/dynamicForms';

import {styles} from './styles';

function ServicePortalTaskForm({
  navigation,
  route: {
    params: {catalogItemId},
  },
}: Navigation<Screens.SERVICE_PORTAL_TASK_FORM>) {
  const queryClient = useQueryClient();
  const {t} = useTranslation();
  const formContainerRef = useRef<FormContainerRef>(null);

  const {
    data: catalogItem,
    isLoading: isLoadingCatalogItem,
    isError,
    error: catalogItemError,
  } = useQuery(
    serviceManagementQueryKeys.catalogItemDetail(catalogItemId),
    () => getCatalogItem({id: catalogItemId}),
    {
      onSuccess: ({formProgressionToken, formTag, name}) => {
        navigation.setOptions({headerTitle: name});
        formContainerRef.current?.initDynamicForm({
          formProgressionToken,
          formTag,
        });
      },
      onError: (error: HumandAPIError) => {
        error.code !== ApiErrors.PERMISSION_DENIED &&
          showSnackbar({
            title: t('errors.error'),
            variant: 'error',
          });
      },
    },
  );

  const {mutate: createTaskMutate, isPending: isCreatingTask} = useMutation({
    mutationFn: createTask,
    onSuccess: task => {
      formContainerRef.current?.setIsFrozen(false);
      updateTaskQueries(queryClient, task);
      logAmplitudeEvent(AMPLITUDE_EVENTS.SERVICE_MGMT_REQUEST_COMPLETED, {
        serviceId: task.catalogItem.id,
        serviceName: task.catalogItem.name,
        categoryId: task.catalogItem.category?.id,
        categoryName: task.catalogItem.category?.name,
      });
      navigation.replace(Screens.SERVICE_PORTAL_TASK_SUCCESS, {
        id: task.id,
      });
    },
    retry: 1,
  });

  const onSuccess = (formAnswerId: DynamicFormResponse['formAnswerId']) => {
    createTaskMutate({
      catalogItemId,
      formAnswerId: formAnswerId,
    });
  };

  return isError &&
    (catalogItemError as Nullable<HumandAPIError>)?.code ===
      ApiErrors.PERMISSION_DENIED ? (
    <ServiceManagementErrorMessage
      title={t('service_management.unauthorized_service_catalog_title')}
      body={t('service_management.unauthorized_service_catalog_description')}
    />
  ) : (
    <FormContainer
      ref={formContainerRef}
      description={catalogItem?.description}
      richDescription={catalogItem?.richDescription}
      cover={
        !!catalogItem && (
          <ServiceManagementCatalogItemCover
            catalogItem={catalogItem}
            style={styles.cover}
          />
        )
      }
      onSuccess={onSuccess}
      isLoading={isCreatingTask || isLoadingCatalogItem}
      overrideTitle={false}
    />
  );
}

export default ServicePortalTaskForm;