import Isotope from "isotope-layout";
import Link from "next/link";
import { Fragment, useEffect, useRef, useState } from "react";

const CaseStudies = () => {
  const isotope = useRef();
  const [filterKey, setFilterKey] = useState("*");
  const [visibleItems, setVisibleItems] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      isotope.current = new Isotope(".image_load", {
        itemSelector: ".grid-item",
        percentPosition: true,
        masonry: {
          columnWidth: ".grid-item",
        },
      });

      setVisibleItems(document.querySelectorAll(".grid-item"));
    }, 1000);
  }, []);

  useEffect(() => {
    if (isotope.current) {
      const filterSelector = filterKey === "*" ? "*" : `.${filterKey}`;
      isotope.current.arrange({ filter: filterSelector });

      const items = document.querySelectorAll(".grid-item");
      const visible = Array.from(items).filter(item =>
        filterKey === "*" ? true : item.classList.contains(filterKey)
      );
      setVisibleItems(visible);
    }
  }, [filterKey]);

  const handleFilterKeyChange = (key) => () => {
    setFilterKey(key);
  };

  const activeBtn = (value) =>
    value === filterKey ? "current_menu_item" : "";

  return (
    <Fragment>
      <div className="row case-study-bg">
        <div className="col-lg-12">
          <div className="consen-section-title upper text-center pb-5">
            <div className="consen-section-title">
              <h2>Our Open <span>positions</span></h2>
            </div>
          </div>
        </div>
        <div className="portfolio-shape">
          <div className="port-shape-thumb rotateme">
            <img src="/assets/images/elements/element-3.webp" alt="" />
          </div>
        </div>
        <div className="col-lg-12">
          <div className="portfolio_nav text-center">
            <div className="portfolio_menu">
              <ul className="menu-filtering list-unstyled">

                <li
                  className={`c-pointer mb-3 ${activeBtn("*")}`}
                  onClick={handleFilterKeyChange("*")}
                  style={{ display: "inline-block", margin: "0 10px" }}
                >
                  All Items
                </li>
                <div className="d-flex justify-content-center flex-wrap mb-3">
                  <li
                    className={`c-pointer mx-2 ${activeBtn("web")}`}
                    onClick={handleFilterKeyChange("web")}
                  >
                    Website Development
                  </li>
                  <li
                    className={`c-pointer mx-2 ${activeBtn("dm")}`}
                    onClick={handleFilterKeyChange("dm")}
                  >
                    Social Media & Digital Marketing
                  </li>
                  <li
                    className={`c-pointer mx-2 ${activeBtn("seo")}`}
                    onClick={handleFilterKeyChange("seo")}
                  >
                    Search Engine Optimization (SEO)
                  </li>
                </div>

                <div className="d-flex justify-content-center flex-wrap">
                  <li
                    className={`c-pointer mx-2 ${activeBtn("mad")}`}
                    onClick={handleFilterKeyChange("mad")}
                  >
                    Mobile App Development

                  </li>
                  <li
                    className={`c-pointer mx-2 ${activeBtn("uiux")}`}
                    onClick={handleFilterKeyChange("uiux")}
                  >
                    UI/UX Designing

                  </li>
                  <li
                    className={`c-pointer mx-2 ${activeBtn("grap")}`}
                    onClick={handleFilterKeyChange("grap")}
                  >
                    Graphic Designing

                  </li>
                </div>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div className="row image_load d-flex flex-wrap justify-content-center">
        <div className="col-lg-4 col-md-6 grid-item web">
          <div className="case-study-single-box">
            <div className="case-study-thumb2">
              <img src="/assets/images/careers/web-dev.webp" alt="Website Development Careers" />
              <div className="case-study-content">
                <div className="case-study-content-inner3">
                  <h6>5 Feb, 2025</h6>
                  <div className="case-study-title">
                    <h7 className="full-time"> Full Time </h7>
                    <h3>
                      <Link legacyBehavior href="/service/website-development-company">
                        <a className="changeColor">Website Development Careers</a>
                      </Link>
                    </h3>
                    <div className="big-box">
                      <Link legacyBehavior href="#"><a>Apply</a></Link>
                      <Link legacyBehavior href="/contact"><a>Contact</a></Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="col-lg-4 col-md-6 grid-item seo">
          <div className="case-study-single-box">
            <div className="case-study-thumb2">
              <img src="/assets/images/careers/seo.webp" alt="Search Engine Optimization Careers
" />
              <div className="case-study-content">
                <div className="case-study-content-inner3">
                  <h6>5 Feb, 2025</h6>
                  <div className="case-study-title">
                    <h7 className="full-time"> Full Time </h7>
                    <h3>
                      <Link legacyBehavior href="/service/search-engine-optimization-seo-content-writing">
                        <a className="changeColor">Search Engine Optimization Careers
                        </a>
                      </Link>
                    </h3>
                    <div className="big-box">
                      <Link legacyBehavior href="#"><a>Apply</a></Link>
                      <Link legacyBehavior href="/contact"><a>Contact</a></Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="col-lg-4 col-md-6 grid-item dm">
          <div className="case-study-single-box">
            <div className="case-study-thumb2">
              <img src="/assets/images/careers/social-media.webp" alt="Social Media Marketing Career" />
              <div className="case-study-content">
                <div className="case-study-content-inner3">
                  <h6>5 Feb, 2025</h6>
                  <div className="case-study-title">
                    <h7 className="full-time"> Full Time </h7>
                    <h3>
                      <Link legacyBehavior href="/service/digital-solutions">
                        <a className="changeColor">Social Media Marketing Career</a>
                      </Link>
                    </h3>
                    <div className="big-box">
                      <Link legacyBehavior href="#"><a>Apply</a></Link>
                      <Link legacyBehavior href="/contact"><a>Contact</a></Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>


        <div className="col-lg-4 col-md-6 grid-item mad">
          <div className="case-study-single-box">
            <div className="case-study-thumb2">
              <img src="/assets/images/careers/mobile.webp" alt="Mobile App Development Careers" />
              <div className="case-study-content">
                <div className="case-study-content-inner3">
                  <h6>5 Feb, 2025</h6>
                  <div className="case-study-title">
                    <h7 className="full-time"> Full Time </h7>
                    <h3>
                      <Link legacyBehavior href="/service/digital-solutions">
                        <a className="changeColor">Mobile App Development Careers</a>
                      </Link>
                    </h3>
                    <div className="big-box">
                      <Link legacyBehavior href="#"><a>Apply</a></Link>
                      <Link legacyBehavior href="/contact"><a>Contact</a></Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>


        <div className="col-lg-4 col-md-6 grid-item uiux">
          <div className="case-study-single-box">
            <div className="case-study-thumb2">
              <img src="/assets/images/careers/ui-ux.webp" alt="UI/UX Designing Careers" />
              <div className="case-study-content">
                <div className="case-study-content-inner3">
                  <h6>5 Feb, 2025</h6>
                  <div className="case-study-title">
                    <h7 className="full-time"> Full Time </h7>
                    <h3>
                      <Link legacyBehavior href="/service/digital-solutions">
                        <a className="changeColor">UI/UX Designing Careers</a>
                      </Link>
                    </h3>
                    <div className="big-box">
                      <Link legacyBehavior href="#"><a>Apply</a></Link>
                      <Link legacyBehavior href="/contact"><a>Contact</a></Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="col-lg-4 col-md-6 grid-item grap">
          <div className="case-study-single-box">
            <div className="case-study-thumb2">
              <img src="/assets/images/careers/graphic.webp" alt="Graphic Designing Careers" />
              <div className="case-study-content">
                <div className="case-study-content-inner3">
                  <h6>5 Feb, 2025</h6>
                  <div className="case-study-title">
                    <h7 className="full-time"> Full Time </h7>
                    <h3>
                      <Link legacyBehavior href="/service/digital-solutions">
                        <a className="changeColor">Graphic Designing Careers</a>
                      </Link>
                    </h3>
                    <div className="big-box">
                      <Link legacyBehavior href="#"><a>Apply</a></Link>
                      <Link legacyBehavior href="/contact"><a>Contact</a></Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {visibleItems.length === 0 && (
        <div className="text-center py-5">
          <h5>No Results Found</h5>
        </div>
      )}
    </Fragment>
  );
};

export default CaseStudies;