dashboards/apps/business/src/components/JalaliDatePicker.tsx

import { useEffect, useState, type ComponentType } from 'react'
import MultiDatePickerModule from 'react-multi-date-picker'
import DateObjectModule from 'react-date-object'
import type DateObjectType from 'react-date-object'
import persian from 'react-date-object/calendars/persian'
import persian_fa from 'react-date-object/locales/persian_fa'
import gregorian from 'react-date-object/calendars/gregorian'
import gregorian_en from 'react-date-object/locales/gregorian_en'
import { useLocale } from '@meshkee/dashboard-ui'
import styles from './JalaliDatePicker.module.css'

function resolveDefaultExport<T>(mod: T): T {
  if (
    mod &&
    typeof mod === 'object' &&
    'default' in mod &&
    (mod as { default?: unknown }).default
  ) {
    return (mod as { default: T }).default
  }
  return mod
}

const DatePicker = resolveDefaultExport(MultiDatePickerModule) as ComponentType<
  Record<string, unknown>
>
const DateObject = resolveDefaultExport(DateObjectModule) as typeof DateObjectType

interface JalaliDatePickerProps {
  id?: string
  value: string
  onChange: (isoDate: string) => void
  disabled?: boolean
  placeholder?: string
}

function normalizeGregorianDate(value: string | null | undefined): string {
  if (!value?.trim()) return ''
  return value.trim().match(/^(\d{4}-\d{2}-\d{2})/)?.[1] ?? ''
}

function toPickerValue(isoDate: string): DateObjectType | undefined {
  const normalized = normalizeGregorianDate(isoDate)
  if (!normalized) return undefined

  try {
    return new DateObject({ date: normalized, format: 'YYYY-MM-DD' }).convert(
      persian,
      persian_fa,
    )
  } catch {
    return undefined
  }
}

function toIsoDate(date: DateObjectType | DateObjectType[] | null): string {
  if (!date || Array.isArray(date)) return ''
  try {
    return date.convert(gregorian, gregorian_en).format('YYYY-MM-DD')
  } catch {
    return ''
  }
}

function JalaliDatePickerInner({
  id,
  value,
  onChange,
  disabled = false,
  placeholder,
}: JalaliDatePickerProps) {
  const { locale } = useLocale()
  const isFa = locale === 'fa'

  return (
    <DatePicker
      id={id}
      value={toPickerValue(value)}
      onChange={(date: DateObjectType | DateObjectType[] | null) => onChange(toIsoDate(date))}
      calendar={persian}
      locale={persian_fa}
      format="YYYY/MM/DD"
      disabled={disabled}
      placeholder={placeholder}
      containerClassName={styles.wrap}
      inputClass={styles.input}
      className={styles.calendar}
      calendarPosition={isFa ? 'bottom-right' : 'bottom-left'}
      arrow={false}
      editable={false}
    />
  )
}

export function JalaliDatePicker(props: JalaliDatePickerProps) {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return (
      <input
        id={props.id}
        type="text"
        className={styles.input}
        value={props.value}
        readOnly
        disabled={props.disabled}
        placeholder={props.placeholder}
        aria-hidden="true"
      />
    )
  }

  return <JalaliDatePickerInner {...props} />
}