"use client";
import { useRouter, useSearchParams } from "next/navigation";
import { useState, useEffect } from "react";
import Link from "next/link";

export default function FilterableList() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [filter, setFilter] = useState("All");

  useEffect(() => {
    router.replace(`/portfolio?filter=${filter}`, { scroll: false });
  }, [filter]);

  useEffect(() => {
    const queryFilter = searchParams.get("filter") || "All";
    setFilter(queryFilter);
  }, [searchParams]);

  const handleFilterChange = (e) => {
    const newFilter = e.target.value;
    setFilter(newFilter);
    router.replace(`/portfolio?filter=${newFilter}`, { scroll: false });
  };
  return (
    <div>
      {/* Mobile */}
      <div className="portfolio__form d-xl-none d-md-block">
        <div className="form-grp select-grp">
          <select
            className="orderby"
            value={filter}
            onChange={handleFilterChange}
          >
            <option value="All">All</option>
            <option value="Tech">Tech/AI</option>
            <option value="Online-Businesses">Online Businesses</option>
            <option value="Video-Games">Video Games</option>
            <option value="Restaurants">Restaurants</option>
            <option value="Startups">Startups</option>
            <option value="Aerospace">Avionics/Aerospace</option>
            <option value="Professional-Services">Professional Services</option>
            <option value="Travel">Travel</option>
            <option value="Auto-Industry">Auto Industry</option>
            <option value="Construction">Construction</option>
            <option value="Law">LAW</option>
          </select>
        </div>
      </div>

      <div className="portfolio__form d-xl-flex d-none">
        <button
          type="button"
          className={
            "btn portfolio-btn " + (filter === "All" ? "selected" : "")
          }
          onClick={() => setFilter("All")}
        >
          All
        </button>
        <button
          type="button"
          className={
            "btn portfolio-btn " + (filter === "Tech" ? "selected" : "")
          }
          onClick={() => setFilter("Tech")}
        >
          Tech/AI
        </button>
        <button
          type="button"
          className={
            "btn portfolio-btn " +
            (filter === "Online-Businesses" ? "selected" : "")
          }
          onClick={() => setFilter("Online-Businesses")}
        >
          Online Businesses
        </button>
        <button
          type="button"
          className={
            "btn portfolio-btn " + (filter === "Video-Games" ? "selected" : "")
          }
          onClick={() => setFilter("Video-Games")}
        >
          Video Games
        </button>
        <button
          type="button"
          className={
            "btn portfolio-btn " + (filter === "Restaurants" ? "selected" : "")
          }
          onClick={() => setFilter("Restaurants")}
        >
          Restaurants
        </button>
        <button
          type="button"
          className={
            "btn portfolio-btn " + (filter === "Startups" ? "selected" : "")
          }
          onClick={() => setFilter("Startups")}
        >
          Startups
        </button>
        <div
          className={
            "form-grp select-grp flex-grow-1 " +
            (filter === "Aerospace" ||
            filter === "Professional-Services" ||
            filter === "Travel" ||
            filter === "Auto-Industry" ||
            filter === "Construction" ||
            filter === "Law"
              ? "selected"
              : "")
          }
        >
          <select
            className="orderby"
            value={filter}
            onChange={handleFilterChange}
          >
            <option selected value="All" className="display-none">
              MORE INDUSTRIES
            </option>
            <option value="Aerospace">AVIONICS/AEROSPACE</option>
            <option value="Professional-Services">PROFESSIONAL SERVICES</option>
            <option value="Travel">TRAVEL</option>
            <option value="Auto-Industry">AUTO INDUSTRY</option>
            <option value="Construction">CONSTRUCTION</option>
            <option value="Law">LAW</option>
          </select>
        </div>
      </div>

      <div className="row justify-content-start">
        <div
          className={
            filter === "All" ||
            filter === "Restaurants" ||
            filter === "Startups"
              ? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
              : "display-none"
          }
        >
          <div className="services-item shine-animate-item">
            <div className="services-thumb">
              <Link
                href="/portfolio/the-spark-coffee"
                className="shine-animate"
              >
                <img src="/assets/img/custom/project-1.jpg" alt="Project 1" />
              </Link>
            </div>
            <div className="services-content">
              <h4 className="title">
                <Link href="/portfolio/the-spark-coffee">The Spark Coffee</Link>
              </h4>
              <p>
                Mobile coffee business offering on-the-go food and beverage
                services and catering to people across the United States.
              </p>
              <Link href="/portfolio/the-spark-coffee" className="btn">
                View Case Study
              </Link>
            </div>
          </div>
        </div>
        <div
          className={
            filter === "All" ||
            filter === "Aerospace" ||
            filter === "Travel" ||
            filter === "Professional-Services"
              ? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
              : "display-none"
          }
        >
          <div className="services-item shine-animate-item">
            <div className="services-thumb">
              <Link href="/portfolio/atlas-aviation" className="shine-animate">
                <img src="/assets/img/custom/project-2.jpg" alt="" />
              </Link>
            </div>
            <div className="services-content">
              <h4 className="title">
                <Link href="/portfolio/atlas-aviation">Atlas Aviation</Link>
              </h4>
              <p>
                Fully certified pilot training and aircraft rental company based
                in Tampa Florida offering services for both Jet and Turbo Prop.
              </p>
              <Link href="/portfolio/atlas-aviation" className="btn">
                View Case Study
              </Link>
            </div>
          </div>
        </div>
        <div
          className={
            filter === "All" ||
            filter === "Fruit" ||
            filter === "Online-Businesses" ||
            filter === "Tech"
              ? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
              : "display-none"
          }
        >
          <div className="services-item shine-animate-item">
            <div className="services-thumb">
              <Link
                href="/portfolio/social-celebrity"
                className="shine-animate"
              >
                <img src="/assets/img/custom/project-4.png" alt="" />
              </Link>
            </div>
            <div className="services-content">
              <h4 className="title">
                <Link href="/portfolio/social-celebrity">Social Celebrity</Link>
              </h4>
              <p>
                Social Media Enhancement company providing marketing services
                for Facebook, Instagram, TikTok, Twitter, Youtube and more.
              </p>
              <Link href="/portfolio/social-celebrity" className="btn">
                View Case Study
              </Link>
            </div>
          </div>
        </div>
        <div
          className={
            filter === "All" ||
            filter === "Video-Games" ||
            filter === "Online-Businesses" ||
            filter === "Tech"
              ? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
              : "display-none"
          }
        >
          <div className="services-item shine-animate-item">
            <div className="services-thumb">
              <Link href="/portfolio/discord-center" className="shine-animate">
                <img src="/assets/img/custom/project-3.png" alt="" />
              </Link>
            </div>
            <div className="services-content">
              <h4 className="title">
                <Link href="/portfolio/discord-center">Discord Center</Link>
              </h4>
              <p>
                Server Listing Website utilized by millions of users of the
                popular communicaton platform - "Discord" which specializes in
                growing Discord servers.
              </p>
              <Link href="/portfolio/discord-center" className="btn">
                View Case Study
              </Link>
            </div>
          </div>
        </div>
        <div
          className={
            filter === "All" ||
            filter === "Tech" ||
            filter === "Online-Businesses" ||
            filter === "Video-Games"
              ? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
              : "display-none"
          }
        >
          <div className="services-item shine-animate-item">
            <div className="services-thumb">
              <Link
                href="/portfolio/hytale-server-hosting"
                className="shine-animate"
              >
                <img src="/assets/img/custom/project-5.png" alt="" />
              </Link>
            </div>
            <div className="services-content">
              <h4 className="title">
                <Link href="/portfolio/hytale-server-hosting">
                  Hytale Server Hosting
                </Link>
              </h4>
              <p>
                Server Hosting company for the upcoming, highly anticipated
                videogame - Hytale, being developed by Tencent, the
                parent-company for TikTok & Riot Games.
              </p>
              <Link href="/portfolio/hytale-server-hosting" className="btn">
                View Case Study
              </Link>
            </div>
          </div>
        </div>
        <div
          className={
            filter === "All" || filter === "Auto-Industry"
              ? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
              : "display-none"
          }
        >
          <div className="services-item shine-animate-item">
            <div className="services-thumb">
              <Link
                href="/portfolio/multi-group-automotive"
                className="shine-animate"
              >
                <img src="/assets/img/custom/project-6.png" alt="" />
              </Link>
            </div>
            <div className="services-content">
              <h4 className="title">
                <Link href="/portfolio/multi-group-automotive">
                  Multi Group Automotive
                </Link>
              </h4>
              <p>
                Multi-purpose used car dealership located in Norcross, Georgia
                servicing North Metro Atlanta
              </p>
              <Link href="/portfolio/multi-group-automotive" className="btn">
                View Case Study
              </Link>
            </div>
          </div>
        </div>
        <div
          className={
            filter === "All" || filter === "Construction"
              ? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
              : "display-none"
          }
        >
          <div className="services-item shine-animate-item">
            <div className="services-thumb">
              <Link
                href="/portfolio/water-main-line-replacement"
                className="shine-animate"
              >
                <img src="/assets/img/custom/project-7.png" alt="" />
              </Link>
            </div>
            <div className="services-content">
              <h4 className="title">
                <Link href="/portfolio/water-main-line-replacement">
                  Water Main Line Replacement LLC
                </Link>
              </h4>
              <p>
                A water main line replacement company in Atlanta, Georgia that
                handles the installation and repair of essential water
                pipelines.
              </p>
              <Link
                href="/portfolio/water-main-line-replacement"
                className="btn"
              >
                View Case Study
              </Link>
            </div>
          </div>
        </div>
        <div
          className={
            filter === "All" ||
            filter === "Restaurants" ||
            filter === "Startups"
              ? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
              : "display-none"
          }
        >
          <div className="services-item shine-animate-item">
            <div className="services-thumb">
              <Link
                href="/portfolio/taqueria-del-mar"
                className="shine-animate"
              >
                <img src="/assets/img/custom/project-8.png" alt="" />
              </Link>
            </div>
            <div className="services-content">
              <h4 className="title">
                <Link href="/portfolio/taqueria-del-mar">Taqueria del Mar</Link>
              </h4>
              <p>
                Latin American eatery in Atlanta, Georgia that specializes in
                Mexican cuisine with a modern twist.
              </p>
              <Link href="/portfolio/taqueria-del-mar" className="btn">
                View Case Study
              </Link>
            </div>
          </div>
        </div>
        <div
          className={
            filter === "All" || filter === "Construction"
              ? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
              : "display-none"
          }
        >
          <div className="services-item shine-animate-item">
            <div className="services-thumb">
              <Link
                href="/portfolio/jenni-bg-plumbing"
                className="shine-animate"
              >
                <img src="/assets/img/custom/project-9.png" alt="" />
              </Link>
            </div>
            <div className="services-content">
              <h4 className="title">
                <Link href="/portfolio/jenni-bg-plumbing">
                  Jenni BG Plumbing
                </Link>
              </h4>
              <p>
                Plumbing company in Peachtree Corners, Georgia that fixes and
                installs pipes, fixtures, and other systems that carry water and
                waste in homes and businesses.
              </p>
              <Link href="/portfolio/jenni-bg-plumbing" className="btn">
                View Case Study
              </Link>
            </div>
          </div>
        </div>
        <div
          className={
            filter === "All" || filter === "Law"
              ? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
              : "display-none"
          }
        >
          <div className="services-item shine-animate-item">
            <div className="services-thumb">
              <Link
                href="/portfolio/the-gurvey-law-group"
                className="shine-animate"
              >
                <img src="/assets/img/custom/project-10.png" alt="" />
              </Link>
            </div>
            <div className="services-content">
              <h4 className="title">
                <Link href="/portfolio/the-gurvey-law-group">
                  The Gurvey Law Group
                </Link>
              </h4>
              <p>
                A law firm in Brookhaven, Georgia that specializes in
                investments, purchases, and sales.
              </p>
              <Link href="/portfolio/the-gurvey-law-group" className="btn">
                View Case Study
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}