Dialog

'use client';

import { Button, Dialog, Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function DialogBasic() {
  const [open, setOpen] = useState(false);
  const [name, setName] = useState('Sarvar');
  const [phone, setPhone] = useState('+998 90 123 45 67');

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <Dialog.Trigger asChild>
        <Button variant="primary">Profilni tahrirlash</Button>
      </Dialog.Trigger>
      <Dialog.Content title="Profilni tahrirlash" description="O'zgarishlar darhol saqlanadi.">
        <div className="flex flex-col gap-4">
          <Field label="Ism">
            <Input value={name} onChange={(e) => setName(e.target.value)} />
          </Field>
          <Field label="Telefon" description="Tasdiqlash uchun SMS kod yuboriladi">
            <Input value={phone} onChange={(e) => setPhone(e.target.value)} />
          </Field>
        </div>
        <Dialog.Footer>
          <Dialog.Close asChild>
            <Button>Bekor qilish</Button>
          </Dialog.Close>
          <Button variant="primary" onClick={() => setOpen(false)}>
            Saqlash
          </Button>
        </Dialog.Footer>
      </Dialog.Content>
    </Dialog>
  );
}

'use client';

import { Button, Dialog, type DialogSize } from '@akhatmirzo/ui';

const sizes: { size: DialogSize; width: string }[] = [
  { size: 'sm', width: '400px' },
  { size: 'md', width: '520px' },
  { size: 'lg', width: '640px' },
  { size: 'xl', width: '800px' },
  { size: 'full', width: 'butun ekran' },
];

export default function DialogSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {sizes.map(({ size, width }) => (
        <Dialog key={size}>
          <Dialog.Trigger asChild>
            <Button variant="outline">{size}</Button>
          </Dialog.Trigger>
          <Dialog.Content
            title={`O'lcham: ${size}`}
            description={`Kenglik — ${width}.`}
            size={size}
          >
            <p className="m-0 text-sm text-text-muted">
              Ekran tor bo'lsa, chetlarda 16px joy qoladi. Telefonda oyna pastdan chiqadi.
            </p>
            <Dialog.Footer>
              <Dialog.Close asChild>
                <Button variant="primary">Tushunarli</Button>
              </Dialog.Close>
            </Dialog.Footer>
          </Dialog.Content>
        </Dialog>
      ))}
    </div>
  );
}

'use client';

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

export default function DialogOptions() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Dialog>
        <Dialog.Trigger asChild>
          <Button variant="outline">dismissible=false</Button>
        </Dialog.Trigger>
        <Dialog.Content
          title="Shartlarni o'qing"
          description="Tashqariga bosish yopmaydi — faqat tugma yoki Esc."
          dismissible={false}
        >
          <Dialog.Footer>
            <Dialog.Close asChild>
              <Button variant="primary">Roziman</Button>
            </Dialog.Close>
          </Dialog.Footer>
        </Dialog.Content>
      </Dialog>

      <Dialog>
        <Dialog.Trigger asChild>
          <Button variant="outline">closeButton=false</Button>
        </Dialog.Trigger>
        <Dialog.Content title="✕ tugmasisiz" closeButton={false} size="sm">
          <p className="m-0 text-sm text-text-muted">Oyna faqat pastdagi tugma bilan yopiladi.</p>
          <Dialog.Footer>
            <Dialog.Close asChild>
              <Button variant="primary">Yopish</Button>
            </Dialog.Close>
          </Dialog.Footer>
        </Dialog.Content>
      </Dialog>

      <Dialog>
        <Dialog.Trigger asChild>
          <Button variant="outline">hideTitle</Button>
        </Dialog.Trigger>
        <Dialog.Content title="Mahsulot rasmi" hideTitle size="sm">
          <div className="grid h-40 place-items-center rounded-xl bg-surface-muted text-sm text-text-muted">
            Sarlavha faqat ekran o'quvchi uchun
          </div>
        </Dialog.Content>
      </Dialog>

      <Dialog>
        <Dialog.Trigger asChild>
          <Button variant="outline">mobileSheet=false</Button>
        </Dialog.Trigger>
        <Dialog.Content
          title="Doim markazda"
          description="Telefonda ham pastdan chiqmaydi."
          mobileSheet={false}
          size="sm"
        >
          <Dialog.Footer>
            <Dialog.Close asChild>
              <Button variant="primary">Yaxshi</Button>
            </Dialog.Close>
          </Dialog.Footer>
        </Dialog.Content>
      </Dialog>
    </div>
  );
}

'use client';

