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


function TmtDate() {
    const [isiTmt, setisiTmt] = useState(null)
    const [maxDay, setmaxDay] = useState(null);
    const [startDay, setstartDay] = useState(null);

    useEffect(() => {
        const setday = ms('180d');
        const tmt_awal = new Date();
        setstartDay(tmt_awal)
        const tmt_akhir = new Date(+ new Date(startDay) + setday);
        setmaxDay(tmt_akhir);
    }, [maxDay, startDay, isiTmt])


    return (
        <div>
            <FormGroup row className="mt-3">
                <label className="col-md-2 col-form-label">Tsi TMT</label>
                <div className="col-md-10">
                    <DatePicker
                        selected={isiTmt}
                        onChange={setisiTmt}
                        dateFormat='dd/MM/yyyy'
                        minDate={startDay}
                        maxDate={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(startDay).format("DD-MM-YYYY")}</b> hingga <b>{(moment(isiTmt).format("DD-MM-YYYY"))}</b>
                </div>
            </FormGroup>

        </div>
    )
}


export default TmtDate