DatePicker

'use client';

import { formatDate } from '@akhatmirzo/core';
import { DatePicker, Field } from '@akhatmirzo/ui';
import { useState } from 'react';

const isSunday = (date: Date) => date.getDay() === 0;

export default function DatePickerBasic() {
  const [date, setDate] = useState<Date | null>(null);

  return (
    <div className="w-full max-w-xs">
      <Field
        label="Yetkazish sanasi"
        description={date ? formatDate(date, 'd MMMM yyyy, EEEE') : 'Yakshanba — dam olish kuni'}
      >
        <DatePicker
          value={date}
          onValueChange={setDate}
          minDate={new Date()}
          disabledDates={isSunday}
          presets
          clearable
        />
      </Field>
    </div>
  );
}

'use client';

import { formatDate } from '@akhatmirzo/core';
import { DatePicker, Field, type DatePickerError } from '@akhatmirzo/ui';
import { useState } from 'react';

const errorText: Record<DatePickerError, string> = {
  invalid: "Bunday sana yo'q",
  unavailable: "O'tgan sanani tanlab bo'lmaydi",
};

export default function DatePickerTyping() {
  const [date, setDate] = useState<Date | null>(null);
  const [error, setError] = useState<DatePickerError | null>(null);

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Field
        label="Uchrashuv sanasi"
        required
        error={error ? errorText[error] : undefined}
        description="Sinab ko'ring: 31022026"
      >
        <DatePicker
          value={date}
          onValueChange={setDate}
          onErrorChange={setError}
          minDate={new Date()}
        />
      </Field>
      <p className="text-sm text-text-muted">
        Qiymat: <code>{date ? formatDate(date, 'yyyy-MM-dd') : 'null'}</code>
      </p>
    </div>
  );
}

'use client';

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

export default function DatePickerBirthday() {
  const [birthday, setBirthday] = useState<Date | null>(new Date(1995, 4, 17));

  return (
    <div className="w-full max-w-xs">
      <Field label="Tug'ilgan sana" description="Sarlavhani bosing — oy va yilni tanlash">
        <DatePicker
          value={birthday}
          onValueChange={setBirthday}
          minDate={new Date(1920, 0, 1)}
          maxDate={new Date()}
        />
      </Field>
    </div>
  );
}

'use client';

import { DatePicker } from '@akhatmirzo/ui';

export default function DatePickerSizes() {
  const today = new Date();
  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <DatePicker size="sm" aria-label="Kichik" defaultValue={today} />
      <DatePicker size="md" aria-label="O'rta" defaultValue={today} />
      <DatePicker size="lg" aria-label="Katta" defaultValue={today} />
    </div>
  );
}

'use client';

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

export default function DatePickerStates() {
  const today = new Date();
  return (
    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
      <Field label="O'chirilgan" disabled>
        <DatePicker defaultValue={today} />
      </Field>
      <Field label="Faqat o'qish">
        <DatePicker defaultValue={today} readOnly />
      </Field>
      <Field label="Muddat" error="Sanani tanlang" required>
        <DatePicker />
      </Field>
      <Field label="Boshqa format" description="d MMMM yyyy">
        <DatePicker format="d MMMM yyyy" defaultValue={today} />
      </Field>
    </div>
  );
}

'use client';

import { formatDate } from '@akhatmirzo/core';
import { DateRangePicker, Field, type DateRangeValue } from '@akhatmirzo/ui';
import { useState } from 'react';

const daysAgo = (n: number) => {
  const d = new Date();
  return new Date(d.getFullYear(), d.getMonth(), d.getDate() - n);
};

export default function DateRangePickerBasic() {
  const [range, setRange] = useState<DateRangeValue | null>({ from: daysAgo(6), to: daysAgo(0) });

  return (
    <div className="w-full max-w-sm">
      <Field
        label="Hisobot davri"
        description={
          range?.from && range.to
            ? `${formatDate(range.from, 'd MMM')} – ${formatDate(range.to, 'd MMM yyyy')}`
            : 'Davr tanlanmagan'
        }
      >
        <DateRangePicker value={range} onValueChange={setRange} presets maxDate={new Date()} />
      </Field>
    </div>
  );
}

'use client';

import { DateRangePicker, Field, type DateRangeValue } from '@akhatmirzo/ui';
import { useState } from 'react';

const addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);

export default function DateRangePickerPresets() {
  const [vacation, setVacation] = useState<DateRangeValue | null>(null);

  return (
    <div className="w-full max-w-sm">
      <Field label="Ta'til" description="Yakshanbalar yopiq">
        <DateRangePicker
          value={vacation}
          onValueChange={setVacation}
          minDate={new Date()}
          disabledDates={(d) => d.getDay() === 0}
          clearable
          name="tatil"
          presets={[
            { label: 'Bir hafta', range: (t) => ({ from: addDays(t, 1), to: addDays(t, 7) }) },
            { label: 'Ikki hafta', range: (t) => ({ from: addDays(t, 1), to: addDays(t, 14) }) },
          ]}
        />
      </Field>
    </div>
  );
}

'use client';

import { formatDate } from '@akhatmirzo/core';
import { Calendar } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function CalendarInline() {
  const [date, setDate] = useState<Date | null>(new Date());

  return (
    <div className="flex flex-col items-center gap-2">
      <Calendar
        value={date}
        onValueChange={setDate}
        disabledDates={(d) => d.getDay() === 0}
        className="rounded-xl border border-border bg-surface p-3"
      />
      <span className="text-sm text-text-muted">
        {date ? formatDate(date, 'd MMMM yyyy, EEEE') : 'Sana tanlanmagan'}
      </span>
    </div>
  );
}

'use client';

import { Calendar, type DateRangeValue } from '@akhatmirzo/ui';
import { useState } from 'react';

const addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);

export default function CalendarRange() {
  const today = new Date();
  const [range, setRange] = useState<DateRangeValue>({
    from: addDays(today, -3),
    to: addDays(today, 4),
  });

  return (
    <div className="flex flex-col items-center gap-2">
      <Calendar
        mode="range"
        numberOfMonths={2}
        value={range}
        onValueChange={setRange}
        className="rounded-xl border border-border bg-surface p-3"
      />
      <span className="text-sm text-text-muted">
        {range.from && !range.to ? 'Tugash sanasini tanlang' : 'Oraliq tanlandi'}
      </span>
    </div>
  );
}