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, useNavigate, useParams } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "../../../../app/redux/hooks";
import { getCustomOrderDetailsAsync } from "../../../../app/slices/customOrderSlice/CustomOrderSlice";
import { DescriptionSwiper } from "../productDescription/components/DescriptionSwiper";

export const CustomCakeDescriptionPage = () => {
  const location = useLocation();
  const dispatch = useAppDispatch();
  const customOrderData: any = useAppSelector(
    (state) => state.CustomOrderState.customOrderDescription
  );
  const navigate = useNavigate();
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  useEffect(() => {
    const product_id = localStorage.getItem("product_id");
    if (product_id) {
      dispatch(getCustomOrderDetailsAsync(product_id)); // Pass product_id directly
    }
  }, [dispatch]);

  const imageUrls = customOrderData?.data?.images?.map(
    (image: any) => image.image_url
  );
  const result = {
    data: {
      images: imageUrls,
    },
  };
  return (
    <>
      <div id="wrapper">
        <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">Custom Cakes</span>
              </div>
            </div>
          </div>
        </div>
        <section className="flat-spacing-4 pt_0 pb-5">
          <div className="tf-main-product section-image-zoom">
            <div className="container">
              <div className="row">
                <div className="col-md-6">
                  <div className="tf-product-media-wrap sticky-top">
                    <DescriptionSwiper productData={result?.data} />
                  </div>
                </div>
                <div className="col-md-6">
                  <div className="tf-product-info-wrap position-relative">
                    <div className="tf-zoom-main"></div>
                    <div className="tf-product-info-list other-image-zoom">
                      <div className="tf-product-info-title">
                        <h5>{customOrderData?.data?.product_name}</h5>
                      </div>
                      <div className="tf-product-info-badges">
                        <div className="badges">Best seller</div>
                        <div className="product-status-content">
                          <i className="icon-lightning"></i>
                          <p className="fw-6">
                            Selling fast! 56 people have this in their carts.
                          </p>
                        </div>
                      </div>
                      <div className="tf-product-info-price">
                        <div className="price-on-sale">
                          {customOrderData?.data?.min_size}
                          {customOrderData?.data?.size_unit}-{" "}
                          {customOrderData?.data?.min_size}
                          {customOrderData?.data?.size_unit}
                        </div>
                        <div className="badges-on-sale">
                          <span>5</span>% OFF
                        </div>
                      </div>
                      <div className="variant-picker-item">
                        <div className="variant-picker-item">
                          <div className="variant-picker-values">
                            <input
                              id="values-veg"
                              type="radio"
                              name="color1"
                              checked
                              readOnly
                            />
                            <label
                              className={`hover-tooltip  ${
                                customOrderData?.data?.product_type === "Veg"
                                  ? "veg"
                                  : "nonveg"
                              }`}
                              htmlFor="values-veg"
                              data-value="Veg"
                            >
                              <span
                                className={`btn-checkbox    ${
                                  customOrderData?.data?.product_type === "Veg"
                                    ? "bg-color-veg bg-veg"
                                    : "bg-color-nonveg "
                                }`}
                              ></span>
                              <span className="tooltip">
                                {customOrderData?.data?.product_type}
                              </span>
                            </label>{" "}
                          </div>
                        </div>
                      </div>
                      <div className="mb_20">
                        <span className="tag label label-info ms-0">
                          <span>Sugar free Sugar</span>
                          <a>
                            <i className="remove fa fa-check"></i>
                          </a>
                        </span>
                        <span className="tag label label-info">
                          <span>Healthy Bite</span>
                          <a>
                            <i className="remove fa fa-check"></i>
                          </a>
                        </span>
                      </div>

                      <div>
                        <div className="mb_20">
                          <label className="text-start" htmlFor="shareRequest">
                            Share your Request
                          </label>
                          <textarea
                            placeholder="Enter a description..."
                            name="shareRequest"
                            className="enq"
                            id="shareRequest"
                            required
                            cols={50} // Number value
                            rows={10}
                          ></textarea>
                        </div>

                        <div className="mb_20">
                          <label className="text-start" htmlFor="enterMessage">
                            Enter your Message
                          </label>
                          <textarea
                            name="enterMessage"
                            className="enq"
                            id="enterMessage"
                            placeholder="Message on Cake..."
                            cols={50} // Number value
                            rows={10}
                          ></textarea>
                        </div>

                        <div className="send-wrap">
                          <button
                            type="submit"
                            className="tf-btn btn-fill justify-content-center w-100 fw-6 fs-16 flex-grow-1 animate-hover-btn"
                          >
                            Place Your Enquiry
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section className="flat-spacing-17 pt_0">
          <div className="container">
            <div className="row">
              <div className="col-12">
                <div className="widget-tabs style-has-border">
                  <ul className="widget-menu-tab">
                    <li className="item-title active">
                      <span className="inner">Description</span>
                    </li>
                    {/* <li className="item-title">
                      <span className="inner">Review</span>
                    </li> */}
                  </ul>
                  <div className="widget-content-tab">
                    <div className="widget-content-inner active">
                      <div className="">
                        {/* <p className="mb_30">
                          The most hands-off loaf of 100% naturally leavened
                          bread – crusty, airy
                        </p>
                        <p className="mb_30">
                          Sourdough bread is a great alternative to regular
                          white and whole wheat bread. It has lower phytate
                          levels, which make it more nutritious and easier to
                          digest. Sourdough bread has prebiotics which can help
                          maintain a healthy gut. Since sourdough bread is
                          easier to digest, people that suffer from gluten
                          allergies/sensitivities usually can enjoy sourdough
                          without issues. Sourdough bread also seems less likely
                          to spike your blood sugar levels, which it a healthier
                          option for people that suffer from diabetes or high
                          blood sugar.
                        </p>
                        <div className="tf-product-des-demo">
                          <div className="right">
                            <h3 className="fs-16 fw-5">Ingredients</h3>
                            <ul>
                              <li>unbleached all purpose flour</li>
                              <li>filtered water</li>
                              <li>kosher salt</li>
                              <li>unbleached all purpose flour</li>
                              <li>filtered water</li>
                              <li>kosher salt</li>
                            </ul>
                          </div>
                        </div> */}
                        <h3 className="fs-16 fw-5">Marketed By</h3>
                        <p>
                          Navya Bakeshop, Central Junction Angamaly Ernakulam,
                          Kerala, India-683572, E-Mail : ang1@navyabakers.com,
                          Phone : +91 9496001256
                        </p>
                        <img src="images/fssai-logo.webp" width="100" alt="" />
                        <br />
                        <p>
                          <b>FSSAI Lic. No. xxxxxxxxxxx0168</b>
                        </p>
                      </div>
                    </div>
                    <div className="widget-content-inner">
                      <div className="testimonial-item mb-3">
                        <div className="rating mb-1">
                          <i className="icon-start"></i>
                          <i className="icon-start"></i>
                          <i className="icon-start"></i>
                          <i className="icon-start"></i>
                          <i className="icon-start"></i>
                        </div>
                        <div className="heading">Best Customer Service</div>
                        <div className="text">
                          "I finally found a web fashion site with stylish and
                          flattering options in my size."
                        </div>
                        <div className="author">
                          <div className="name">Peter Rope</div>
                          <div className="metas">Customer from USA</div>
                        </div>
                      </div>
                      <hr />
                      <div className="testimonial-item mb-3">
                        <div className="rating mb-1">
                          <i className="icon-start"></i>
                          <i className="icon-start"></i>
                          <i className="icon-start"></i>
                          <i className="icon-start"></i>
                          <i className="icon-start"></i>
                        </div>
                        <div className="heading">Best Customer Service</div>
                        <div className="text">
                          "I finally found a web fashion site with stylish and
                          flattering options in my size."
                        </div>
                        <div className="author">
                          <div className="name">Peter Rope</div>
                          <div className="metas">Customer from USA</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <Footer />{" "}
      </div>{" "}
    </>
  );
};