import { ErrorMessage, Form, Formik } from "formik";
import Modal from '@/Component/Common/Modal';
import { CampaignContactNowAPI } from '@/Utils/APIRequest/Endpoints';
import usePost from '@/Utils/Hooks/usePost';
import { RequiredField, YupObject } from "@/Utils/ValidationSchema";
import { LoaderSVG } from "@/Component/Common/SVGs/CommonSVG";
import PrimaryButton from "@/Component/Common/Forms/PrimaryButton";
import BorderButton from "@/Component/Common/Forms/BorderButton";
import FormLabel from "@/Component/Common/Forms/FormLabel";
import FormikTextarea from "@/Component/Common/Forms/FormikTextarea";
import ValidationMsg from "@/Utils/ValidationSchema/ValidationMsg";
import axios from "axios";
import { useSelector } from "react-redux";
import { AppStore } from "@/lib/store";
import moment from "moment";

const ContactNowModal = (props) => {
    const { openContactNowModal, setOpenContactNowModal, refetch } = props;
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);

    // Patch  API
    const { isPending, mutate } = usePost(`${CampaignContactNowAPI}/${openContactNowModal?.campaignDetail?.id}`, null, (response) => {
        if (response?.status == 200 || response?.status == 201) {
            setOpenContactNowModal(null);
            refetch();
        }
    }, 'patch');

    const CreateChatGroup = async (data, values) => {
        const createGroup = await axios.post('/api/chat', { data: data, endpoint: "groups" })

        if (createGroup?.data?.data?.conversationId) {
            values.chat_id = openContactNowModal?.influencerData?.id
            values.influencer_id = openContactNowModal?.influencerData?.influencer?.id
            mutate(values);

            let sendMessageObj = {
                receiver: openContactNowModal?.influencerData?.influencer?.id,
                category: 'interactive',
                type: 'customInteractive',
                data: { text: values?.message, amount: `${openContactNowModal?.campaignDetail?.budget_per_influencer}`, due: `${moment.utc(openContactNowModal?.campaignDetail?.posting_end_date).format('DD MMM YYYY')}`, link: `${userDetails?.role == 'brand' ? `/brand/my-campaigns/${openContactNowModal?.campaignDetail?.slug}` : `/influencer/jobs`}` },
                receiverType: 'group',
                "multipleReceivers": {
                    "guids": [createGroup?.data?.data?.guid]
                },
            }
            const sendMessage = await axios.post('/api/chat', { data: sendMessageObj, endpoint: "messages" });
        }
    }

    return (
        <Modal modalSize="w-1/3 max-w-1/3" modal={openContactNowModal} setModal={setOpenContactNowModal}>
            <Formik
                enableReinitialize
                initialValues={{
                    message: `Hi, ${openContactNowModal?.influencerData?.influencer?.display_name}
This is ${openContactNowModal?.campaignDetail?.users?.first_name} ${openContactNowModal?.campaignDetail?.users?.last_name}.I am reaching  out to invite you to provide a quotation with this job.Look forward to your reply!`,
                }}
                validationSchema={YupObject({
                    message: RequiredField('Message is required'),
                })}
                onSubmit={(values: any) => {
                    let data = {
                        guid: openContactNowModal?.influencerData?.id,
                        name: openContactNowModal?.influencerData?.influencer?.display_name,
                        type: 'public',
                        icon: openContactNowModal?.influencerData?.influencer?.image !== '' ? openContactNowModal?.influencerData?.influencer?.image : "https://d1i31jsql1ktvl.cloudfront.net/images/profile/placeholder.jpg",
                        description: openContactNowModal?.campaignDetail?.campaign_name,
                        members: {
                            admins: [openContactNowModal?.campaignDetail?.users?.id],
                            moderators: [openContactNowModal?.campaignDetail?.id],
                            participants: [openContactNowModal?.influencerData?.influencer?.id],
                        }
                    }
                    CreateChatGroup(data, values);
                }}
            >
                {({ values, setFieldValue, errors }) => {
                    return (
                        <Form>
                            <div className="flex flex-col col-span-12">
                                <FormLabel title="Message to influencer" />
                                <FormikTextarea textareaProps={{ type: "text", name: "message", autoComplete: "new-email", placeholder: "Enter message here...", rows: 8 }} />
                                <ErrorMessage name="message" component="div" render={(msg) =>
                                    <ValidationMsg errorMsg={msg} />
                                } />
                            </div>
                            <div className="flex items-center justify-end gap-3.5 mt-5">
                                <BorderButton buttonType="button" title="Cancel" onClick={() => setOpenContactNowModal(false)} />
                                <PrimaryButton buttonType="submit" customClass="flex items-center justify-center gap-1.5" disabled={isPending} >
                                    Contact Now
                                    {isPending && <LoaderSVG />}
                                </PrimaryButton>
                            </div>
                        </Form>
                    );

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

export default ContactNowModal