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

type Props = {
    id: string
}

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

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

    const handleRejectTransfer = (text?: string) => {
        if (text && text.length > 0) {
            rejectTransfer.mutate({ id: props.id, comment: text }, {
                onSuccess: () => {
                    toast(t('success'), 'success')
                    setOpenConfrimModal(false)
                    window.location.reload()
                },
                onError(error: ErrorType) {
                    toast(error?.response?.data?.error?.message[0], 'error')
                },
            })
        } else {
            toast(t('payment.reject_comment_error'), 'error')
        }
    }

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

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

export default Reject