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";
import { addDays, addMonths } from 'date-fns';

class TmtDate extends Component {
	constructor(props) {
		super(props);
		const tmt_awal = new Date();
		this.state = {
			startDay: tmt_awal,
			maxDay: "",
			isiTmt: "",
			awalsanksi: "",
			akhirsanksi: "",
		};
	}
	handleAwalSanksi = (awalsanksi) => {
		this.setState({ awalsanksi });
		// this.props.setUploadSuratSanksi(this.state);
	};
	handleAkhirSanksi = (akhirsanksi) => {
		this.setState({ akhirsanksi });
		// this.props.setUploadSuratSanksi(this.state);
	};
	render() {
		return (
			<div>
				<FormGroup row className="mt-3">
					<label className="col-md-2 col-form-label">Isi TMT</label>
					<span className="col-sm-3 float-left">
						<DatePicker
							selected={this.state.awalsanksi}
							onChange={(e) => {
								this.handleAwalSanksi(e);
								// this.props.setTmt({ startDate: this.state.awalsanksi, endDate: this.state.akhirsanksi });
							}}
							selectsStart
							startDate={this.state.awalsanksi}
							dateFormat="dd/MM/yyyy"
							maxDate={this.state.startDay}
							placeholderText="Dari Tanggal"
							showDisabledMonthNavigation
						/>
					</span>
					<span className="col-sm-3 float-right">
						<DatePicker
							selected={this.state.akhirsanksi}
							onChange={(e) => {
								this.handleAkhirSanksi(e);
								// this.props.setTmt({ startDate: this.state.awalsanksi, endDate: this.state.akhirsanksi });
							}}
							selectsEnd
							endDate={this.state.akhirsanksi}
							dateFormat="dd/MM/yyyy"
							minDate={this.state.awalsanksi}
							maxDate={addMonths(new Date(this.state.awalsanksi), 6)}
							placeholderText="Sampai tanggal"
							showDisabledMonthNavigation
						/>
					</span>
				</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>{this.state.awalsanksi ? moment(this.state.awalsanksi).format("DD-MM-YYYY") : "-"}</b> hingga <b>{this.state.akhirsanksi ? moment(this.state.akhirsanksi).format("DD-MM-YYYY") : "-"}</b>
					</div>
				</FormGroup>
			</div>
		);
	}
}

export default TmtDate;