'use client'
import React, { useEffect, useRef, useState } from 'react'
import { useSearchParams } from 'next/navigation'
import { useSelector, useDispatch } from 'react-redux'
import { asyncEventDetailsPayment } from '../../../../../../redux/Thunks/User/eventdetailspayment.thunk'
import { asyncBookEvent } from '../../../../../../redux/Thunks/User/bookevent.thunk'
import EventCardBox from './EventCardBox'
import CreditCard from './CreditCard'
import { sweetalert } from '@/app/components/common/Common'
import PaymentSideBar from './PaymentSideBar'
import AttendeesModal from '@/app/components/SiteModal/AttendeesModal/AttendeesModal'
import { useRouter } from 'next/navigation'
import SuccessModal from '@/app/components/SiteModal/SuccessModal/SuccessModal'
import PaymentErrorModal from '@/app/components/SiteModal/PaymentErrorModal/PaymentErrorModal'
import ErrorModal from '@/app/components/SiteModal/ErrorModal/ErrorModal'
import Paypal from './Paypal'
import Twint from './Twint'
import { getRedirectUrl } from '../../../../../utils/Redirect/redirect'
import TermsandConditionsModal from '@/app/components/SiteModal/TermsandConditionsModal/TermsandConditionsModal'
import {
    eventPaymentAdyanCreditCardThunk,
    eventPaymentStatusThunk,
    eventPaymentStripeThunk
} from '../../../../../../redux/Thunks/User/payment.adyan.thunk'
import { UserTermsAndConditionsViewThunk } from '../../../../../../redux/Thunks/User/TermsAndConditions/termsandconditions.thunk'
import AdyenCheckout from '@adyen/adyen-web'
import '@adyen/adyen-web/dist/adyen.css'
import H1 from '@/app/components/common/h1'
import Skeleton from '@/app/components/Skeleton/Skeleton'
import { useTranslation } from 'react-i18next'
import { getCookie, deleteCookie } from 'cookies-next'

import { loadStripe } from '@stripe/stripe-js'
import { Elements } from '@stripe/react-stripe-js'

import CheckoutForm from '../../../../components/CheckoutForm/CheckoutForm'
import requestApi from '@/utils/request'
import axios from 'axios'
import Swal from 'sweetalert2'

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY)

