import * as React from "react";
import Picker from "react-datepicker";

import { Input, IInputProps } from "../Input";

interface IDatePickerProps {
  id: string;
  input?: Partial<IInputProps>;
}

interface IDatePickerState {
  date: Date;
}

const defaultDatePickerState: IDatePickerState = {
  date: new Date(),
};

export class DatePicker extends React.PureComponent<IDatePickerProps, IDatePickerState> {
  public state: IDatePickerState = defaultDatePickerState;

  public render() {
    return (
      <div className="date-picker__container">
        <Picker
          selected={this.state.date}
          onChange={this.handleChange}
          showTimeSelect
          timeFormat="h:mm aa"
          timeIntervals={15}
          dateFormat="MMMM d, yyyy h:mm aa"
          timeCaption="Time"
          customInput={<Input id={this.props.id} type="text" {...this.props.input} style={{ cursor: "pointer", caretColor: "transparent" }} />}
        />
      </div>
    );
  }

  private handleChange = (date: Date) => {
    this.setState({
      date,
    });
  }
}