"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>
                                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/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>
    );
}