const PaymentModules = ({ category, languageName, organizerId, token }) => {
    const { i18n } = useTranslation()
    const dispatch = useDispatch()
    const paymentContainer = useRef(null)
    const router = useRouter()
    const { eventDetailsPayment, isLoading: detailLoader } = useSelector(
        (m) => m.eventdetailspayment
    )

    // console.log('eventDetailsPayment', eventDetailsPayment?.data?.eventData)

    const [openTandC, setOpenTandC] = useState(false)
    const search = useSearchParams()
    const eId = search.get('eId')
    // const cId = search.get("cId")
    const quantityForBook = search.get('qty') || 1
    const redirectResult = search.get('redirectResult')
    const asAGift = search.get('gt')
    const showUserProfileInData = search.get('atd')
    const [loading, setLoading] = useState(false)
    const [status, setStatus] = useState(null)
    const [clientSecret, setClientSecret] = useState(null)
    const [applyKarmaPoints, setApplyKarmaPoints] = useState(false);
    const [stripeOptions, setStripeOptions] = useState(null)
    const EventData = eventDetailsPayment?.data?.eventData
    const EventPrice = eventDetailsPayment?.data?.paymentDetails
    const FreeEvents = Math.ceil(
        Number(eventDetailsPayment?.data?.paymentDetails?.subTotal)
    )
    // const attendessModelCookie = getCookie("attendees")
    const attendessModelCookie =
        typeof window !== 'undefined' && localStorage.getItem('attendees')
    const { viewDataTandC } = useSelector((e) => e?.TermsandConditionsUserSlice)
    const { guestBookEvent } = useSelector((e) => e?.guestBookEvent)
    const { userData } = useSelector((m) => m.authentication);

    // console.log('clientSecret', clientSecret)

    const errorIcon = `<svg class="svg-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
                        <circle class="path circle" fill="none" stroke="#F96E66" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1" />
                        <line class="path line" fill="none" stroke="#F96E66" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="34.4" y1="37.9" x2="95.8" y2="92.3" />
                        <line class="path line" fill="none" stroke="#F96E66" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="95.8" y1="38" x2="34.4" y2="92.2" />
                    </svg>`

    const CancelModal = () => {
        setshow(false)
        // setShowAttendeesModal(true)
        router.push(`/e-ticket?tId=${EventData?.eventId}&cId=${category}`)
        document.body.classList.remove('open-modal')
    }

    // useEffect(() => {
    //     if (clientSecret) {
    //         setClientSecret(null)
    //     }
    // }, [applyKarmaPoints])

    useEffect(() => {
        dispatch(
            asyncEventDetailsPayment({
                eventId: eId,
                quantity: quantityForBook,
                applyKarmaPoint: applyKarmaPoints
            })
        )
    }, [applyKarmaPoints])

    useEffect(() => {
        if (organizerId) {
            dispatch(UserTermsAndConditionsViewThunk({ userId: organizerId }))
        }

    }, [organizerId])

    const closeTandCmodal = () => {
        setOpenTandC(false)
        document.body.classList.remove('open-modal')
    }
    const handleTandCmodalopen = () => {
        setOpenTandC(true)
        document.body.classList.add('open-modal')
    }

    useEffect(() => {
        if (!!FreeEvents) {
            let obj = {}
            setClientSecret(null)
            obj.eventId = eId,
                obj.languageName = languageName,
                obj.quantity = quantityForBook
            obj.applyKarmaPoint = applyKarmaPoints
            if (asAGift !== 'null') {
                obj.asAGift = JSON.parse(asAGift)
            }
            obj.returnUrl = `${process.env.NEXT_PUBLIC_BASE_URL_REDIRECTION}/status/?id=${eId}&cId=${category}`
            // obj.showUserProfileInData = showUserProfileInData === "true" ? true : false
            // dispatch(eventPaymentAdyanCreditCardThunk(obj));

            // dispatch(eventPaymentStripeThunk(obj));

            if (userData) {
                requestApi
                    .post('/endUser/events/create-payment-intent', obj)
                    .then((res) => {
                        setClientSecret(res?.data?.clientSecret)
                        setStripeOptions({
                            clientSecret: res?.data?.clientSecret,
                            appearance,
                            locale: languageName ? languageName : "en"
                        })
                    }
                    )
                    .catch((error) => {
                        // console.log('Error', error);
                        Swal.fire({
                            html: `<div class='custom-swal-modal'>
                                    <div class='modal-body'>
                                        ${errorIcon}
                                        <h2>${error?.message}</h2>
                                    </div>
                                </div>`,
                            allowOutsideClick: false,
                            confirmButtonText: 'Try Again',
                        }).then(() => {
                            // When the user clicks "Try Again", redirect them
                            router.push(
                                `/${eventDetailsPayment?.data?.eventData?.categorySlug}/${eventDetailsPayment?.data?.eventData?.slug}`
                            );
                            return true;
                        });
                        setClientSecret(null);
                    });
            } else {
                if (guestBookEvent) {
                    // console.log('guestBookEvent', guestBookEvent)
                    obj.userId = guestBookEvent?.userId
                    obj.firstName = guestBookEvent?.firstName
                    obj.lastName = guestBookEvent?.lastName
                    obj.email = guestBookEvent?.email
                    obj.isGuestBooking = true
                    obj.returnUrl = `${process.env.NEXT_PUBLIC_BASE_URL_REDIRECTION}`
                    // obj.returnUrl = 'http://localhost:3000'
                    requestApi
                        .post('/endUser/events/guest/create-payment-intent', obj)
                        .then((res) => {
                            setClientSecret(res?.data?.clientSecret)
                            setStripeOptions({
                                clientSecret: res?.data?.clientSecret,
                                appearance,
                                locale: languageName ? languageName : "en"
                            })
                        }
                        )
                } else {

                }
            }

        }
        // if (!attendessModelCookie) {
        //   setShowAttendeesModal(true);
        // }
    }, [FreeEvents, applyKarmaPoints])

    const appearance = {
        theme: 'stripe'
    }
    const options = {
        clientSecret,
        appearance,
        locale: languageName ? languageName : "en"
    }
    useEffect(() => {
        setStripeOptions({
            clientSecret,
            appearance,
            locale: languageName ? languageName : "en"
        })
    }, [])

    useEffect(() => {
        if (!userData && !guestBookEvent) {
            router.back()
        }
    }, [])

    return (
        <>
            <div className="flex items-stretch justify-between flex-col md:flex-row web-setting-wrapper">
                <div className="web-setting-content payment-setting-content">
                    <div className="flex items-center card-details ">
                        <>
                            <div className='w-full lg:w-1/2 3xl:w-3/5 payment-card-body'>
                                <p className="policy-title">{i18n.t(`payment.paymentrefundline`)} <span className="link"
                                    onClick={() => handleTandCmodalopen()}
                                >{i18n.t(`payment.paymentrefundline1`)}</span> {i18n.t(`payment.paymentrefundline2`)}</p>
                                {/* <h1 className="title">{i18n.t(`payment.title`)}</h1> */}
                                <div className='payment-form-wrapper'>
                                    {clientSecret && (
                                        <Elements
                                            options={stripeOptions}
                                            stripe={stripePromise}
                                        >
                                            <CheckoutForm tId={EventData?.eventId} cId={category} eventDetails={eventDetailsPayment} setApplyKarmaPoints={setApplyKarmaPoints} applyKarmaPoints={applyKarmaPoints} />
                                        </Elements>
                                    )}
                                </div>
                            </div>
                            <div
                                className={`w-full ${!FreeEvents
                                    ? 'freecard   '
                                    : 'lg:w-1/2 3xl:w-2/5'
                                    }`}
                            >
                                <EventCardBox
                                    eventData={eventDetailsPayment?.data}
                                    languageName={languageName}
                                    token={token}
                                />
                            </div>
                        </>
                    </div>
                </div>
            </div>

            {openTandC && (
                <TermsandConditionsModal
                    show={openTandC}
                    title={i18n.t(`organizer.termsandconditions.heading`)}
                    description={viewDataTandC?.termsAndConditions}
                    CancelModal={() => closeTandCmodal()}
                    cancelBtn={i18n.t(`settings.deleteModal.cancleBtn`)}
                />
            )}

            {/* <SuccessModal
                      show={show}
                      title={i18n.t(`payment.model.SuccessModal.title`)}
                      description={i18n.t(
                          `payment.model.SuccessModal.description`
                      )}
                      SolidBTNText={i18n.t(
                          `payment.model.SuccessModal.SolidBTNText`
                      )}
                      CancelModal={() => {
                          CancelModal()
                      }}
                  /> */}
            {/* {!!FreeEvents && showAttendeesModal && (
            <AttendeesModal
              show={showAttendeesModal}
              setshow={setShowAttendeesModal}
              title={i18n.t(`payment.model.AttendeesModal.title`)}
              onClickCancleText={i18n.t(
                `payment.model.AttendeesModal.onClickCancleText`
              )}
              SolidBTNText={i18n.t(`payment.model.AttendeesModal.SolidBTNText`)}
              onClickCancle={
                () => {
                  router.push(
                    `/events/payment/?eId=${eId}&cId=${category}&qty=${quantityForBook}&gt=${asAGift}&atd=false`
                  );
                  setShowAttendeesModal(false);
                  // document.cookie = 'attendees="false";'
                  localStorage.setItem("attendees", "false");
                }
                // AttendeesName(
                //   i18n.t(`payment.model.AttendeesModal.onClickCancleText`)
                // )
              }
              onClickOK={
                () => {
                  router.push(
                    `/events/payment/?eId=${eId}&cId=${category}&qty=${quantityForBook}&gt=${asAGift}&atd=true`
                  );
                  setShowAttendeesModal(false);
                  // document.cookie = 'attendees="true";'
                  localStorage.setItem("attendees", "true");
                }
                // AttendeesName(
                //   i18n.t(`payment.model.AttendeesModal.SolidBTNText`)
                // )
              }
            />
          )} */}
            {/* {paymentError && (
                      <PaymentErrorModal
                          show={paymentError}
                          title={
                              errorMessage
                                  ? errorMessage
                                  : i18n.t(
                                        `payment.model.PaymentErrorModal.title`
                                    )
                          }
                          // description={i18n.t(
                          //   `payment.model.PaymentErrorModal.description`
                          // )}
                          SolidBTNText={i18n.t(
                              `payment.model.PaymentErrorModal.SolidBTNText`
                          )}
                          CancelModal={() => {
                              window.location.reload()
                              setPaymentError(false)
                              setErrorMessage(null)
                          }}
                      />
                  )} */}
            {/* {bookedEvent && (
                      <ErrorModal
                          show={bookedEvent}
                          setshow={setshow}
                          url={'/events/'}
                          description={bookedErrormessage}
                          //  CancelModal = {()=>{
                          //      setshow(false)
                          //      router.push('/events/')
                          //     }}
                      />
                  )} */}
        </>
    )
}

export default PaymentModules