class DateIndicator extends HTMLElement{
    constructor(timestamp, goToNowCallback, jumpCallback){
        super();
        this.formattedDate = this.timestampToString(timestamp);
        this.datePopup = new DatesPopup(goToNowCallback, jumpCallback);
    }

    dayNumberToName(dayNumber){
        switch(dayNumber){
            case 0:
                return "Sun";
            case 1:
                return "Mon";
            case 2:
                return "Tue";
            case 3:
                return "Wed";
            case 4:
                return "Thu";
            case 5:
                return "Fri";
            case 6:
                return "Sat";
        }
    }

    timestampToString(timestamp){
        let date = new Date(timestamp);
        let dayName = this.dayNumberToName(date.getDay());
        let day = date.getDate();
        let month = date.getMonth() + 1; //getMonth returns number between 0 and 1
        let year = date.getFullYear();

        return dayName + ", " + day.toString().padStart(2, "0") + "/" + month.toString().padStart(2, "0") + "/"  + year ;
    }

    update(timestamp){
        this.formattedDate = this.timestampToString(timestamp);
        this.getElementsByClassName("date-indicator")[0].textContent = this.formattedDate;
    }

    showPopup(){
        console.log("clicked");
        this.datePopup.show();
    }

    connectedCallback(){
        this.render();
        this.getElementsByClassName("date-indicator")[0].onclick = () => {this.showPopup();};
    }

    render(){
        this.innerHTML = `
            <link rel="stylesheet" href="components/states_indicator/dates/dates.css">
            <div class="date-indicator">
                ${this.formattedDate}
            </div>
        `        
        this.appendChild(this.datePopup);
    }
}

customElements.define("sea-date-indicator", DateIndicator)