import { range } from "lodash-es";
import moment from "moment/moment";
import { Picker } from "./picker";
import { h } from "jsx-dom";
const YEAR_INTERVAL = 10;
export class YearPicker extends Picker {
    constructor(language, change, translations, dateFormat = 'YYYY') {
        super(language, change, dateFormat);
        this.translations = translations;
        this.yearElements = [];
        this.years = [];
        this.prevYears = (event) => {
            event.stopImmediatePropagation();
            this.addYears(-YEAR_INTERVAL);
        };
        this.nextYears = (event) => {
            event.stopImmediatePropagation();
            this.addYears(YEAR_INTERVAL);
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleClose = this.handleClose.bind(this);
        this.handleReady = this.handleReady.bind(this);
    }
    init(element, container, value) {
        super.init(element, container, value);
        if (!this.nativePicker) {
            this.flatpickr.prevMonthNav.addEventListener('mousedown', this.prevYears);
            this.flatpickr.nextMonthNav.addEventListener('mousedown', this.nextYears);
        }
    }
    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.prevYears);
            (_d = (_c = this.flatpickr) === null || _c === void 0 ? void 0 : _c.nextMonthNav) === null || _d === void 0 ? void 0 : _d.removeEventListener('mousedown', this.nextYears);
        }
    }
    addYears(nbrYears) {
        for (const year of this.years) {
            year.add(nbrYears, 'years');
        }
        for (const [index, el] of this.yearElements.entries()) {
            el.innerHTML = moment(this.years[index])
                .locale(this.getMomentLang())
                .format('YYYY');
        }
        this.setSelectedYear();
    }
    setSelectedYear() {
        for (const year of this.yearElements) {
            if (year.textContent === this.selectedYear) {
                year.classList.add('selected');
            }
            else {
                year.classList.remove('selected');
            }
        }
    }
    getConfig(nativePicker) {
        const config = {
            onChange: this.handleChange,
        };
        if (!nativePicker) {
            config.onReady = this.handleReady;
        }
        return config;
    }
    handleChange(selectedDates, dateString) {
        this.selectYear(selectedDates, dateString);
    }
    handleClose(selectedDates) {
        return super.handleClose(selectedDates).then(() => {
            this.selectYear(this.flatpickr.selectedDates, this.flatpickr.input.value);
        });
    }
    handleReady(_, __, fp) {
        this.bootstrapYearPicker(fp);
        this.selectYear(fp.selectedDates, fp.input.value);
    }
    bootstrapYearPicker(fp) {
        if (!this.nativePicker) {
            fp.innerContainer.remove();
            fp.currentYearElement.parentNode.remove();
            fp.calendarContainer
                .querySelectorAll('.flatpickr-month')[0]
                .replaceWith(this.renderHeading());
            fp.calendarContainer.append(this.renderYearPicker(fp));
        }
    }
    renderHeading() {
        return (h("span", { className: "datepicker-year-heading flatpickr-current-month" }, this.getLocalizedHeading()));
    }
    getLocalizedHeading() {
        return this.translations.get('date-picker.year.heading', this.language);
    }
    renderYearPicker(fp) {
        const halfInterval = YEAR_INTERVAL / 2;
        return (h("div", { className: "datepicker-years-container" }, range(-halfInterval, halfInterval).map((index) => {
            const year = moment().add(index, 'years');
            const renderedYear = this.renderYear(year, fp);
            this.years.push(year);
            this.yearElements.push(renderedYear);
            return renderedYear;
        })));
    }
    renderYear(year, fp) {
        return (h("div", { className: "datepicker-year", onClick: () => {
                const date = moment(year).toDate();
                fp.setDate(date, true);
                fp.close();
            } }, moment(year).locale(this.getMomentLang()).format('YYYY')));
    }
    selectYear(selectedDates, dateString) {
        if (!this.nativePicker) {
            for (const year of this.yearElements) {
                if (dateString !== '' &&
                    selectedDates[0] &&
                    Number(year.textContent) === selectedDates[0].getFullYear()) {
                    this.selectedYear = year.textContent;
                    year.classList.add('selected');
                }
                else {
                    year.classList.remove('selected');
                }
            }
        }
    }
}
