class DatesPopup extends HTMLElement{

    static TIME = 0;
    static ALL = 1;
    static DAY = new Date(24*60*60*1000);

    constructor(goToNowCallback, jumpCallback){
        super();
        this.goToNowCallback = goToNowCallback;
        this.jumpCallback = jumpCallback;
    }

    getDateTimeInput(){
        let dateInputValue = this.getElementsByClassName("input-date")[0].valueAsDate;
        let today = new Date();
        if(dateInputValue > today){        
            dateInputValue = today;
            alertify.warning("Date in the future : using today");
        }
        dateInputValue.setHours(0,0,0,0);
        let formattedHour = this.getElementsByClassName("input-time")[0].value;
        let timeMs = this.convertTimeStringToTimestamp(formattedHour);
        return [dateInputValue.getTime(), timeMs]; 
    }

    doJumpAllCallback(){
        let dateTimeInput = this.getDateTimeInput();
        this.hide();
        this.jumpCallback(dateTimeInput[0], dateTimeInput[1], DatesPopup.ALL);
    }

    doJumpTimeCallback(){
        let dateTimeInput = this.getDateTimeInput();
        this.hide();
        this.jumpCallback(dateTimeInput[0], dateTimeInput[1], DatesPopup.TIME);
    }

    convertTimeStringToTimestamp(formattedTime){
        let pieces = formattedTime.split(":");
        return Number(pieces[0])*60*60*1000 + Number(pieces[1])*60*1000;
    }

    doGoToNowCallback(){
        this.hide();
        console.log(this);
        this.goToNowCallback();
    }

    hide(){
        this.style.visibility = "hidden";
    }

    show(){
        this.style.visibility = "visible";
    }

    setInitialDate(){
        let currentDate = new Date();
        let dateInput = this.getElementsByClassName("input-date")[0];
        let dateDayBefore = new Date(currentDate - DatesPopup.DAY);
        dateInput.valueAsDate = dateDayBefore;
    }

    connectedCallback(){
        this.render();
        this.setInitialDate();
        this.hide();    
        this.getElementsByTagName("img")[0].onclick = () => {this.hide();};
        this.getElementsByClassName("go-to-now-button")[0].onclick = () => {this.doGoToNowCallback();};
        this.getElementsByClassName("input-date")[0].max = new Date().toISOString().split("T")[0]; // sets the max to today (set only at app start)
        this.getElementsByClassName("jump-button-time")[0].onclick = () => {this.doJumpTimeCallback();};
        this.getElementsByClassName("jump-button-all")[0].onclick = () => {this.doJumpAllCallback();};
    }

    render(){
        this.innerHTML = `
        <link rel="stylesheet" href="components/dates_popup/dates_popup.css"/>
        <div id="dates-popup">
            <div id="dates-popup-container">
                
                <div id="dates-popup-header">
                    <span>Select the date to jump to</span>
                    <img src="res/close.png"/>
                </div>

                <div id="dates-popup-content">
                    <div class="jump-container">
                        <button class="go-to-now-button">Go to now</button>
                    </div>

                    <div class="jump-container">
                        <div class="datetime-container">
                            <input type="date" class="input-date">
                            <input type="time" class="input-time" value="23:59">
                        </div>

                        <div>
                            <button class="jump-button-time">Curves at the given time</button>
                        </div>

                        <div>
                            <button class="jump-button-all">All curves of the given day</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        `;
    }
}

customElements.define("sea-dates-popup", DatesPopup);