import React from "react"
import PropTypes from "prop-types"
import DatePicker from "react-datepicker"
import "react-datepicker/dist/react-datepicker.css"
import cx from "classnames"
import Label from "../label"

function DatePickerInput({
  name,
  value,
  onChange,
  timeIntervals = 15,
  label,
  ...props
}) {
  const handleChange = (date) => {
    onChange({ target: { name, value: date } })
  }

  const className = cx(
    props.className,
    "border border-gray-200 text-sm px-2 py-1 rounded-sm focus:outline-blue"
  )

  return (
    <div>
      {label && (
        <Label as="div" className="mb-1">
          {label}
        </Label>
      )}
      <DatePicker
        showTimeSelect={true}
        showPopperArrow={false}
        timeFormat="h:mm aa"
        timeIntervals={timeIntervals}
        timeCaption="time"
        dateFormat="MMMM d, yyyy h:mm aa"
        className={className}
        value={value}
        onChange={handleChange}
        {...props}
      />
    </div>
  )
}

DatePickerInput.propTypes = {
  name: PropTypes.string,
  value: PropTypes.object,
  className: PropTypes.string,
  onChange: PropTypes.func,
  timeIntervals: PropTypes.number,
  label: PropTypes.string,
}

export default DatePickerInput
