import { useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { ErrorMessage, Form, Formik } from "formik";
import { RequiredField, YupObject } from "@/Utils/ValidationSchema";
import ValidationMsg from "@/Utils/ValidationSchema/ValidationMsg";
import usePost from "@/Utils/Hooks/usePost";
import { AdminPaymentAPI, AdminPaymentChangeStatusAPI, CommonUploadAPI, DisputeAPI } from "@/Utils/APIRequest/Endpoints";
import { CustomToast } from "@/Utils/CustomToast";
import { RiDeleteBin2Line, RiUpload2Fill, RiUploadCloud2Line } from "react-icons/ri";
import Modal from "@/Component/Common/Modal";
import FormLabel from "@/Component/Common/Forms/FormLabel";
import FormikSelect from "@/Component/Common/Forms/FormikSelect";
import FormikTextarea from "@/Component/Common/Forms/FormikTextarea";
import { LoaderSVG } from "@/Component/Common/SVGs/CommonSVG";
import BorderButton from "@/Component/Common/Forms/BorderButton";
import GradientButton from "@/Component/Common/Forms/GradientButton";
import FormikInput from "@/Component/Common/Forms/FormikInput";

const AdminPaymentFailedModal = (props) => {
    const { modal, setModal, refetch } = props;

    // Post  API
    const { isPending, mutate } = usePost(`${AdminPaymentChangeStatusAPI}/${modal?.id}`, null, (response) => {
        if (response?.status == 200 || response?.status == 201) {
            refetch();
            setModal(null);
        }
    }, 'patch');

    return (
        <Modal modalSize="md:w-2/4 xl:w-1/3 2xl:w-1/4" modal={modal} setModal={setModal} childMainClass="max-h-[90vh] overflow-y-auto">
            <h3 className="text-2xl font-semibold mb-5">Payment to {modal?.influencer?.first_name} {modal?.influencer?.last_name}</h3>
            <Formik
                enableReinitialize
                initialValues={{
                    comment: "",
                    payment_status: 'pending'
                }}
                validationSchema={YupObject({
                    // comment: RequiredField('Comment is required'),
                })}
                onSubmit={(values: any) => {
                    mutate(values);
                }}
            >
                {({ values, setFieldValue, errors }) => {
                    return (
                        <Form className="grid grid-cols-12 md:gap-y-5 gap-y-3 gap-x-3">
                            <div className="flex flex-col col-span-12">
                                <FormLabel title="Comment" />
                                <FormikTextarea textareaProps={{ type: "text", name: "comment", autoComplete: "new-email", placeholder: "Enter comment", rows: 3 }} />
                            </div>
                            <div className="flex items-center justify-end gap-3.5 col-span-12">
                                <BorderButton buttonType="button" title="Cancel" onClick={() => setModal(false)} />
                                <GradientButton buttonType="submit" customClass="flex items-center justify-center gap-1.5" disabled={isPending} >
                                    Submit
                                    {isPending && <LoaderSVG />}
                                </GradientButton>
                            </div>
                        </Form>
                    );

                }}
            </Formik>
        </Modal>
    )
}

export default AdminPaymentFailedModal