import React, { useEffect, useState } from "react";
import ListingFilter from "./ListingFilter";
import ListingItems from "./ListingItems";
import Image from "next/image";

const ListingInner = () => {
  const [isFilterViewOpen, setIsFilterViewOpen] = useState(false);
  const [isGridViewOpen, setIsGridViewOpen] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  
  const [size, setSize] = useState(768);
  const toggleGridViewDropdown = () => {
    setIsGridViewOpen(!isGridViewOpen);
  };
  const toggleFilterViewDropdown = () => {
    setIsFilterViewOpen(!isFilterViewOpen);
  };
  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };
  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);
    };
  }, []);

  return (
    <>
      <section className="listing-inner-session">
        <div className="container-fluid">
          <div className="row">
            <div className="col-12">
              <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 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" />
                        <label htmlFor="3 Grid View">3 Grid View</label>
                      </li>
                      <li>
                        <input className="form-check-labe" type="radio" id="4 Grid View" name="gridView" />
                        <label htmlFor="4 Grid View">4 Grid View</label>
                      </li>
                    </ul>
                  </div> */}
                </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" />
                        <label htmlFor="3 Grid View">3 Grid View</label>
                      </li>
                      <li>
                        <input className="form-check-labe" type="radio" id="4 Grid View" name="gridView" />
                        <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" type="radio" id="Price - High to Low" name="sort" />
                        <label htmlFor="Price - High to Low">Price - High to Low</label>
                      </li>
                      <li>
                        <input className="form-check-labe" type="radio" id="Price - Low to High" name="sort" />
                        <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 />
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default ListingInner;