"use client";

import * as React from "react";
import MultiSelect, { type Option } from "./multiple-selector";

export function MultipleSelectorDemo() {
  const [value, setValue] = React.useState<Option[]>([]);

  // Sample options
  const frameworks = [
    { label: "Next.js", value: "nextjs" },
    { label: "React", value: "react" },
    { label: "Vue", value: "vue" },
    { label: "Angular", value: "angular" },
    { label: "Svelte", value: "svelte" },
    { label: "Remix", value: "remix" },
  ];

  // Sample options with groups
  const languages = [
    { label: "JavaScript", value: "js", type: "language" },
    { label: "TypeScript", value: "ts", type: "language" },
    { label: "Python", value: "py", type: "language" },
    { label: "Ruby", value: "rb", type: "language" },
    { label: "Go", value: "go", type: "language" },
    { label: "Rust", value: "rs", type: "language" },
    { label: "Java", value: "java", type: "language" },
    { label: "C#", value: "cs", type: "language" },
    { label: "HTML", value: "html", type: "markup" },
    { label: "CSS", value: "css", type: "markup" },
    { label: "SQL", value: "sql", type: "database" },
    { label: "PostgreSQL", value: "postgresql", type: "database" },
    { label: "MongoDB", value: "mongodb", type: "database" },
  ];

  // Custom search function
  const handleSearch = (searchTerm: string) => {
    if (!searchTerm) return languages;
    return languages.filter((language) =>
      language.label.toLowerCase().includes(searchTerm.toLowerCase())
    );
  };

  return (
    <div className="flex flex-col space-y-10">
      <div className="space-y-2">
        <h3 className="text-lg font-medium">Basic Example</h3>
        <div className="max-w-sm">
          <MultiSelect
            placeholder="Select frameworks..."
            defaultOptions={frameworks}
            value={value}
            onChange={setValue}
          />
        </div>
        <p className="text-sm text-muted-foreground">
          Selected: {value.map((v) => v.label).join(", ") || "None"}
        </p>
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-medium">With Search</h3>
        <div className="max-w-sm">
          <MultiSelect
            placeholder="Search languages..."
            defaultOptions={languages}
            onSearchSync={handleSearch}
          />
        </div>
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-medium">With Groups</h3>
        <div className="max-w-sm">
          <MultiSelect
            placeholder="Select languages by type..."
            defaultOptions={languages}
            groupBy="type"
          />
        </div>
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-medium">With Max Selection</h3>
        <div className="max-w-sm">
          <MultiSelect
            placeholder="Select up to 3 frameworks..."
            defaultOptions={frameworks}
            maxSelected={3}
            onMaxSelected={(max) => alert(`You can only select ${max} items`)}
          />
        </div>
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-medium">With Creatable Options</h3>
        <div className="max-w-sm">
          <MultiSelect
            placeholder="Type to create new options..."
            defaultOptions={frameworks}
            creatable
            onSearchSync={handleSearch}
          />
        </div>
        <p className="text-sm text-muted-foreground">
          Type something not in the list to create a new option
        </p>
      </div>
    </div>
  );
}