import React, { Fragment, useEffect, useState } from "react";
import DetailGallery from "./DetailGallery";
import DetailInfo from "./DetailInfo";
import GuestReviews from "./GuestReviews";
import SimilarExperiences from "./SimilarExperiences";
import Faqs from "./Faqs";
import SignUpToExperienceOurPlatform from "../home/SignUpToExperienceOurPlatform";
import { useDispatch, useSelector } from "react-redux";
import { getActivitiesByFilters } from "../../redux/actions/activityAction";
import { useRouter } from "next/router";
import Image from "next/image";
import DetailSchedule from "./DetailSchedule";
import { Breadcrumb, ConfigProvider } from "antd";
import { RightOutlined } from "@ant-design/icons";

const Detail = () => {
  const router = useRouter();
  const dispatch = useDispatch();
  const { allActivitiesData } = useSelector(state => state.allActivitiesData);
  const { activityById } = useSelector(state => state.activityById);
  const { loadedUser } = useSelector(state => state.loadedUser);
  const { faqs } = useSelector(state => state.faqs);
  useEffect(() => {
    // console.log("router", activityById.data.attributes.category?.data?.attributes.name);
    dispatch(getActivitiesByFilters({ category: activityById?.data.attributes.category?.data?.id }));
  }, [activityById]);

  // console.log("faqs=>", faqs);
  console.log("activityById", activityById);
  // console.log("loadedUser", loadedUser);
  return (
    <Fragment>
      <main>
        <section className="main-mt">
          <div className="container mt-3">
            <div className="py-4 py-lg-5 breadcrumb-wrap">
              <ConfigProvider
                theme={{
                  components: {
                    Breadcrumb: {
                      separatorMargin: 20,
                      fontWeight: 500,
                      fontSize: 16,
                      fontFamily: "Sofia Pro"
                    }
                  }
                }}
              >
                <Breadcrumb
                  separator={<RightOutlined />}
                  items={[
                    {
                      title: "Home",
                      href: "/"
                    },
                    {
                      title: activityById?.data?.attributes?.vendor?.data?.attributes?.city
                    },
                    {
                      title: activityById?.data?.attributes?.category?.data?.attributes?.name,
                      href: `/listing?category=${activityById?.data.attributes.category?.data?.id}`
                    },
                    {
                      title: activityById?.data?.attributes?.name,
                      href: `/listing?category=${activityById?.data.attributes.category?.data?.id}`
                    }
                  ]}
                />
              </ConfigProvider>
            </div>
            <div className="row hide-on-mobile">
              <div className="col-12">
                <div className="breadcrum$eq: categoryb-container">
                  {/* <Breadcrumb>
                    <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
                    <Breadcrumb.Item href="#">New York</Breadcrumb.Item>
                    <Breadcrumb.Item href="#">Adventure</Breadcrumb.Item>
                    <Breadcrumb.Item active>Mountain Climbing</Breadcrumb.Item>
                  </Breadcrumb> */}
                </div>
              </div>
            </div>
            <div className="row">
              <div className="col-xl-6">
                <DetailGallery activityById={activityById}></DetailGallery>
              </div>
              <div className="col-xl-6 listing-wrapper">
                <DetailInfo activityById={activityById}></DetailInfo>
              </div>
            </div>
            <DetailSchedule activityById={activityById} />
          </div>
        </section>
        {activityById && activityById.data.attributes.cancellationPolicyText && (
          <div className="container">
            <div className="row">
              <div className="col-12 my-2">
                <div className="head-btn">
                  <div className="head01">
                    <div className="title">Cancellation Policy</div>
                  </div>
                  {/* <a href="" className="view-all-reviews-btn">
                      View All Reviews
                    </a> */}
                </div>
              </div>
              <div className="col-12 my-2">{activityById.data.attributes.cancellationPolicyText}</div>
            </div>
          </div>
        )}
        <GuestReviews activityById={activityById} />
        <SimilarExperiences allActivitiesData={allActivitiesData} activityById={activityById} />
        <Faqs faqs={faqs} />
        <SignUpToExperienceOurPlatform />
      </main>
    </Fragment>
  );
};

export default Detail;