import { Contract } from '@ethersproject/contracts'
import { useContext } from 'react'
import { useQueryClient } from 'react-query'
import { StepContext } from '../../contexts'
import { showToastError } from '../../utils'
import { ContractMethodName } from '../contracts/types'
import { useMutationContract } from '../contracts/useMutationContract'
import { DefaultNFTVariables } from './types'

export function useNFTMutation<
  TVariables extends DefaultNFTVariables = DefaultNFTVariables,
  T extends Contract = Contract,
  N extends ContractMethodName<T> = ContractMethodName<T>,
>({
  contract,
  methodName,
  syncNFTFunc,
  getDetailKey,
}: {
  contract: T
  methodName: N
  syncNFTFunc?: (id) => void
  getDetailKey: (id) => string[] | string
}) {
  const queryClient = useQueryClient()
  const { setStep } = useContext(StepContext)

  const mutation = useMutationContract<TVariables>(
    {
      contract,
      methodName: methodName,
      callback: async ({ variables }) => {
        const { contractParams } = variables
        const { id } = contractParams
        await syncNFTFunc(id)
      },
    },
    {
      onMutate: (data) => {},
      onSuccess: async (data, variables) => {
        setStep(2)
      },
      onError(error, variables, context) {
        const { status } = error
        if (status === 999) {
          setStep(2)
        }
        showToastError(error)
      },
      onSettled(data, error, variables, context) {
        const {
          contractParams: { id },
          otherParams: { queryKeyRefetch = null } = {},
        } = variables
        const key = queryKeyRefetch || getDetailKey(id)
        queryClient.invalidateQueries(key)
      },
    },
  )

  return mutation
}