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

import ResponsiveAppBar from "../../../layouts/navbar";

import CustomDialog from "../../../components/custom/dialog";
import { Footer } from "../../../layouts/footer";
import { ProductTypes } from "../landingPage/components/productTypes";
import { Link, useLocation, useParams } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "../../../../app/redux/hooks";
import { setSelectProduct } from "../../../../app/slices/productDiscriptionSlice/ProductDescriptionSlice";
import { getCustomOrderListAsync } from "../../../../app/slices/customOrderSlice/CustomOrderSlice";
import { CircularProgress } from "@mui/material";
import { getProductImageUrl } from "../../../../app/slices/common/imageConstants";

export const CustomOrdersPage = () => {
  const [modalType, setModalType] = useState("");
  const location = useLocation();
  const dispatch = useAppDispatch();
  const category: any = location.pathname.split("/").pop();
  const customOrderList = useAppSelector(
    (state) => state.CustomOrderState.customOrderList
  );
  const baseLocation = useAppSelector(
    (state) => state.locationState.locationGot
  );

  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  useEffect(() => {
    if (baseLocation?.shop) dispatch(getCustomOrderListAsync());
  }, []);

  const selectProduct = (id: any) => {
    // dispatch(setSelectProduct(id));
    localStorage.setItem("custom_product_id", id);
  };
  return (
    <>
      <div id="wrapper">
        <ResponsiveAppBar />
        <ProductTypes />
        <div className="tf-page-title custom-c">
          <div className="container-full">
            <div className="row">
              <div className="col-12">
                <div
                  style={{
                    fontFamily: "Albert Sans, sans-serif",
                  }}
                  className="heading text-center"
                >
                  Custom Cakes
                </div>
                <p className="text-center text-2 text_white mt_5">
                  Create you own perfect Cake
                </p>
              </div>
            </div>
          </div>
        </div>
        <section className="flat-spacing-1">
          {customOrderList?.loader ? (
            <div className="container">
              <div style={{ minHeight: "50vh" }}>
                <CircularProgress
                  style={{
                    position: "absolute",
                    // top: "50%",
                    left: "50%",
                    transform: "translate(-50%, -50%)",
                  }}
                />
              </div>
            </div>
          ) : (
            <div className="container">
              <section className="flat-spacing-1 pt_0 flat-seller">
                <div className="flat-title"></div>
                <div
                  className="grid-layout loadmore-item wow fadeInUp"
                  data-wow-delay="0s"
                  data-grid="grid-4"
                  style={{
                    fontFamily: "Albert Sans, sans-serif",
                  }}
                >
                  {customOrderList?.data?.data?.map(
                    (item: any, index: number) => {
                      return (
                        <>
                          <div className="card-product" key={index}>
                            <div className="card-product-wrapper">
                              <Link
                                to={`products/custom-product/${item.product_id}/`} // Link to product description
                                className="title link"
                                onClick={() => selectProduct(item?.product_id)}
                              >
                                <img
                                  className="lazyload img-product"
                                  data-src={getProductImageUrl(item?.product_img)}
                                  src={getProductImageUrl(item?.product_img)}
                                  alt="image-product"
                                />
                                <img
                                  className="lazyload img-hover"
                                  data-src={getProductImageUrl(item?.product_img)}
                                  src={getProductImageUrl(item?.product_img)}
                                  alt="image-product"
                                />
                              </Link>
                              {/* <div className="on-sale-wrap text-end">
                              <div className="on-sale-item">OFF 20%</div>
                            </div> */}
                            </div>
                            <div className="d-flex justify-content-between align-items-end">
                              <div className="card-product-info">
                                <Link
                                  to={`products/custom-product/${item.product_id}/`} // Link to product description
                                  className="title link"
                                  onClick={() =>
                                    selectProduct(item?.product_id)
                                  }
                                >
                                  {item.product_name}
                                </Link>
                              </div>
                              <div className="variant-picker-item">
                                <div className="variant-picker-values">
                                  <input
                                    id="values-veg"
                                    type="radio"
                                    name="color1"
                                    checked
                                    // onChange={(e) => justclick(e)}
                                    readOnly
                                  />
                                  <label
                                    className={`hover-tooltip  ${
                                      item?.product_type === "Veg"
                                        ? "veg"
                                        : "nonveg"
                                    }`}
                                    htmlFor="values-veg"
                                    data-value="Veg"
                                  >
                                    <span
                                      className={`btn-checkbox    ${
                                        item?.product_type === "Veg"
                                          ? "bg-color-veg bg-veg"
                                          : "bg-color-nonveg "
                                      }`}
                                    ></span>
                                    <span className="tooltip">
                                      {item?.product_type}
                                    </span>
                                  </label>{" "}
                                </div>
                              </div>
                            </div>
                            <div className="tf-product-info-price mt-1">
                              <div className="price fs-14 fw-6">
                                {item?.min_size}
                                {item?.size_unit} - {item?.max_size}
                                {item?.size_unit}
                              </div>
                            </div>
                            <div className="tf-product-info-price mt-1">
                              <div className="price fs-12 fw-4">
                                {item.description}
                              </div>
                            </div>
                          </div>
                        </>
                      );
                    }
                  )}
                </div>
              </section>
              {customOrderList?.data?.length === 0 && (
                <div
                  style={{
                    fontSize: "18px",
                    alignItems: "center",
                    display: "flex",
                    flexDirection: "column",
                  }}
                >
                  <span className="title wow fadeInUp" data-wow-delay="0s">
                    Custom products aren’t available in your selected location
                    for now.
                  </span>
                </div>
              )}
            </div>
          )}
        </section>
        <Footer />{" "}
      </div>{" "}
    </>
  );
};