Filters 6

import React, { useState } from "react";
import { useMediaQuery } from "@/hooks/use-media-query";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetOverlay,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";
import { Cancel, FilterList, KeyboardArrowDown, Search } from "relume-icons";
import { Badge } from "@/components/ui/badge";

export const Filters6 = () => {
  const [searchKeyword, setSearchKeyword] = useState("");

  const isMobile = useMediaQuery("(max-width: 767px)");
  const isTablet = useMediaQuery("(max-width: 991px)");

  return (
    <section className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="mb-12 w-full max-w-lg md:mb-18 lg:mb-20">
          <h1 className="mb-5 text-h2 font-bold md:mb-6">Collection</h1>
          <p className="text-medium">Lorem ipsum dolor sit amet.</p>
        </div>
        <div className="relative mb-3.5 flex flex-col flex-wrap items-end justify-between gap-6 md:mb-6 md:flex-row md:items-center lg:flex-nowrap">
          <div className="flex w-full flex-1 flex-col gap-4 sm:flex-row sm:gap-6 md:w-auto">
            <div className="relative flex flex-1 items-center lg:max-w-xs">
              <Input
                placeholder="Search"
                icon={<Search className="size-6 shrink-0 text-scheme-text" />}
                value={searchKeyword}
                onChange={(e) => setSearchKeyword(e.target.value)}
                className="w-full"
              />
            </div>
            {isMobile ? (
              <Sheet>
                <SheetTrigger asChild>
                  <Button className="gap-3 py-2" variant="secondary">
                    <FilterList className="size-6 text-scheme-text" />
                    <span className="underline">Filters</span>
                  </Button>
                </SheetTrigger>
                <SheetOverlay />
                <SheetContent side="bottom" className="h-screen w-full">
                  <div className="overflow-scroll px-[5%]">
                    <SheetHeader className="flex flex-row items-end justify-between py-4 text-left">
                      <SheetTitle className="mb-0 text-2xl font-bold md:text-h5">
                        Filters
                      </SheetTitle>
                      <SheetClose className="static" />
                    </SheetHeader>
                    <div className="-mx-[5%] border-b border-scheme-border" />
                    <div className="mt-6">
                      <FilterSections />
                    </div>
                  </div>
                  <SheetFooter className="sticky bottom-0 border-t border-scheme-border bg-white px-[5%] py-2 md:py-3">
                    <div className="flex w-full justify-between gap-4">
                      <Button variant="link" size="link">
                        Clear all
                      </Button>
                      <Button>Apply</Button>
                    </div>
                  </SheetFooter>
                </SheetContent>
              </Sheet>
            ) : (
              <DropdownMenu>
                <DropdownMenuTrigger className="flex items-center justify-center gap-3 border border-scheme-border px-6 py-2">
                  <FilterList className="size-6 text-scheme-text" />
                  <span className="underline">Filters</span>
                </DropdownMenuTrigger>
                <DropdownMenuContent
                  className="max-h-[50vh] w-[25rem] overflow-y-auto px-6 pt-6 pb-0"
                  align={isTablet ? "end" : "start"}
                >
                  <h3 className="mb-2 text-h5 font-bold">Filters</h3>
                  <FilterSections />
                  <div className="sticky bottom-0 -mx-6 border-t border-scheme-border bg-white px-6 py-3">
                    <div className="flex w-full justify-between gap-4">
                      <Button variant="link" size="link">
                        Clear all
                      </Button>
                      <Button size="sm">Apply</Button>
                    </div>
                  </div>
                </DropdownMenuContent>
              </DropdownMenu>
            )}
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger className="-mr-2 flex items-center gap-2">
              <span>Sort by</span>
              <KeyboardArrowDown className="shrink-0 text-scheme-text transition-transform duration-300" />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              {[
                "Most Popular",
                "Most Recent",
                "Name: A to Z",
                "Name: Z to A",
                "Price: Low to High",
                "Price: High to Low",
              ].map((option) => (
                <DropdownMenuItem key={option}>{option}</DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
        <div>
          <div className="mb-8 flex w-full items-center justify-between gap-8">
            <Badge className="flex items-center py-2 pr-3 pl-4 text-regular font-normal">
              <span>Tag</span>
              <Cancel className="ml-2 size-5.5 flex-none cursor-pointer text-scheme-text" />
            </Badge>
            <span className="self-end text-small">Showing 0 of 100</span>
          </div>
          <div className="min-h-[200vh] w-full border-2 border-dashed border-neutral-darkest/15" />
          <div className="border border-scheme-border p-[2.9rem] text-center">
            <h6 className="mb-2 text-h6 font-bold">No results found.</h6>
            <p>There are no results with this criteria. Try changing your search.</p>
          </div>
        </div>
      </div>
    </section>
  );
};

const FilterSections = () => {
  const [selectedCheckboxes, setSelectedCheckboxes] = useState(new Set());
  const [selectedRadioTwo, setSelectedRadioTwo] = useState("All");
  const [selectedOptions, setSelectedOptions] = useState(new Set(["Option One"]));
  const [selectedRadioFour, setSelectedRadioFour] = useState("Option One");
  const [selectedValue, setSelectedValue] = useState("");
  const [sliderValue, setSliderValue] = useState(0);
  const [rangeValue, setRangeValue] = useState([0]);
  const [switchEnabled, setSwitchEnabled] = useState(false);

  const handleCheckboxChange = (option: string) => {
    setSelectedCheckboxes((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(option)) {
        newSet.delete(option);
      } else {
        newSet.add(option);
      }
      return newSet;
    });
  };

  const handleOptionChange = (option: string) => {
    setSelectedOptions((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(option)) {
        newSet.delete(option);
      } else {
        newSet.add(option);
      }
      return newSet;
    });
  };

  const clearFilter = (
    filterType: "checkboxes" | "radio" | "radioFour" | "options" | "select" | "slider" | "range",
  ) => {
    switch (filterType) {
      case "checkboxes":
        setSelectedCheckboxes(new Set());
        break;
      case "radio":
        setSelectedRadioTwo("All");
        break;
      case "radioFour":
        setSelectedRadioFour("");
        break;
      case "options":
        setSelectedOptions(new Set());
        break;
      case "select":
        setSelectedValue("");
        break;
      case "slider":
        setSliderValue(0);
        break;
      case "range":
        setRangeValue([0]);
        break;
      default:
        break;
    }
  };

  return (
    <div>
      <div className="border-b border-scheme-border">
        <div className="mb-7 lg:mb-5">
          <div className="flex items-center justify-between py-4">
            <h3 className="text-medium font-semibold">Filter One</h3>
            <Button variant="link" size="link" onClick={() => clearFilter("checkboxes")}>
              Clear
            </Button>
          </div>
          <div className="grid grid-cols-1">
            {["Option One", "Option Two", "Option Three", "Option Four", "Option Five"].map(
              (option) => (
                <label key={option} className="flex items-center gap-x-3 py-2">
                  <Checkbox
                    checked={selectedCheckboxes.has(option)}
                    onCheckedChange={() => handleCheckboxChange(option)}
                  />
                  <span>{option}</span>
                </label>
              ),
            )}
          </div>
        </div>
      </div>
      <div className="border-b border-scheme-border">
        <div className="mb-7 lg:mb-5">
          <div className="flex items-center justify-between py-4">
            <h3 className="text-medium font-semibold">Filter Two</h3>
            <Button variant="link" size="link" onClick={() => clearFilter("radio")}>
              Clear
            </Button>
          </div>
          <RadioGroup
            className="grid grid-cols-1 gap-0"
            value={selectedRadioTwo}
            onValueChange={setSelectedRadioTwo}
          >
            {["All", "Option One", "Option Two", "Option Three", "Option Four", "Option Five"].map(
              (option) => (
                <div key={option} className="flex items-center gap-x-3 py-2">
                  <RadioGroupItem value={option} id={option} shape="check" />
                  <Label htmlFor={option}>{option}</Label>
                </div>
              ),
            )}
          </RadioGroup>
        </div>
      </div>
      <div className="border-b border-scheme-border">
        <div className="mb-7 lg:mb-5">
          <div className="flex items-center justify-between py-4">
            <h3 className="text-medium font-semibold">Filter Three</h3>
            <Button variant="link" size="link" onClick={() => clearFilter("options")}>
              Clear
            </Button>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            {["Option One", "Option Two", "Option Three", "Option Four", "Option Five"].map(
              (option) => (
                <div key={option} className="flex items-center">
                  <Checkbox
                    id={`filter-three-${option}`}
                    className="hidden"
                    checked={selectedOptions.has(option)}
                    onCheckedChange={() => handleOptionChange(option)}
                  />
                  <label
                    htmlFor={`filter-three-${option}`}
                    className={`inline-flex cursor-pointer items-center justify-center border border-scheme-border px-4 py-2 text-base transition-colors ${
                      selectedOptions.has(option)
                        ? "bg-neutral-darkest text-white"
                        : "bg-transparent"
                    }`}
                  >
                    {option}
                  </label>
                </div>
              ),
            )}
          </div>
        </div>
      </div>
      <div className="border-b border-scheme-border">
        <div className="mb-7 lg:mb-5">
          <div className="flex items-center justify-between py-4">
            <h3 className="text-medium font-semibold">Filter Four</h3>
            <Button variant="link" size="link" onClick={() => clearFilter("radioFour")}>
              Clear
            </Button>
          </div>
          <RadioGroup
            className="flex flex-wrap gap-2"
            value={selectedRadioFour}
            onValueChange={setSelectedRadioFour}
          >
            {["Option One", "Option Two", "Option Three", "Option Four", "Option Five"].map(
              (option) => (
                <div key={option} className="flex items-center">
                  <RadioGroupItem value={option} id={`filter-four-${option}`} className="hidden" />
                  <label
                    htmlFor={`filter-four-${option}`}
                    className={`inline-flex cursor-pointer items-center justify-center border border-scheme-border px-4 py-2 text-base transition-colors ${
                      selectedRadioFour === option
                        ? "bg-neutral-darkest text-white"
                        : "bg-transparent"
                    }`}
                  >
                    {option}
                  </label>
                </div>
              ),
            )}
          </RadioGroup>
        </div>
      </div>
      <div className="border-b border-scheme-border">
        <div className="mb-7 lg:mb-5">
          <div className="flex items-center justify-between py-4">
            <h3 className="text-medium font-semibold">Filter Six</h3>
            <Button variant="link" size="link" onClick={() => clearFilter("select")}>
              Clear
            </Button>
          </div>
          <Select value={selectedValue} onValueChange={setSelectedValue}>
            <SelectTrigger>
              <SelectValue placeholder="Select" />
            </SelectTrigger>
            <SelectContent>
              {["Option One", "Option Two", "Option Three"].map((option) => (
                <SelectItem key={option} value={option.toLowerCase().replace(" ", "-")}>
                  {option}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>
      <div className="border-b border-scheme-border">
        <div className="mb-7 lg:mb-5">
          <div className="flex items-center justify-between py-4">
            <h3 className="text-medium font-semibold">Filter Seven</h3>
            <Button variant="link" size="link" onClick={() => clearFilter("slider")}>
              Clear
            </Button>
          </div>
          <div className="mt-4 w-full px-3">
            <Slider
              value={[sliderValue]}
              onValueChange={(value) => setSliderValue(value[0])}
              min={0}
              step={1}
            />
            <div className="mt-3 flex justify-between text-small">
              <span className="text-medium">{sliderValue}</span>
            </div>
          </div>
        </div>
      </div>
      <div className="border-b border-scheme-border">
        <div className="mb-7 lg:mb-5">
          <div className="flex items-center justify-between py-4">
            <h3 className="text-medium font-semibold">Filter Eight</h3>
            <Button variant="link" size="link" onClick={() => clearFilter("range")}>
              Clear
            </Button>
          </div>
          <div className="mt-4 w-full px-3">
            <Slider value={rangeValue} onValueChange={setRangeValue} min={0} max={100} step={1} />
            <div className="mt-3 flex justify-between text-small">
              <span className="text-medium">0</span>
              <span className="text-medium">100</span>
            </div>
          </div>
        </div>
      </div>
      <div className="mb-7 lg:mb-5">
        <h3 className="py-4 text-medium font-semibold">Filter Nine</h3>
        <div className="w-full">
          <Switch id="feature-nine" checked={switchEnabled} onCheckedChange={setSwitchEnabled} />
        </div>
      </div>
    </div>
  );
};