import { useState } from "react";
import { useNotesStore } from "../../store/notesStore";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown, faMagnifyingGlass, faSliders } from "@fortawesome/free-solid-svg-icons";
import Button from "../ui/Button";

export default function NoteSearch() {
  const search = useNotesStore((state) => state.search);
  const setSearch = useNotesStore((state) => state.setSearch);
  const [showMenu, setShowMenu] = useState(false);

  return (
    <div className="relative">
      <div className="flex items-center gap-3 rounded-full border border-slate-200 bg-white/70 px-4 py-2 text-[var(--muted)] shadow-sm">
        <FontAwesomeIcon icon={faMagnifyingGlass} className="h-4 w-4" />
        <input
          value={search}
          onChange={(event) => setSearch(event.target.value)}
          className="flex-1 bg-transparent text-sm text-[var(--ink)] outline-none placeholder:text-[var(--muted)]"
          placeholder="Search memos..."
          aria-label="Not ara"
        />
        <Button
          type="button"
          onClick={() => setShowMenu((prev) => !prev)}
          className="text-[var(--muted)] hover:text-[var(--ink)]"
          aria-label="Ayarlar"
          aria-expanded={showMenu}
          radius="none"
        >
          <FontAwesomeIcon icon={faSliders} className="h-4 w-4" />
        </Button>
      </div>
      {showMenu && (
        <div className="absolute right-0 z-40 mt-3 w-64 rounded-2xl border border-slate-200 bg-white p-4 shadow-lg">
          <div className="flex items-center justify-between gap-4">
            <span className="text-sm font-medium text-[var(--ink)]">Direction</span>
            <Button
              type="button"
              radius="xl"
              className="flex items-center gap-2 border border-slate-200 px-3 py-1 text-sm text-[var(--ink)]"
            >
              Descending
              <FontAwesomeIcon icon={faChevronDown} className="h-3 w-3 text-[var(--muted)]" />
            </Button>
          </div>
          <div className="mt-3 flex items-center justify-between gap-4">
            <span className="text-sm font-medium text-[var(--ink)]">Layout</span>
            <Button
              type="button"
              radius="xl"
              className="flex items-center gap-2 border border-slate-200 px-3 py-1 text-sm text-[var(--ink)]"
            >
              List
              <FontAwesomeIcon icon={faChevronDown} className="h-3 w-3 text-[var(--muted)]" />
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}
