import './FieldItemTimeRangePicker.scss'
import React from 'react'
import { Form, InputProps } from 'antd'
import { FieldProps } from 'formik'
import classNames from 'classnames'
import TimePickerDesktop from 'components/TimePickerDesktop'
import moment from 'moment'
import { timeFormat, minuteStep } from './FieldFormats'

interface Props extends FieldProps<InputProps> {
  className?: string
  value: moment.Moment
  format?: string
  hasError?: boolean
  disabled?: boolean
  onBlur?: (value: moment.Moment) => void
}

export const AntTimeRangePicker: React.FC<Props> = ({
  field,
  form,
  className,
  value,
  format = timeFormat,
  hasError = false,
  disabled,
  onBlur
}) => {
  const handleOnBlur = (value: moment.Moment) => {
    form.setFieldValue(field.name, value)
    onBlur && onBlur(value)
  }

  return (
    <div className={classNames('form-item-time-picker', className)}>
      <Form.Item validateStatus={hasError ? 'error' : 'success'}>
        <TimePickerDesktop
          disabled={disabled}
          value={value}
          hideDisabledOptions
          showNow={false}
          suffixIcon={null}
          allowClear={false}
          format={format}
          inputReadOnly
          minuteStep={minuteStep}
          onBlur={handleOnBlur}
        />
      </Form.Item>
    </div>
  )
}
