import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { AxiosRequestConfig } from 'axios'
import { fetchCustomPopup, putCustomPopup } from '../API'
import { ICustomPopup } from '../models/customPopup.model'
import { queryKeys } from './query-keys'

export const useCustomPopup = () => {
  const queryClient = useQueryClient()

  const customPopup = useQuery({
    queryKey: [queryKeys.customPopup],
    queryFn: fetchCustomPopup,
  })

  const mutation = useMutation<
    void,
    unknown,
    { customPopup: ICustomPopup; axiosHeaders: AxiosRequestConfig }
  >({
    mutationFn: ({ customPopup, axiosHeaders }) =>
      putCustomPopup(customPopup, axiosHeaders),
    onSuccess: () =>
      queryClient.invalidateQueries({ queryKey: [queryKeys.customPopup] }),
  })

  const saveCustomPopup = (
    customPopup: ICustomPopup,
    axiosHeaders: AxiosRequestConfig
  ) => {
    mutation.mutate({ customPopup, axiosHeaders })
  }

  return { customPopup, saveCustomPopup }
}