import { useState, useEffect } from "react";
import { Footer } from "../../../layouts/footer";
import ResponsiveAppBar from "../../../layouts/navbar";
import { ProductTypes } from "../../public/landingPage/components/productTypes";
import { AccountSection } from "./components/account";
import { DeliverAddress } from "./components/deliveryAddress";
import { DeliveryInfo } from "./components/deliveryInfo";
import { PaymentPage } from "./components/pay";
import { MyCart } from "./components/myCart";
import { useAppDispatch, useAppSelector } from "../../../../app/redux/hooks";
import { setStepperActiveMenu } from "../../../../app/slices/checkoutSlice/CheckoutSlice";
import NearMeIcon from "@mui/icons-material/NearMe";
import PaymentIcon from "@mui/icons-material/Payment";
import { useNavigate } from "react-router-dom";

export const ChekoutPage = () => {
  // const [stepperActive, setActiveComponent] = useState("account");
  const { stepperActive, isPayButtonDisabled, isInfoButtonDisabled } =
    useAppSelector((state) => state.CheckoutState);
  const { isValidUser, profileData }: any = useAppSelector(
    (state) => state.ProfileState
  );
  const { addressSelectedtype, setAddressSelectedtype }: any = useAppSelector(
    (state) => state.AddressState
  );
  const { addTocart } = useAppSelector((state) => state.CartState);
  const navigate = useNavigate();

  // Check if this is a long distance order
  const isLongDistance = addTocart?.long_distance || false;
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  const dispatch = useAppDispatch();
  const renderComponent = () => {
    switch (stepperActive) {
      case "account":
        return <AccountSection />;
      case "address":
        return <DeliverAddress isLongDistance={isLongDistance} />;
      case "deliveryInfo":
        return <DeliveryInfo />;
      case "pay":
        return <PaymentPage isLongDistance={isLongDistance} />;
      default:
        return isValidUser ? <DeliverAddress isLongDistance={isLongDistance} /> : <AccountSection />;
    }
  };
  useEffect(() => {
    return () => {
      activeMenuSelector("account");
    };
  }, [dispatch]);
  const activeMenuSelector = (active: any) => {
    dispatch(setStepperActiveMenu(active));
  };
  return (
    <>
      <ResponsiveAppBar />
      <ProductTypes />
      <div className="tf-breadcrumb">
        <div className="container">
          <div className="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
            <div className="tf-breadcrumb-list">
              <a className="text" onClick={() => navigate("/")}>
                Home
              </a>
              <i className="icon icon-arrow-right"></i>
              <span className="text">My Account</span>
            </div>
          </div>
        </div>
      </div>

      <section className="flat-spacing-11">
        <div className="">
          <div className="row">
            <div className="col-md-8">
              {/* Navigation Tabs */}
              <div className="d-flex align-items-start wizard-n">
                <ul className="nav verti-tab nav-pills flex-column align-items-end ">
                  {!isValidUser || !profileData?.data?.first_name ? (
                    <li className="nav-item">
                      <button
                        className={`nav-link fw-semibold ${
                          stepperActive === "account" ? "active" : ""
                        }`}
                        onClick={() => activeMenuSelector("account")}
                      >
                        Account
                        <span
                          className="nav-icon-item"
                          style={{ margin: "9px" }}
                        >
                          <i className="icon icon-account"></i>
                        </span>
                      </button>
                    </li>
                  ) : null}

                  <li className="nav-item">
                    <button
                      className={`nav-link fw-semibold ${
                        stepperActive === "address" ? "active" : ""
                      }`}
                      onClick={() => activeMenuSelector("address")}
                      disabled={!isValidUser}
                    >
                      Delivery Address
                      <span className="nav-icon-item" style={{ margin: "2px" }}>
                        <i className="ps-2"></i>
                        <NearMeIcon></NearMeIcon>
                      </span>
                    </button>
                  </li>

                  {/* Hide Delivery Info tab if long distance */}
                  {!isLongDistance && (
                    <li className="nav-item">
                      <button
                        className={`nav-link fw-semibold ${
                          stepperActive === "deliveryInfo" ? "active" : ""
                        }`}
                        onClick={() => activeMenuSelector("deliveryInfo")}
                        disabled={isInfoButtonDisabled}
                      >
                        Delivery Info
                        <span className="nav-icon-item" style={{ margin: "2px" }}>
                          <i className="ps-2"></i>
                          <NearMeIcon></NearMeIcon>
                        </span>
                      </button>
                    </li>
                  )}

                  <li className="nav-item">
                    <button
                      className={`nav-link fw-semibold ${
                        stepperActive === "pay" ? "active" : ""
                      }`}
                      onClick={() => activeMenuSelector("pay")}
                      disabled={isPayButtonDisabled}
                      style={{ textAlign: "center" }}
                    >
                      <div style={{ display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "8px" }}>
                        <span>{isLongDistance ? "Payment & Delivery Options" : "Proceed to Pay"}</span>
                        <span className="nav-icon-item" style={{ margin: "0" }}>
                          <PaymentIcon></PaymentIcon>
                        </span>
                      </div>
                    </button>
                  </li>
                </ul>

                {/* Component Rendering Based on Active Tab */}
                <div className="tab-content content-verti py-3 px-5 w-100 border-start border-2">
                  {renderComponent()}
                </div>
              </div>
            </div>

            <div className="col-md-4 modal-shopping-cart pe-5">
              <div className="wrap">
                <MyCart page="checkOut" />
              </div>
            </div>
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
};