import { Button, Dialog, Field, Input, Textarea, toast } from '@akhatmirzo/ui';
import { useState } from 'react';

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

export default function DialogAsyncSubmit() {
  const [open, setOpen] = useState(false);
  const [sending, setSending] = useState(false);

  const send = async () => {
    setSending(true);
    await wait(1500);
    setSending(false);
    setOpen(false);
    toast.success('Fikringiz yuborildi');
  };

  return (
    <Dialog open={open} onOpenChange={(next) => !sending && setOpen(next)}>
      <Dialog.Trigger asChild>
        <Button>Fikr bildirish</Button>
      </Dialog.Trigger>
      <Dialog.Content title="Fikr bildirish" size="lg" dismissible={!sending}>
        <div className="flex flex-col gap-4">
          <Field label="Mavzu" required>
            <Input placeholder="Masalan: yetkazib berish" />
          </Field>
          <Field label="Xabar">
            <Textarea minRows={4} placeholder="Fikringizni yozing..." />
          </Field>
        </div>
        <Dialog.Footer>
          <Dialog.Close asChild>
            <Button disabled={sending}>Bekor qilish</Button>
          </Dialog.Close>
          <Button variant="primary" loading={sending} onClick={send}>
            Yuborish
          </Button>
        </Dialog.Footer>
      </Dialog.Content>
    </Dialog>
  );
}

'use client';

import { Button, confirm, toast } from '@akhatmirzo/ui';
import { Trash2 } from 'lucide-react';

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

export default function DialogConfirm() {
  const removeOrder = async () => {
    const ok = await confirm({
      title: "Buyurtma o'chirilsinmi?",
      description: "Bu amalni qaytarib bo'lmaydi.",
      confirmText: "O'chirish",
      variant: 'danger',
    });
    if (ok) toast.success("Buyurtma #1042 o'chirildi");
  };

  const publish = async () => {
    const ok = await confirm({
      title: 'Mahsulot nashr qilinsinmi?',
      description: "Mahsulot do'konda hammaga ko'rinadi.",
      confirmText: 'Nashr qilish',
      // Promise tugaguncha tugma loading, oyna ochiq turadi
      onConfirm: () => wait(1500),
    });
    if (ok) toast.success('Mahsulot nashr qilindi');
  };

  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="danger" leftIcon={<Trash2 />} onClick={removeOrder}>
        O'chirish
      </Button>
      <Button variant="primary" onClick={publish}>
        Nashr qilish
      </Button>
    </div>
  );
}

'use client';

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

export default function DialogConfirmDeclarative() {
  return (
    <ConfirmDialog
      trigger={<Button variant="outline">Hisobdan chiqish</Button>}
      title="Hisobdan chiqilsinmi?"
      description="Qayta kirish uchun SMS kod kerak bo'ladi."
      confirmText="Chiqish"
      onConfirm={() => toast('Hisobdan chiqdingiz')}
      onCancel={() => toast.info('Hisobda qoldingiz')}
    />
  );
}

'use client';

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

const cities = ['Toshkent', 'Samarqand', 'Buxoro', 'Andijon', "Farg'ona", 'Namangan'].map(
  (label) => ({ value: label.toLowerCase().replace(/'/g, ''), label }),
);

export default function DialogWithSelect() {
  const [city, setCity] = useState<string | null>('toshkent');

  return (
    <Dialog>
      <Dialog.Trigger asChild>
        <Button variant="outline">Yetkazib berish manzili</Button>
      </Dialog.Trigger>
      <Dialog.Content
        title="Yetkazib berish manzili"
        description="Ro'yxatlar oyna ustida ochiladi."
      >
        <div className="flex flex-col gap-4">
          <Field label="Shahar">
            <Combobox options={cities} value={city} onValueChange={setCity} clearable />
          </Field>
          <Field label="Yetkazish vaqti">
            <Select defaultValue="morning">
              <Select.Item value="morning">Ertalab (9:00–12:00)</Select.Item>
              <Select.Item value="day">Kunduzi (12:00–17:00)</Select.Item>
              <Select.Item value="evening">Kechqurun (17:00–21:00)</Select.Item>
            </Select>
          </Field>
        </div>
        <Dialog.Footer>
          <Dialog.Close asChild>
            <Button>Bekor qilish</Button>
          </Dialog.Close>
          <Dialog.Close asChild>
            <Button variant="primary">Saqlash</Button>
          </Dialog.Close>
        </Dialog.Footer>
      </Dialog.Content>
    </Dialog>
  );
}