import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import FormGroup from "reactstrap/lib/FormGroup";
import ms from "ms";
import { Component } from "react";

class TmtDate extends Component {
	constructor(props) {
		super(props);
		const tmt_awal = new Date();
		this.state = {
			startDay: tmt_awal,
			maxDay: new Date(+new Date(tmt_awal) + ms("180d")),
			isiTmt: "",
		};
	}

	render() {
		return (
			<div>
				<FormGroup row className="mt-3">
					<label className="col-md-2 col-form-label">Isi TMT</label>
					<div className="col-md-10">
						<DatePicker
							selected={this.state.isiTmt}
							onChange={(e) => {
								this.setState({ isiTmt: e });
								this.props.setTmt({ startDate: this.state.startDay, endDate: this.state.isiTmt });
							}}
							dateFormat="dd/MM/yyyy"
							minDate={this.state.startDay}
							maxDate={this.state.maxDay}
							placeholderText="isi TMT"
						// maxDate={addDays(new Date(), 5)}
						/>
						<strong>Max pengisian TMT 6 bulan</strong>
					</div>
				</FormGroup>
				<FormGroup row className="mt-1">
					<label className="col-md-2 col-form-label">TMT berlaku</label>
					<div className="col-md-10 mt-2">
						<b>{moment(this.state.startDay).format("DD-MM-YYYY")}</b> hingga <b>{this.state.isiTmt ? moment(this.state.isiTmt).format("DD-MM-YYYY") : "-"}</b>
					</div>
				</FormGroup>
			</div>
		);
	}
}

export default TmtDate;