import React from 'react'
import { StylesOf } from '@codeleap/types'
import { DatePickerModalButtonCompositions, DatePickerModalComposition } from './styles'
import { DatePickerProps } from 'react-native-date-picker'
import { ButtonProps } from '../Button'
import { ModalProps } from '../Modal'
import { StyledProp } from '@codeleap/styles'
import { DateField } from '@codeleap/form'

export type DatePickerModalOuterInputProps = Omit<DatePickerModalProps, 'outerInputComponent' | 'field'> & {
  valueLabel: string
  value: any
  onValueChange: (date: any) => void
}

type DatePickerModalFooterProps = Omit<DatePickerModalProps, 'outerInputComponent' | 'style'> & {
  valueLabel: string
  confirm: () => void
  cancelStyles: StylesOf<DatePickerModalButtonCompositions>
  confirmStyles: StylesOf<DatePickerModalButtonCompositions>
  doneStyles: StylesOf<DatePickerModalButtonCompositions>
}

export type DatePickerModalProps =
  Omit<ModalProps, 'style' | 'ref'> &
  {
    field?: DateField<any>
    hideInput?: boolean
    debugName: string
    label?: string
    placeholder?: string
    /** When false the native `react-native-date-picker` modal is used (`modal={true}`) without any custom wrapper, which means Modal-level style tokens and footer are not applied. */
    isCustomModal?: boolean
    mode?: DatePickerProps['mode']
    cancelButtonProps?: Partial<ButtonProps>
    confirmButtonProps?: Partial<ButtonProps>
    datePickerProps?: Partial<DatePickerProps>
    outerInputComponent?: React.ComponentType<DatePickerModalOuterInputProps>
    formatDate?: (date: Date) => string
    /** `'onConfirm'` buffers the date in a ref until the user taps Confirm; `'onChange'` writes on every picker scroll tick. Choose `'onConfirm'` for controlled forms to avoid intermediate invalid states. */
    commitDate?: 'onConfirm' | 'onChange'
    showDoneButton?: boolean
    footerComponent?: React.ComponentType<DatePickerModalFooterProps>
    initialDate?: Date
    minimumDate?: DatePickerProps['minimumDate']
    maximumDate?: DatePickerProps['maximumDate']
    toggleOnConfirm?: boolean
    onConfirm?: (value: Date) => void
    style?: StyledProp<DatePickerModalComposition>
    value?: Date
    onValueChange?: (value: Date) => void
    locale?: string
  }