import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../../components/Button'
import { useApproveTransfer } from '../hooks/usePaymentData'
import ModalConfrim from '../../../components/ModalConfrim'
import { toast } from 'react-toastify'
import { ErrorType } from '../../../helpers/types'

type Props = {
    id: string
}

const Accept: FC<Props> = (props: Props) => {

    const { t } = useTranslation('global')
    const [openConfrimModal, setOpenConfrimModal] = useState<boolean>(false)
    const approveTransfer = useApproveTransfer()

    const handleApproveTransfer = () => {
        approveTransfer.mutate(props.id, {
            onSuccess: () => {
                toast.success(t('success'))
                setOpenConfrimModal(false)
                window.location.reload()
            },
            onError(error: ErrorType) {
                toast.error(error?.response?.data?.error?.message[0])
            },
        })
    }

    return (
        <div>
            <Button
                label={t('payment.aceept')}
                className='px-4 bg-green-50 text-green-500 font-semibold'
                onClick={() => setOpenConfrimModal(true)}
            />

            <ModalConfrim
                isOpen={openConfrimModal}
                close={() => setOpenConfrimModal(false)}
                onConfrim={handleApproveTransfer}
                isLoading={approveTransfer.isPending}
                label={t('payment.accept_confrim')}
            />
        </div>
    )
}

export default Accept