import React, { Fragment, useEffect, useState } from "react";
import DetailGallery from "./DetailGallery";
import DetailInfo from "./DetailInfo";
import { Breadcrumb } from "react-bootstrap";
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";

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, currentPage: router.query.page }));
  }, [activityById, router]);

  // console.log("faqs=>", faqs);
  console.log("activityById", activityById);
  console.log("loadedUser", loadedUser);
  return (
    <Fragment>
      <main>
        <section className="main-mt">
          <div className="container mt-5">
            <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-5">
                <DetailGallery activityById={activityById}></DetailGallery>
              </div>
              <div className="col-xl-7 listing-wrapper">
                <DetailInfo activityById={activityById}></DetailInfo>
              </div>
            </div>
            <DetailSchedule activityById={activityById} />
          </div>
        </section>
        <GuestReviews activityById={activityById} />
        <SimilarExperiences allActivitiesData={allActivitiesData} />
        <Faqs faqs={faqs} />
        <SignUpToExperienceOurPlatform />
      </main>
    </Fragment>
  );
};

export default Detail;