import { Row, Col, Input, FormGroup } from "reactstrap";
import React, { useState } from "react";
import { useEffect } from "react";
import ms from "ms";
import '@hassanmojab/react-modern-calendar-datepicker/lib/DatePicker.css';
import DatePicker from '@hassanmojab/react-modern-calendar-datepicker';

function TmtDate() {

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

    useEffect(() => {
        const setday = ms('180d');
        const tmt_awal = moment(new Date).format("D MMMM YYYY");
        setstartDay(tmt_awal)
        const tmt_akhir = new Date(+ new Date(startDay) + setday);
        setmaxDay(moment(tmt_akhir).format("D MMMM YYYY"));
        // const isi_tmt = (moment(setisiTmt).format("D MMMM YYYY"));
        // setisiTmt(isi_tmt)
    }, [startDay, maxDay])

    return (
        <div>
            <FormGroup row className="mt-1">
                <label className="col-md-2 col-form-label">Isi TMT</label>
                <div className="col-md-10">
                    <DatePicker
                        value={isiTmt}
                        onChange={setisiTmt}
                        inputPlaceholder="isi tmt"
                        shouldHighlightWeekends
                        inputClassName="my-custom-input"
                    />
                    <strong> Maximum TMT hingga {maxDay}</strong>
                </div>
            </FormGroup>
            <FormGroup row className="mt-1">
                <label className="col-md-2 col-form-label">TMT berlaku mulai </label>
                <div className="col-md-10 mt-2">
                    {startDay}
                </div>
            </FormGroup>
            <FormGroup row className="mt-1">
                <label className="col-md-2 col-form-label">TMT berlaku hingga</label>
                <div className="col-md-10 mt-2">
                    {(moment(isiTmt).format("D MMMM YYYY"))}
                </div>
            </FormGroup>
        </div>
    );
};

export default TmtDate;