Filters 4

import { useEffect, useState } from "react";
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";

export const Filters4 = () => {
  const [key, setKey] = useState(0);

  const handleClearAll = () => {
    setKey((prev) => prev + 1);
  };
  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="mb-6 flex items-center justify-between">
          <Sheet>
            <SheetTrigger asChild>
              <Button className="gap-3" 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 lg:max-h-[80vh] lg:max-w-[40rem]"
            >
              <div className="overflow-scroll px-[5%] lg:px-12">
                <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 lg:-mx-12" />
                <div className="mt-6">
                  <FilterSections key={key} onClearAll={handleClearAll} />
                </div>
              </div>
              <SheetFooter className="sticky bottom-0 border-t border-scheme-border bg-white px-[5%] py-2 md:py-3 lg:px-12 lg:py-3">
                <div className="flex w-full justify-between gap-4">
                  <Button variant="link" size="link" onClick={handleClearAll}>
                    Clear all
                  </Button>
                  <Button>Apply</Button>
                </div>
              </SheetFooter>
            </SheetContent>
          </Sheet>
          <DropdownMenu>
            <DropdownMenuTrigger className="-mr-2 flex items-center gap-2">
              <p className="whitespace-nowrap">Sort by</p>
              <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">
            <div className="flex items-center bg-scheme-foreground py-2 pr-3 pl-4">
              <span>Tag</span>
              <Cancel className="ml-2 size-5.5 flex-none cursor-pointer text-scheme-text" />
            </div>
            <span className="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 = ({ onClearAll }: { onClearAll: () => void }) => {
  const [selectedCheckboxes, setSelectedCheckboxes] = useState(new Set());
  const [selectedRadio, setSelectedRadio] = useState("All");
  const [selectedButtonCheckboxes, setSelectedButtonCheckboxes] = useState<Set<string>>(
    new Set(["Option One"]),
  );
  const [selectedButtonRadio, setSelectedButtonRadio] = useState("Option One");
  const [searchKeyword, setSearchKeyword] = useState("");
  const [selectValue, setSelectValue] = useState("");
  const [sliderValue, setSliderValue] = useState(0);
  const [rangeValue, setRangeValue] = useState([0]);
  const [switchEnabled, setSwitchEnabled] = useState(false);

  useEffect(() => {
    setSelectedCheckboxes(new Set());
    setSelectedRadio("All");
    setSelectedButtonCheckboxes(new Set(["Option One"]));
    setSelectedButtonRadio("Option One");
    setSearchKeyword("");
    setSelectValue("");
    setSliderValue(0);
    setRangeValue([0]);
    setSwitchEnabled(false);
  }, [onClearAll]);

  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) => {
    setSelectedButtonCheckboxes((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"
      | "search"
      | "select"
      | "slider"
      | "range",
  ) => {
    switch (filterType) {
      case "checkboxes":
        setSelectedCheckboxes(new Set());
        break;
      case "radio":
        setSelectedRadio("All");
        break;
      case "radioFour":
        setSelectedButtonRadio("");
        break;
      case "options":
        setSelectedButtonCheckboxes(new Set());
        break;
      case "search":
        setSearchKeyword("");
        break;
      case "select":
        setSelectValue("");
        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 md:py-5">
            <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 md:py-5">
            <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={selectedRadio}
            onValueChange={setSelectedRadio}
          >
            {["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 md:py-5">
            <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={selectedButtonCheckboxes.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 ${
                      selectedButtonCheckboxes.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 md:py-5">
            <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={selectedButtonRadio}
            onValueChange={setSelectedButtonRadio}
          >
            {["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 ${
                      selectedButtonRadio === 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 md:py-5">
            <h3 className="text-medium font-semibold">Filter Five</h3>
            <Button variant="link" size="link" onClick={() => clearFilter("search")}>
              Clear
            </Button>
          </div>
          <Input
            placeholder="Keyword"
            icon={<Search className="size-6 shrink-0 text-scheme-text" />}
            value={searchKeyword}
            onChange={(e) => setSearchKeyword(e.target.value)}
          />
        </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 md:py-5">
            <h3 className="text-medium font-semibold">Filter Six</h3>
            <Button variant="link" size="link" onClick={() => clearFilter("select")}>
              Clear
            </Button>
          </div>
          <Select value={selectValue} onValueChange={setSelectValue}>
            <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 md:py-5">
            <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 md:py-5">
            <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">{rangeValue}</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 md:py-5">Filter Nine</h3>
        <div className="w-full">
          <Switch id="feature-nine" checked={switchEnabled} onCheckedChange={setSwitchEnabled} />
        </div>
      </div>
    </div>
  );
};