import { range } from "lodash-es";
import moment from "moment/moment";
import { Picker } from "./picker";
import { h } from "jsx-dom";
const NBROFMONTHS = 12;
export class MonthPicker extends Picker {
    constructor(language, change, translations, dateFormat = 'MM/YYYY') {
        super(language, change, dateFormat);
        this.translations = translations;
        this.months = [];
        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;
        super.destroy();
        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);
        }
    }
    getConfig(nativePicker) {
        const config = {
            onChange: this.handleChange,
        };
        if (!nativePicker) {
            config.onReady = this.handleReady;
            config.onYearChange = this.handleChange;
        }
        return config;
    }
    handleChange(selectedDates, dateString, fp) {
        this.selectMonth(selectedDates, dateString, fp);
    }
    handleClose(selectedDates) {
        return super.handleClose(selectedDates).then(() => {
            this.selectMonth(this.flatpickr.selectedDates, this.flatpickr.input.value, this.flatpickr);
        });
    }
    handleReady(_, __, fp) {
        this.bootstrapMonthPicker(fp);
        this.selectMonth(fp.selectedDates, fp.input.value, fp);
    }
    bootstrapMonthPicker(fp) {
        if (!this.nativePicker) {
            fp.innerContainer.remove();
            fp.calendarContainer
                .querySelectorAll('.flatpickr-monthDropdown-months')[0]
                .replaceWith(this.renderHeading());
            fp.calendarContainer.append(this.renderMonthsPicker(fp));
        }
    }
    renderHeading() {
        return (h("span", { className: "datepicker-month-heading" }, this.getLocalizedHeading()));
    }
    getLocalizedHeading() {
        return this.translations.get('date-picker.month.heading', this.language);
    }
    renderMonthsPicker(fp) {
        return (h("div", { className: "datepicker-months-container" }, range(NBROFMONTHS).map((index) => {
            const renderedMonth = this.renderMonth(index, fp);
            this.months.push(renderedMonth);
            return renderedMonth;
        })));
    }
    renderMonth(month, fp) {
        return (h("div", { className: "datepicker-month", onClick: () => {
                const date = moment([fp.currentYear]).month(month).toDate();
                fp.setDate(date, true);
                fp.close();
            } }, moment()
            .month(month)
            .locale(this.getMomentLang())
            .format('MMM')));
    }
    selectMonth(selectedDates, dateString, fp) {
        if (!this.nativePicker) {
            for (const month of this.months) {
                month.classList.remove('selected');
            }
            if (dateString !== '' &&
                selectedDates[0] &&
                selectedDates[0].getFullYear() === fp.currentYear) {
                this.months[selectedDates[0].getMonth()].classList.add('selected');
            }
        }
    }
    prevYear() {
        if (!this.nativePicker) {
            // Preventing default or stopping the event from propagating doesn't
            // stop flatpickr from moving one month on its own, so we let it do
            // that, and then move the other 11 months to make it a full year.
            // /Ads
            const monthsToMove = 11;
            this.flatpickr.changeMonth(-monthsToMove);
        }
    }
    nextYear() {
        if (!this.nativePicker) {
            // Preventing default or stopping the event from propagating doesn't
            // stop flatpickr from moving one month on its own, so we let it do
            // that, and then move the other 11 months to make it a full year.
            // /Ads
            const monthsToMove = 11;
            this.flatpickr.changeMonth(monthsToMove);
        }
    }
}
