import React, { useEffect, useState } from "react";
import ListingFilter from "./ListingFilter";
import ListingItems from "./ListingItems";
import Image from "next/image";
import { getActivitiesByFilters, getWishlists, setActivityFilters } from "../../redux/actions/activityAction";
import { useDispatch, useSelector } from "react-redux";
import { useRouter } from "next/router";

const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
  console.log("allActivitiesData", allActivitiesData);
  const [isFilterViewOpen, setIsFilterViewOpen] = useState(false);
  const [isGridViewOpen, setIsGridViewOpen] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const { activityFilters } = useSelector(sate => sate.activityFilters);

  const dispatch = useDispatch();
  const router = useRouter();
  const [size, setSize] = useState(768);
  const toggleGridViewDropdown = () => {
    setIsGridViewOpen(!isGridViewOpen);
  };
  const toggleFilterViewDropdown = () => {
    setIsFilterViewOpen(!isFilterViewOpen);
  };
  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };
  const [gridClass, setGridClass] = useState("col-md-3");

  const handleGridChange = className => {
    setGridClass(className);
  };


  useEffect(() => {
    const handleResize = () => {
      // console.log("Window Width:");
      setSize(window.innerWidth);
    };

    // Initial window width
    handleResize();

    // Add event listener for window resize
    window.addEventListener("resize", handleResize);

    // Clean up the event listener on component unmount
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  // USEEFFECT FOR FILTERS

  useEffect(() => {
    let filters = {};
    // console.log("subcategory here", activityFilters.startDate);
    if (activityFilters.category) {
      filters["category"] = { id: { $eq: activityFilters.category } };
    }
    if (activityFilters.subCategories?.length > 0) {
      filters["category"] = null;
      filters["subCategory"] = activityFilters.subCategories.map(item => {
        return { subCategory: { id: { $eq: item } } };
      });
    }
    if (activityFilters.activityType) {
      filters["activityType"] = activityFilters.activityType;
    }
    if (activityFilters.startDate) {
      filters["fromDate"] = activityFilters.startDate;
    }
    if (activityFilters.endDate) {
      filters["toDate"] = activityFilters.endDate;
    }
    if (activityFilters.minDuration > 0) {
      filters["minimumDuration"] = activityFilters.minDuration;
    }
    if (activityFilters.maxDuration > 0) {
      filters["maximumDuration"] = activityFilters.maxDuration;
    }
    if (activityFilters.minGroupSize > 0) {
      filters["minGroupSize"] = activityFilters.minGroupSize;
    }
    if (activityFilters.maxGroupSize > 0) {
      filters["maxGroupSize"] = activityFilters.maxGroupSize;
    }
    if (activityFilters.minAge > 0) {
      filters["ageLowerLimit"] = activityFilters.minAge;
    }
    if (activityFilters.sorting) {
      filters["sort"] = activityFilters.sorting;
    }
    if (activityFilters.priceUpperLimit) {
      filters["priceUpperLimit"] = activityFilters.priceUpperLimit;
    }
    // console.log("subcategory >>", filters);
    dispatch(
      getActivitiesByFilters({
        subCategory: filters.subCategory,
        category: filters.category,
        activityType: filters.activityType,
        fromDate: filters.fromDate,
        toDate: filters.toDate,
        minimumDuration: filters.minimumDuration,
        maximumDuration: filters.maximumDuration,
        minGroupSize: filters.minGroupSize,
        maxGroupSize: filters.maxGroupSize,
        ageLowerLimit: filters.ageLowerLimit,
        sort: filters.sort,
        priceUpperLimit: filters.priceUpperLimit
      })
    );
  }, [activityFilters]);

  return (
    <>
      <section className="listing-inner-session">
        <div className="container-fluid">
          <div className="row">
            <div className="col-md-6">{/* <h3 className="heading03">Sub Category Tags:</h3> */}</div>
            <div className="col-md-6">
              <div className="filter-dd">
                <div className="filter-view box-inner">
                  <a onClick={toggleFilterViewDropdown}>
                    <span className="image-container">
                      <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/filter-view.svg" />
                    </span>
                  </a>
                </div>
                <div className="grid-view box-inner">
                  <a onClick={toggleGridViewDropdown}>
                    <span className="image-container">
                      <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/grid-view.svg" />
                    </span>
                  </a>
                  <div className={`inner-content ${isGridViewOpen ? "open" : ""}`}>
                    <div className="top-head">
                      <div className="">View By</div>
                      <div className="close-btn" onClick={toggleGridViewDropdown}>
                        <span className="image-container">
                          <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/close-icon.svg" />
                        </span>
                      </div>
                    </div>
                    <ul className="list-by">
                      <li>
                        <input className="form-check-labe" type="radio" id="3 Grid View" name="gridView" onClick={() => handleGridChange("col-md-4")} />
                        <label htmlFor="3 Grid View">3 Grid View</label>
                      </li>
                      <li>
                        <input className="form-check-labe" type="radio" id="4 Grid View" name="gridView" onClick={() => handleGridChange("col-md-3")} defaultChecked />
                        <label htmlFor="4 Grid View">4 Grid View</label>
                      </li>
                    </ul>
                  </div>
                </div>
                <div className="sort-by box-inner">
                  <a onClick={toggleDropdown}>
                    <span className="image-container">
                      <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/sort-by.svg" />
                    </span>
                  </a>
                  <div className={`inner-content ${isOpen ? "open" : ""}`}>
                    <div className="top-head">
                      <div className="">Sort By</div>
                      <div className="close-btn" onClick={toggleDropdown}>
                        <span className="image-container">
                          <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/close-icon.svg" />
                        </span>
                      </div>
                    </div>
                    <ul className="list-by">
                      <li>
                        <input
                          className="form-check-labe"
                          onChange={e => {
                            dispatch(setActivityFilters({ filters: { ...activityFilters, sorting: e.target.value } }));
                            // console.log(e.target.value);
                          }}
                          type="radio"
                          id="Price - High to Low"
                          name="sort"
                          value={"descending"}
                        />
                        <label htmlFor="Price - High to Low">Price - High to Low</label>
                      </li>
                      <li>
                        <input
                          className="form-check-labe"
                          onChange={e => {
                            dispatch(setActivityFilters({ filters: { ...activityFilters, sorting: e.target.value } }));
                            // console.log(e.target.value);
                          }}
                          type="radio"
                          id="Price - Low to High"
                          name="sort"
                          value={"ascending"}
                        />
                        <label htmlFor="Price - Low to High">Price - Low to High</label>
                      </li>
                      {/* <li>
                        <input className="form-check-labe" type="radio" id="Most Rated" name="sort" />
                        <label htmlFor="Most Rated">Most Rated</label>
                      </li>
                      <li>
                        <input className="form-check-labe" type="radio" id="Most Popular" name="sort" />
                        <label htmlFor="Most Popular">Most Popular</label>
                      </li> */}
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="row ">
            {(isFilterViewOpen || size > 768) && (
              <>
                <div className={`col-md-3 first-block-content ${isFilterViewOpen ? "show" : ""}`}>
                  <ListingFilter />
                </div>
              </>
            )}

            <div className="col-md-9">
              <ListingItems allActivitiesData={allActivitiesData} loading={loading} gridClass={gridClass} totalCount={totalCount} />
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default ListingInner;