/**
 * This Source Code is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 * Copyright (c) Infonomic Company Limited
 */

import type { DateTimeField as FieldType } from '@byline/core'
import { DatePicker, ErrorText } from '@byline/ui/react'
import cx from 'clsx'

import { useFieldError, useFieldValue, useIsDirty } from '../../forms/form-context'
import { useScopedDomId } from '../../forms/form-dom-scope'
import styles from './datetime-field.module.css'

export const DateTimeField = ({
  field,
  value,
  defaultValue,
  onChange,
  id,
  path,
}: {
  field: FieldType
  value?: Date | null
  defaultValue?: Date | null
  onChange?: (value: Date | null) => void
  id?: string
  path?: string
}) => {
  const fieldPath = path ?? field.name
  const htmlId = useScopedDomId(fieldPath, id)
  const fieldError = useFieldError(fieldPath)
  const isDirty = useIsDirty(fieldPath)
  const fieldValue = useFieldValue<Date | null | undefined>(fieldPath)
  const incomingValue = value ?? fieldValue ?? defaultValue ?? null

  return (
    <div className={`byline-field-datetime ${field.name}`}>
      <DatePicker
        disabled={field.readOnly}
        id={htmlId}
        name={field.name}
        label={field.label}
        required={!field.optional}
        initialValue={incomingValue}
        mode={field.mode || 'datetime'}
        yearsInFuture={field.yearsInFuture || 1}
        yearsInPast={field.yearsInPast || 10}
        onDateChange={(date) => onChange?.(date)}
        className={cx(isDirty && ['byline-field-datetime-dirty', styles.dirty])}
      />
      {fieldError && <ErrorText id={`${htmlId}-error`} text={fieldError} />}
    </div>
  )
}