Select

'use client';

import { Field, Select } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function SelectBasic() {
  const [region, setRegion] = useState('');

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Field label="Viloyat" description="Buyurtma shu viloyatga yetkaziladi">
        <Select value={region} onValueChange={setRegion}>
          <Select.Item value="tsh">Toshkent shahri</Select.Item>
          <Select.Item value="sam">Samarqand</Select.Item>
          <Select.Item value="bux">Buxoro</Select.Item>
          <Select.Item value="and">Andijon</Select.Item>
          <Select.Item value="fer">Farg'ona</Select.Item>
          <Select.Item value="nam">Namangan</Select.Item>
          <Select.Item value="qash">Qashqadaryo</Select.Item>
          <Select.Item value="xor">Xorazm</Select.Item>
          <Select.Item value="qqr">Qoraqalpog'iston</Select.Item>
        </Select>
      </Field>
      <p className="text-sm text-text-muted">
        Qiymat: <span className="font-medium text-text">{region || '—'}</span>
      </p>
    </div>
  );
}

'use client';

import { Field, Select } from '@akhatmirzo/ui';

export default function SelectGroups() {
  return (
    <Field label="Filial" className="w-full max-w-xs">
      <Select defaultValue="fer">
        <Select.Item value="tsh">Toshkent</Select.Item>
        <Select.Item value="sam">Samarqand</Select.Item>
        <Select.Group label="Vodiy">
          <Select.Item value="and">Andijon</Select.Item>
          <Select.Item value="fer">Farg'ona</Select.Item>
          <Select.Item value="nam">Namangan</Select.Item>
        </Select.Group>
        <Select.Separator />
        <Select.Group label="Janub">
          <Select.Item value="qash">Qashqadaryo</Select.Item>
          <Select.Item value="sur">Surxondaryo</Select.Item>
        </Select.Group>
      </Select>
    </Field>
  );
}

'use client';

import { Button, Select } from '@akhatmirzo/ui';

export default function SelectSizes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      {(['sm', 'md', 'lg'] as const).map((size) => (
        <Select
          key={size}
          size={size}
          aria-label={`O'lcham ${size}`}
          placeholder={`size="${size}"`}
        >
          <Select.Item value="a">Birinchi</Select.Item>
          <Select.Item value="b">Ikkinchi</Select.Item>
        </Select>
      ))}
      <div className="flex items-center gap-3">
        <Select aria-label="Valyuta" defaultValue="uzs" className="w-28">
          <Select.Item value="uzs">UZS</Select.Item>
          <Select.Item value="usd">USD</Select.Item>
          <Select.Item value="eur">EUR</Select.Item>
        </Select>
        <Button variant="primary">To'lash</Button>
      </div>
    </div>
  );
}

'use client';

import { Field, Select } from '@akhatmirzo/ui';

export default function SelectStates() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-3">
      <Field label="O'chirilgan" disabled>
        <Select defaultValue="click">
          <Select.Item value="click">Click</Select.Item>
        </Select>
      </Field>
      <Field label="To'lov usuli" error="To'lov usulini tanlang" required>
        <Select>
          <Select.Item value="click">Click</Select.Item>
          <Select.Item value="payme">Payme</Select.Item>
        </Select>
      </Field>
      <Field label="O'chirilgan element">
        <Select placeholder="Usulni tanlang">
          <Select.Item value="click">Click</Select.Item>
          <Select.Item value="payme">Payme</Select.Item>
          <Select.Item value="uzum" disabled>
            Uzum (vaqtincha ishlamaydi)
          </Select.Item>
          <Select.Item value="cash">Naqd pul</Select.Item>
        </Select>
      </Field>
    </div>
  );
}

'use client';

import { Field, Select } from '@akhatmirzo/ui';

function Dot({ className }: { className: string }) {
  return <span className={`size-2 rounded-full ${className}`} />;
}

export default function SelectIcons() {
  return (
    <Field label="Buyurtma holati" className="w-full max-w-xs">
      <Select defaultValue="progress">
        <Select.Item value="new" icon={<Dot className="bg-info" />}>
          Yangi
        </Select.Item>
        <Select.Item value="progress" icon={<Dot className="bg-warning" />}>
          Jarayonda
        </Select.Item>
        <Select.Item value="done" icon={<Dot className="bg-success" />}>
          Yetkazildi
        </Select.Item>
        <Select.Item value="canceled" icon={<Dot className="bg-danger" />}>
          Bekor qilindi
        </Select.Item>
      </Select>
    </Field>
  );
}

'use client';

import { Button, Field, Select } from '@akhatmirzo/ui';
import { useState, type FormEvent } from 'react';

export default function SelectForm() {
  const [error, setError] = useState<string>();
  const [sent, setSent] = useState('—');

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const delivery = String(new FormData(e.currentTarget).get('delivery') ?? '');
    if (!delivery) return setError('Yetkazib berish usulini tanlang');
    setError(undefined);
    setSent(delivery);
  };

  return (
    <form onSubmit={handleSubmit} className="flex w-full max-w-xs flex-col gap-4">
      <Field label="Yetkazib berish" error={error} required>
        <Select name="delivery" onValueChange={() => setError(undefined)}>
          <Select.Item value="courier">Kuryer (1 kun)</Select.Item>
          <Select.Item value="pickup">Olib ketish</Select.Item>
          <Select.Item value="post">Pochta (2–3 kun)</Select.Item>
        </Select>
      </Field>
      <div className="flex items-center gap-3">
        <Button type="submit" variant="primary">
          Yuborish
        </Button>
        <span className="text-sm text-text-muted">FormData: {sent}</span>
      </div>
    </form>
  );
}

'use client';

import type { UzRegionId } from '@akhatmirzo/core';
import { Field, RegionSelect, ScriptProvider, ScriptToggle } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function RegionSelectDemo() {
  const [region, setRegion] = useState<UzRegionId>('samarkand');

  return (
    <ScriptProvider>
      <div className="flex w-full max-w-sm flex-col gap-4">
        <ScriptToggle size="sm" />
        <Field label="Hudud" description={`Qiymat: "${region}"`}>
          <RegionSelect value={region} onValueChange={setRegion} />
        </Field>
        <Field label="Viloyat" description="includeCity={false}">
          <RegionSelect includeCity={false} />
        </Field>
      </div>
    </ScriptProvider>
  );
}