class DatesPopup extends HTMLElement{

    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 hours = this.getElementsByClassName("input-time-hour")[0].value;
        if(hours < 0 || hours > 23){
            alertify.error("Invalid hours");
            throw RangeError;
        }
        let minutes = this.getElementsByClassName("input-time-minute")[0].value;
        if(minutes < 0 || minutes > 59){            
            alertify.error("Invalid minutes");
            throw RangeError;
        }
        let timeMs = this.convertTimeComponentsToTimestamp(hours, minutes);
        return [dateInputValue.getTime(), timeMs]; 
    }


    doJumpCallback(){
        try{
            let dateTimeInput = this.getDateTimeInput();
            this.hide();
            this.jumpCallback(dateTimeInput[0], dateTimeInput[1]);
        }
        catch(e){}
    }

    convertTimeComponentsToTimestamp(hours, minutes){
        return hours*60*60*1000 + minutes*60*1000;
    }

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

    hide(){
        this.style.visibility = "hidden";
        window.removeEventListener("click", this.backgroundClickCallback);
    }

    backgroundClickCallback = ({target}) => {
        if(target.id == "dates-popup"){
            this.hide();
        }
    }

    show(){
        this.setMaxInputDate();
        window.addEventListener("click", this.backgroundClickCallback);
        this.style.visibility = "visible";
    }

    getCorrectedCurrentDate(){
        let currentDate = new Date();
        let correctedCurrentDate = new Date(Date.UTC(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate()));
        return correctedCurrentDate;
    }

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

    setMaxInputDate(){
        let dateInput = this.getElementsByClassName("input-date")[0];
        dateInput.max = this.getCorrectedCurrentDate().toISOString().split("T")[0]; // sets the max to today (set each time the pop up is displayed)
    }

    connectedCallback(){
        this.render();
        this.hide();    
        this.setInitialInputDate();
        this.getElementsByTagName("img")[0].onclick = () => {this.hide();};
        this.getElementsByClassName("go-to-now-button")[0].onclick = () => {this.doGoToNowCallback();};
        this.getElementsByClassName("jump-button")[0].onclick = () => {this.doJumpCallback();};
    }

    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">
                            <div>
                                Date :
                                <input type="date" class="input-date">
                            </div>
                            <div>
                                Time :
                                <input class="input-time-hour" type="number" min="00" max="23" value="23">
                                <input class="input-time-minute" type="number" min="00" max="59" value="59">
                            </div>
                            
                        </div>

                        <div>
                            <button class="jump-button">Jump</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        `;
    }
}

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