import { DatePickerInput } from '@mantine/dates'
import { useEffect, useState } from 'react'

import type { BaseEditorProps } from './types'

export function DateEditor({ autoFocus = true, onCancel, onCommit, onMoveNext, onMovePrev, value }: BaseEditorProps<Date | string>) {
  const [dateValue, setDateValue] = useState<Date | null>(() =>
    value ? new Date(value) : null
  )

  useEffect(() => {
    setDateValue(value ? new Date(value) : null)
  }, [value])

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault()
      onCommit(dateValue ?? '')
    } else if (e.key === 'Escape') {
      e.preventDefault()
      onCancel()
    } else if (e.key === 'Tab') {
      e.preventDefault()
      onCommit(dateValue ?? '')
      if (e.shiftKey) {
        onMovePrev?.()
      } else {
        onMoveNext?.()
      }
    }
  }

  return (
    <DatePickerInput
      autoFocus={autoFocus}
      clearable
      onChange={(date) => {
        const dateVal = date ? (typeof date === 'string' ? new Date(date) : date) : null
        setDateValue(dateVal)
      }}
      onKeyDown={handleKeyDown}
      size="xs"
      value={dateValue}
    />
  )
}