class DashboardFilter {

    constructor(onChange) {
        this.onChange = onChange;

        this.rangeSelect = document.getElementById("trend_range");
        this.startYear = document.getElementById("start_year");
        this.startWeek = document.getElementById("start_week");
        this.endYear = document.getElementById("end_year");
        this.endWeek = document.getElementById("end_week");
        this.customContainer = document.getElementById("custom_range_container");

        if (!this.rangeSelect) return;

        this.init();
    }

    init() {

        this.populateFilters();

        this.rangeSelect.addEventListener("change", () => {

            const val = this.rangeSelect.value;

            if (val === "custom") {
                this.customContainer.style.display = "flex";
                return;
            }

            this.customContainer.style.display = "none";

            const range = this.lastWeeks(parseInt(val));

            this.apply(range);
            this.trigger();

        });

        ["start_year","start_week","end_year","end_week"].forEach(id => {

            const el = document.getElementById(id);

            if (el) el.addEventListener("change", ()=>this.trigger());

        });

        const defaultRange = this.lastWeeks(8);

        this.apply(defaultRange);
        this.trigger();
    }

    trigger() {

        this.onChange(
            this.startYear.value,
            this.startWeek.value,
            this.endYear.value,
            this.endWeek.value
        );

    }

    apply(range) {

        this.startYear.value = range.startYear;
        this.startWeek.value = range.startWeek;
        this.endYear.value = range.endYear;
        this.endWeek.value = range.endWeek;

    }

    populateFilters() {

        const year = new Date().getFullYear();


        for (let y = year; y >= year-20; y--) {
            this.startYear.innerHTML += `<option value="${y}">${y}</option>`;
            this.endYear.innerHTML += `<option value="${y}">${y}</option>`;

        }

        for (let w = 1; w <= 53; w++) {

            this.startWeek.innerHTML += `<option value="${w}">W${w}</option>`;
            this.endWeek.innerHTML += `<option value="${w}">W${w}</option>`;

        }

    }

    getISOWeek(date) {

        const d = new Date(Date.UTC(date.getFullYear(),date.getMonth(),date.getDate()));

        d.setUTCDate(d.getUTCDate()+4-(d.getUTCDay()||7));

        const yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));

        const week = Math.ceil((((d-yearStart)/86400000)+1)/7);

        return {year:d.getUTCFullYear(),week};

    }

    lastWeeks(n) {

        const end = this.getISOWeek(new Date());

        let startWeek = end.week-n+1;
        let startYear = end.year;

        while(startWeek<=0){

            startWeek += 52;
            startYear--;

        }

        return {
            startYear,
            startWeek,
            endYear:end.year,
            endWeek:end.week
        };

    }

}
