import DatePicker from 'react-multi-date-picker'
import type { DateObject } from 'react-multi-date-picker'
import persian from 'react-date-object/calendars/persian'
import persian_fa from 'react-date-object/locales/persian_fa'
import { toISODate, toJalaliDateObject } from '../../utils/date'

type JalaliDatePickerProps = {
  /** مقدار ذخیره‌شده — ISO میلادی (YYYY-MM-DD) */
  value: string
  /** تغییر مقدار — همیشه ISO میلادی برمی‌گرداند تا ذخیره‌سازی یکدست بماند */
  onChange: (isoDate: string) => void
  id?: string
  placeholder?: string
  disabled?: boolean
  className?: string
}

/**
 * انتخابگر تاریخ شمسی (react-multi-date-picker) با تقویم و locale فارسی.
 * نمایش جلالی است اما مقدار ذخیره‌شده ISO میلادی می‌ماند.
 */
export function JalaliDatePicker({
  value,
  onChange,
  id,
  placeholder = 'انتخاب تاریخ',
  disabled = false,
  className = '',
}: JalaliDatePickerProps) {
  return (
    <DatePicker
      id={id}
      value={toJalaliDateObject(value)}
      onChange={(selected) => {
        const picked = Array.isArray(selected) ? selected[0] : selected
        if (!picked) return
        onChange(toISODate(picked as DateObject))
      }}
      calendar={persian}
      locale={persian_fa}
      format="YYYY/MM/DD"
      calendarPosition="bottom-right"
      className={`aramesh-datepicker ${className}`}
      containerClassName="w-full"
      inputClass="w-full cursor-pointer border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory placeholder:text-ivory/30 focus:border-copper focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
      placeholder={placeholder}
      disabled={disabled}
      mobileLabels={{ OK: 'تأیید', CANCEL: 'انصراف' }}
      portal
    />
  )
}