import { TxResponse } from 'components/common'
import { useFieldsActionMessages } from 'hooks/data'
import { useRouter } from 'next/router'
import { useTranslation } from 'react-i18next'
import useStore from 'store'

import styles from './EditResponse.module.scss'

interface Props {
  data?: ResultData
  isLoading: boolean
  activeVault: ActiveVault
}

export const EditResponse = (props: Props) => {
  const { t } = useTranslation()
  const router = useRouter()
  const getVaults = useStore((s) => s.getVaults)
  const { depositMessage, borrowMessage, swapMessage } = useFieldsActionMessages(props.data?.result)

  const actions = [
    ...(depositMessage ? [depositMessage] : []),
    ...(borrowMessage ? [borrowMessage] : []),
    ...(swapMessage ? [swapMessage] : []),
  ]

  return (
    <div className={styles.container}>
      <TxResponse
        error={props.data?.error}
        handleClose={() => router.replace('/farm')}
        onSuccess={() => {
          getVaults({ refetch: true })
        }}
        response={props.data?.result}
        title={t('fields.txMessages.edit')}
        actions={actions}
      />
    </div>
  )
}
