import { ComboBox, ListBoxItem } from "@hashti/react";

import {
  ComboBox,
  FieldControl,
  FieldGroupInput,
  FieldButton,
  Popover,
  ListBox,
} from "@hashti/react";

import { ComboBox, ListBoxItem } from "@hashti/react";

export function BasicComboBoxDemo() {
  return (
    <div className="max-w-xs">
      <ComboBox label="Persian UNESCO World Heritage Site" placeholder="Type to search...">
        <ListBoxItem id="persepolis">Persepolis (تخت جمشید)</ListBoxItem>
        <ListBoxItem id="naqsh-e-jahan">Naqsh-e Jahan Square (میدان نقش جهان)</ListBoxItem>
        <ListBoxItem id="pasargadae">Pasargadae (پاسارگاد)</ListBoxItem>
        <ListBoxItem id="yazd">Historic City of Yazd (شهر تاریخی یزد)</ListBoxItem>
        <ListBoxItem id="golestan">Golestan Palace (کاخ گلستان)</ListBoxItem>
        <ListBoxItem id="chogha-zanbil">Chogha Zanbil (چغازنبیل)</ListBoxItem>
      </ComboBox>
    </div>
  );
}

import { useState } from "react";
import { ComboBox, ListBoxItem } from "@hashti/react";
import type { Key } from "react-aria-components";

export function ControlledComboBoxDemo() {
  const [selectedKey, setSelectedKey] = useState<Key | null>(null);
  const [inputValue, setInputValue] = useState("");

  return (
    <div className="max-w-xs flex flex-col gap-3">
      <ComboBox
        label="Select Artisan Workshop"
        placeholder="Search workshops..."
        selectedKey={selectedKey}
        onSelectionChange={setSelectedKey}
        inputValue={inputValue}
        onInputChange={setInputValue}
        description="Choose or type a workshop location."
      >
        <ListBoxItem id="isfahan-tile">Isfahan Glazed Tile Atelier</ListBoxItem>
        <ListBoxItem id="kashan-rose">Kashan Rosewater Distillery</ListBoxItem>
        <ListBoxItem id="shiraz-carpet">Shiraz Nomadic Carpet Loom</ListBoxItem>
        <ListBoxItem id="yazd-silk">Yazd Termeh Silk Weaving</ListBoxItem>
      </ComboBox>
      <div className="text-xs text-gray-500">
        Selected Key: <b>{String(selectedKey ?? "none")}</b> | Input: <b>"{inputValue}"</b>
      </div>
    </div>
  );
}

import { ComboBox, ListBoxItem } from "@hashti/react";

export function CustomValueComboBoxDemo() {
  return (
    <div className="max-w-xs">
      <ComboBox
        label="Project Tag / Category"
        placeholder="Pick existing or type new..."
        allowsCustomValue
        description="Select an existing architectural category or type your own."
      >
        <ListBoxItem id="restoration">Restoration</ListBoxItem>
        <ListBoxItem id="vernacular">Vernacular</ListBoxItem>
        <ListBoxItem id="sustainability">Sustainability</ListBoxItem>
        <ListBoxItem id="structural">Structural Masonry</ListBoxItem>
      </ComboBox>
    </div>
  );
}

import { ComboBox, ListBoxItem } from "@hashti/react";

interface Member {
  id: string;
  name: string;
  role: string;
  department: string;
}

const MEMBERS: Member[] = [
  { id: "1", name: "Darius Jamshidi", role: "Principal Architect", department: "Restoration" },
  { id: "2", name: "Anahita Moradi", role: "Structural Engineer", department: "Vaulting" },
  { id: "3", name: "Cyrus Tavakoli", role: "Materials Specialist", department: "Ceramics" },
];

export function RichItemComboBoxDemo() {
  return (
    <div className="max-w-sm">
      <ComboBox label="Assign Team Lead" items={MEMBERS} placeholder="Filter by name or role...">
        {(member) => (
          <ListBoxItem id={member.id} textValue={member.name}>
            <div className="flex flex-col py-1">
              <span className="font-semibold text-sm">{member.name}</span>
              <span className="text-xs text-gray-500">
                {member.role} • {member.department}
              </span>
            </div>
          </ListBoxItem>
        )}
      </ComboBox>
    </div>
  );
}

import { useState } from "react";
import { ComboBox, ListBoxItem } from "@hashti/react";
import type { Selection } from "react-aria-components";

export function MultiComboBoxDemo() {
  const [selected, setSelected] = useState<Selection>(new Set(["fuma", "react"]));

  return (
    <div className="max-w-md space-y-4">
      <ComboBox
        label="Select Frameworks & Tools"
        placeholder="Type or pick multiple tools..."
        selectionMode="multiple"
        multipleDisplay="chips"
        selectedKeys={selected}
        onSelectionChange={setSelected}
      >
        <ListBoxItem id="react">React 19</ListBoxItem>
        <ListBoxItem id="astro">Astro v5</ListBoxItem>
        <ListBoxItem id="fuma">Fumadocs</ListBoxItem>
        <ListBoxItem id="tailwind">Tailwind CSS v4</ListBoxItem>
        <ListBoxItem id="bun">Bun Runtime</ListBoxItem>
      </ComboBox>
    </div>
  );
}

import { ComboBox, ListBoxItem } from "@hashti/react";

export function InvalidComboBoxDemo() {
  return (
    <div className="max-w-xs">
      <ComboBox
        label="Geographic Zone"
        placeholder="Select zone..."
        isInvalid
        errorMessage="Please select an approved conservation zone."
      >
        <ListBoxItem id="zone-a">Zone A: Central Historic Core</ListBoxItem>
        <ListBoxItem id="zone-b">Zone B: Buffer Perimeter</ListBoxItem>
      </ComboBox>
    </div>
  );
}