/* eslint-disable consistent-return */
/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable no-console */
/* eslint-disable unused-imports/no-unused-vars */
import type { ForwardedRef } from "react";
import { forwardRef, useImperativeHandle, useRef, useState } from "react";

import type { FormHandles } from "@/components/form/form";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion/accordion";
import { AccordionPaymentOption } from "@/components/widget/payment/accordion-payment-option/accordion-payment-option";
import { MasterPassBanner } from "@/features/modules/payment/masterpass/components/masterpass-banner";
import type { MasterpassHandles } from "@/features/modules/payment/masterpass/masterpass";
import Masterpass from "@/features/modules/payment/masterpass/masterpass";
import type { CreditCardPaymentHandles } from "@/features/payment/credit-card-infos/components/credit-card-payment";
import CreditCardPayment from "@/features/payment/credit-card-infos/components/credit-card-payment";
import { useLocale } from "@/hooks/useLocale";
import { useMasterpassStore } from "@/store/masterpass-store/use-masterpass-store";

import { usePayment } from "../hotel/payment/hooks/use-hotel-payment";
import PaymentAgreementFormItem from "./components/payment-agreement-form-item";

export interface HotelPaymentListHandles extends FormHandles {
  clearSelectedCampaign?: VoidFunction;
}
export interface PaymentListProps {
  cartId: string;
  searchId: string;
  transactionId: string;
  reservationNote?: string;
  noCampaign?: boolean;
  handles?: {
    onBookSuccess: (payload: { bookingCode: string }) => void;
    onBookFail: (payload: { message: string; data?: any }) => void;
  };
}

const PaymentList = (
  { reservationNote = "", ...props }: PaymentListProps,
  ref: ForwardedRef<HotelPaymentListHandles>,
) => {
  const { masterpassState } = useMasterpassStore();
  const { paymentState } = usePayment();
  const [paymentMethod, setPaymentMethod] = useState<string>();
  const creditCardRef = useRef<CreditCardPaymentHandles>(null);
  const masterpassRef = useRef<MasterpassHandles>(null);
  const checkMasterpass = masterpassState.data?.payload?.masterpassUserData;
  const { t } = useLocale();

  useImperativeHandle(ref, () => ({
    submit: () => {
      if (paymentMethod === "creditCard") {
        return creditCardRef.current?.submit();
      }
      return masterpassRef.current?.submit();
    },
    onlyValidate: () => {
      creditCardRef.current?.onlyValidate();
      masterpassRef.current?.onlyValidate();
    },
    clearSelectedCampaign: () => {
      creditCardRef?.current?.clearSelectedCampaign?.();
    },
  }));

  return (
    <div className="flex flex-col gap-4 pb-10">
      <Accordion
        className="flex flex-col gap-4"
        value={paymentMethod}
        type="single"
        collapsible
      >
        <AccordionItem
          className="rounded-primary border bg-gray-100 px-4 py-2 md:w-[744px]"
          value="creditCard"
        >
          <AccordionTrigger
            className="flex justify-between p-0 hover:no-underline"
            onClick={() => setPaymentMethod("creditCard")}
            showButton={false}
          >
            <AccordionPaymentOption
              title={t("Pay by credit/debit card")}
              description={t(
                "You can make secure payments with your credit or debit cards.",
              )}
              open={paymentMethod === "creditCard"}
              id="creditCard"
            />
          </AccordionTrigger>
          <AccordionContent>
            <CreditCardPayment
              noCampaign={props.noCampaign}
              handles={props.handles}
              ref={creditCardRef}
              metadata={{
                cartId: props.cartId,
                searchId: props.searchId,
                transactionKey: props.transactionId,
                reservationNote,
              }}
            />
          </AccordionContent>
        </AccordionItem>
        {checkMasterpass && (
          <AccordionItem
            className="rounded-primary border bg-gray-100 px-4 py-2 md:w-[744px]"
            value="masterpass"
          >
            <AccordionTrigger
              className="flex justify-between p-0 hover:no-underline"
              onClick={() => setPaymentMethod("masterpass")}
              showButton={false}
            >
              <AccordionPaymentOption
                title={t("Buy now, pay later with Masterpass")}
                description={t("Make your payment with Masterpass assurance.")}
                open={paymentMethod === "masterpass"}
                id="masterpass"
                icon="/assets/images/mastercard.png"
              />
            </AccordionTrigger>
            <AccordionContent>
              <Masterpass ref={masterpassRef} />
            </AccordionContent>
          </AccordionItem>
        )}
      </Accordion>

      {checkMasterpass && (
        <MasterPassBanner setPaymentMethod={setPaymentMethod} />
      )}
      <PaymentAgreementFormItem
        saleAgreementText={paymentState.payload.saleAgreementText ?? ""}
        preSaleAgreementText={paymentState.payload.preSaleAgreementText ?? ""}
      />
    </div>
  );
};

export default forwardRef(PaymentList);