import React from 'react';
import { Form } from 'react-bootstrap';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import translateLabel from "../../translation"
import { ValidatorComponent } from 'react-form-validator-core';
import { subDays } from 'date-fns';

class DateTime extends ValidatorComponent {
  constructor(props) {
    super(props);
    this.state = {
      startDate: (this.props.value) ? new Date(this.props.value) : null,
      setStartDate: new Date()
    };
  }

  handleChange(date, e) {
    var eventObj = {};
    this.setState({
      startDate: date,
      setStartDate: date
    });
    e.target[this.props.name] = date
    eventObj = { target: { name: this.props.name, value: date, type: "datepicker" } };
    this.props.onChange(eventObj);
  }


  render() {
    const { id, name, value, type, asterisk, readonly, placeholder } = this.props;
    // User should not select more than 30 days previous date.
    let in30Days = new Date();
    in30Days.setDate(in30Days.getDate() - 29);

    let picker;
    if (this.props.type === "datepicker") {
        picker = <div>
        {/* <Form.Label>{labelName}{asterisk ? <span className='asterisk' style={{ marginLeft: "115px" }}>*</span> : ""}</Form.Label> */}
        <DatePicker
          id={id}
          name={name}
          value={value !== null ? value : ""}
          type={type}
          placeholder={placeholder}
          showPopperArrow={false}
          selected={this.state.startDate}
          maxDate={this.props.name === "newarticledate" ? subDays(new Date(),29) : !this.props.maxDate ? "" : new Date()}
          // maxDate={new Date()}
          minDate={this.props.minDate ? new Date() : ""}
          // minDate={this.props.name === "newarticledate" ? in30Days : ""}
          onChange={(date, event) => { this.handleChange(date, event) }}
          className="form-control width100"
          dateFormat="yyyy-MM-dd"
          placeholderText={placeholder}
          readOnly={readonly === "true" ? true : false}
          peekNextMonth
          showMonthDropdown
          showYearDropdown
          dropdownMode="select"
          autoComplete="off"
        />
        {this.errorText()}
      </div>
    }
    if (this.props.type === "timepicker") {
      picker = <DatePicker name={this.props.name}
        value={this}
        selected={this.state.date}
        showTimeSelectOnly
        timeIntervals={15}
        timeCaption="Time"
        dateFormat="h:mm aa"
      />
    }
    return (
      <div>
        <Form.Group controlId={this.props.id}>
          {/* <Form.Label>{this.props.label}</Form.Label> */}
          <Form.Label>{this.props.label}{asterisk ? <span className='asterisk'>*</span> : ""}</Form.Label>
          {picker}
        </Form.Group>
      </div>
    );
  }
  errorText() {
    const { isValid } = this.state;
    if (isValid) {
      return null;
    }
    return (
      <div className="FormErrorStringFont" style={{ color: 'red', display: isValid === undefined ? "none" : "block" }}>
        {translateLabel(this.getErrorMessage())}
      </div>
    );
  }
}

export default DateTime;