import React, { useEffect, useState } from 'react'
import DatePicker from 'react-datepicker'

import 'react-datepicker/dist/react-datepicker.css'

export default function Time ({
  id, label, showLabel, placeholder, format, hint,
  showHint, tag, required, errorEmptyData
}) {

  const [startDate, setStartDate] = useState(null);

  useEffect(() => {
    setStartDate(placeholder ? null : new Date())
  }, [placeholder])

  return (
    <>
      {
        showLabel &&
        <div className="constructor__component-title">
          { label }
        </div>
      }

      <DatePicker
        className="input-default input-default_light"
        placeholderText={ placeholder }
        selected={ startDate }
        onChange={date => setStartDate(date)}
        showTimeSelect
        showTimeSelectOnly
        timeIntervals={ 15 }
        timeCaption={ label }
        timeFormat={ format || 'h:mm aa' }
        dateFormat={ format || 'h:mm aa' }
      />

      {
        showHint &&
        <div className="constructor__component-description">
          { hint }
        </div>
      }
    </>
  )
}