import { range } from "lodash-es";
import moment from "moment/moment";
import { Picker } from "./picker";
import { h } from "jsx-dom";
const MONTHSPERQUARTER = 3;
const NBROFMONTHS = 12;
export class QuarterPicker extends Picker {
    constructor(language, change, translations, dateFormat = '[Q]Q YYYY') {
        super(language, change, dateFormat);
        this.change = change;
        this.translations = translations;
        this.quarters = [];
        this.handleChange = this.handleChange.bind(this);
        this.handleClose = this.handleClose.bind(this);
        this.handleReady = this.handleReady.bind(this);
        this.nextYear = this.nextYear.bind(this);
        this.prevYear = this.prevYear.bind(this);
    }
    init(element, container, value) {
        super.init(element, container, value);
        if (!this.nativePicker) {
            this.flatpickr.prevMonthNav.addEventListener('mousedown', this.prevYear);
            this.flatpickr.nextMonthNav.addEventListener('mousedown', this.nextYear);
        }
    }
    destroy() {
        var _a, _b, _c, _d;
        if (!this.nativePicker) {
            (_b = (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.prevMonthNav) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousedown', this.prevYear);
            (_d = (_c = this.flatpickr) === null || _c === void 0 ? void 0 : _c.nextMonthNav) === null || _d === void 0 ? void 0 : _d.removeEventListener('mousedown', this.nextYear);
        }
        super.destroy();
    }
    getConfig(nativePicker) {
        const config = {
            onChange: this.handleChange,
        };
        if (!nativePicker) {
            config.onReady = this.handleReady;
            config.onYearChange = this.handleChange;
        }
        return config;
    }
    handleChange(selectedDates, dateString, fp) {
        this.selectQuarter(selectedDates, dateString, fp);
    }
    handleClose(selectedDates) {
        return super.handleClose(selectedDates).then(() => {
            this.selectQuarter(this.flatpickr.selectedDates, this.flatpickr.input.value, this.flatpickr);
        });
    }
    handleReady(_, __, fp) {
        this.bootstrapQuarterPicker(fp);
        this.selectQuarter(fp.selectedDates, fp.input.value, fp);
    }
    bootstrapQuarterPicker(fp) {
        if (!this.nativePicker) {
            fp.innerContainer.remove();
            fp.calendarContainer
                .querySelectorAll('.flatpickr-monthDropdown-months')[0]
                .replaceWith(this.renderHeading());
            fp.calendarContainer.append(this.renderQuarterPicker(fp));
        }
    }
    renderHeading() {
        return (h("span", { className: "datepicker-quarter-heading" }, this.getLocalizedHeading()));
    }
    getLocalizedHeading() {
        return this.translations.get('date-picker.quarter.heading', this.language);
    }
    renderQuarterPicker(fp) {
        const startQuarter = 1;
        const endQuarter = 5;
        return (h("div", { className: "datepicker-quarters-container" }, range(startQuarter, endQuarter).map((quarter) => {
            const renderedQuarter = this.renderQuarter(quarter, fp);
            this.quarters.push(renderedQuarter);
            return renderedQuarter;
        })));
    }
    renderQuarter(quarter, fp) {
        return (h("div", { className: "datepicker-quarter", id: `datepicker-quarter-${quarter}`, onClick: () => {
                const date = moment([fp.currentYear])
                    .quarter(quarter)
                    .toDate();
                fp.setDate(date, true);
                fp.close();
            } }, `Q${quarter}`, this.renderQuarterMonths(quarter)));
    }
    renderQuarterMonths(quarter) {
        const months = Array.from(Array.from({ length: MONTHSPERQUARTER }), (_, index) => {
            return moment()
                .month(index + (quarter - 1) * MONTHSPERQUARTER)
                .locale(this.getMomentLang())
                .format('MMM');
        });
        return months.map((month) => {
            return h("span", { className: "datepicker-month-in-quarter" }, month);
        });
    }
    selectQuarter(selectedDates, dateString, fp) {
        if (!this.nativePicker) {
            for (const quarter of this.quarters) {
                quarter.classList.remove('selected');
            }
            if (dateString !== '' &&
                selectedDates[0] &&
                selectedDates[0].getFullYear() === fp.currentYear) {
                const i = Math.floor(selectedDates[0].getMonth() / MONTHSPERQUARTER);
                const selectedQuarter = this.quarters[i];
                selectedQuarter.classList.add('selected');
            }
        }
    }
    prevYear(event) {
        if (!this.nativePicker) {
            event.stopImmediatePropagation();
            this.flatpickr.changeMonth(-NBROFMONTHS);
        }
    }
    nextYear(event) {
        if (!this.nativePicker) {
            event.stopImmediatePropagation();
            this.flatpickr.changeMonth(NBROFMONTHS);
        }
    }
}
