import React, { useEffect, useRef, useState } from "react";
import "./Harvested_By_you.css";
import Sheared_Product_card from "../../common-components/sheared_Product_card/Sheared_Product_card";
import Green_round_btn from "../../common-components/common_btn/green_round_btn/Green_round_btn";
import { useDispatch, useSelector } from "react-redux";
import { getAllCategories } from "../../../features/master/masterSlice";
import Green_Outline_Btn from "../../common-components/common_btn/green_outline_btn/Green_Outline_Btn";

import ScrollAnimation from "react-animate-on-scroll";

function Harvested_By_you() {
  const STEP = 4;
  const [showAll, setShowAll] = useState(false);
  const sectionRef = useRef(null); // Reference to section for scrolling

  const category = useSelector((state) => state.master.categories);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getAllCategories());
  }, [dispatch]);

  const visibleCategories = showAll ? category : category.slice(0, STEP);

  const handleToggle = () => {
    if (showAll && sectionRef.current) {
      sectionRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
    }
    setShowAll(!showAll);
  };

  return (
    <section className="Harvested_By_you" ref={sectionRef}>
      <div className="container-fluid">
        <div className="heading_holder">
          <h3 className="heading_text">Trending Category</h3>
        </div>

        <div className="Sheared_product_holder">
          <div className="row">
            {visibleCategories.map((category, index) => (
              <div className="col-lg-3 col-md-3 col-sm-4 col-6" key={index}>
                {/* <ScrollAnimation animateIn={"slideInUp"}> */}
                  <Sheared_Product_card
                    category={category}
                    imgSrc={category.image}
                    productName={category.name}
                  />
                {/* </ScrollAnimation> */}
              </div>
            ))}
          </div>
        </div>

        {category.length > STEP && (
          <div className="see_more_btn_holder text-center mt-4">
            <Green_Outline_Btn
              btnText={showAll ? "See Less" : "See More"}
              onClick={handleToggle}
            />
          </div>
        )}
      </div>
    </section>
  );
}

export default Harvested_By_you;
