"use client";

import React, { useContext, useEffect, useState } from "react";

import st from "./styles.module.scss";
import { Container, Spinner } from "react-bootstrap";
import OrderSummary from "@/components/OrderSummary";
import { ShopContext } from "@/providers/ShopContext";
import { getCart } from "@/utils/cartApi";
import ShippingAndBilling from "./ShippingAndBilling";
import { AuthContext } from "@/providers/AuthContext";
import { useRouter } from "next/navigation";
import { NotificationContext } from "@/providers/NotificationContext";

const Checkout = () => {
  const { context, updateContext } = useContext(ShopContext);
  const { context: authContext } = useContext(AuthContext);

  const router = useRouter();

  const [cartData, setCartData] = useState(null);

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      if (context.cart && context.cart.data) {
        setLoading(true);
        const data = await getCart(context.cart.data.cart_id);
        setCartData(data);
        setLoading(false);
      }
    };
    fetchData();
  }, [context.cart]);

  const setCheckoutStep = (step) => {
    if (step > 0 && step < 3) {
      updateContext({ checkoutStep: step });
    }
    if (step === 3) {
      // setLoading(true);
      const payload = {
        ...shippingValues,
        ...invoiceValues,
        ...notesValues,
        company_has_vat: invoiceValues.company_has_vat ? 1 : 0,
        has_invoice: invoiceValues.has_invoice ? 1 : 0,
        customer_id: authContext.user ? authContext.user.id : null,
        cart_id: context.cart.data.cart_id,
      };
      // const response = await previewOrder(payload);

      router.push("/preview");
      localStorage.setItem("checkoutPayload", JSON.stringify(payload));
      updateContext({ checkoutPayload: payload });

      // setLoading(false);
    }
  };

  const [shippingValues, setShippingValues] = useState({});
  const [shippingErrors, setShippingErrors] = useState({});
  const [shippingDirty, setShippingDirty] = useState({});
  const [invoiceValues, setInvoiceValues] = useState({});
  const [invoiceErrors, setInvoiceErrors] = useState({});
  const [invoiceDirty, setInvoiceDirty] = useState({});
  const [checkoutValues, setCheckoutValues] = useState({});
  const [checkoutErrors, setCheckoutErrors] = useState({});
  const [notesValues, setNotesValues] = useState({});

  return (
    <section className={st.wrapper}>
      <Container className={st.container}>
        <div className={st.row}>
          {/* {JSON.stringify(shippingValues, null, 4)} */}
          <div className={st.cartInfo}>
            <ShippingAndBilling
              cartData={cartData?.data}
              setShippingValues={setShippingValues}
              setInvoiceValues={setInvoiceValues}
              setShippingErrors={setShippingErrors}
              setInvoiceErrors={setInvoiceErrors}
              setShippingDirty={setShippingDirty}
              setInvoiceDirty={setInvoiceDirty}
              checkoutErrors={checkoutErrors}
              shippingErrors={shippingErrors}
              invoiceErrors={invoiceErrors}
              shippingDirty={shippingDirty}
              invoiceDirty={invoiceDirty}
              setCheckoutStep={setCheckoutStep}
              setNotesValues={setNotesValues}
              shippingValues={shippingValues}
            />
          </div>
          <div>
            {/* {JSON.stringify(cartData, null, 4)} */}
            {/* {JSON.stringify(shippingForm, null, 4)} */}
            <OrderSummary
              cartData={cartData?.data}
              setCheckoutStep={setCheckoutStep}
              checkoutStep={2}
              setCheckoutValues={setCheckoutValues}
              setCheckoutErrors={setCheckoutErrors}
              checkoutErrors={checkoutErrors}
              shippingErrors={shippingErrors}
              invoiceErrors={invoiceErrors}
              shippingDirty={shippingDirty}
              invoiceDirty={invoiceDirty}
            />
            {/* {JSON.stringify(checkoutErrors)}
            {JSON.stringify(shippingErrors)}
            {JSON.stringify(invoiceErrors)} */}
          </div>
        </div>
      </Container>
    </section>
  );
};

export default Checkout;