"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const makeup_expander_1 = __importDefault(require("makeup-expander"));
const dropdown_1 = require("../../common/dropdown");
const date_utils_1 = require("../../common/dates/date-utils");
const dates_1 = require("../../common/dates");
const MIN_WIDTH_FOR_DOUBLE_PANE = 600;
class DateTextbox {
    onCreate() {
        this.state = {
            numMonths: 1,
            firstSelected: null,
            secondSelected: null,
            popover: false,
        };
    }
    onMount() {
        this.expander = new makeup_expander_1.default(this.el, {
            hostSelector: ".ebay-date-textbox--main > .icon-btn",
            contentSelector: ".date-textbox__popover",
            expandOnClick: true,
            autoCollapse: true,
        });
        this.dropdownUtil = new dropdown_1.DropdownUtil(this.el, this.getEl("popover"));
    }
    onDestroy() {
        var _a, _b;
        (_a = this.expander) === null || _a === void 0 ? void 0 : _a.destroy();
        (_b = this.dropdownUtil) === null || _b === void 0 ? void 0 : _b.cleanup();
    }
    onInput(input) {
        if (input.value !== undefined) {
            this.state.firstSelected = (0, date_utils_1.dateArgToISO)(input.value);
        }
        if (input.rangeEnd !== undefined) {
            this.state.secondSelected = (0, date_utils_1.dateArgToISO)(input.rangeEnd);
        }
        if (!input.range) {
            this.state.secondSelected = null;
        }
    }
    calculateNumMonths() {
        this.state.numMonths =
            document.documentElement.clientWidth < MIN_WIDTH_FOR_DOUBLE_PANE
                ? 1
                : 2;
    }
    handleInputChange(index, { value }) {
        let iso = (0, dates_1.parse)(value, this.input.locale);
        if (iso === null) {
            this.emit("invalid-date", { value, index });
            return;
        }
        if (index === 0) {
            this.state.firstSelected = iso;
        }
        else {
            this.state.secondSelected = iso;
        }
        this.emitSelectedChange();
    }
    openPopover() {
        this.calculateNumMonths();
        this.state.popover = true;
        this.dropdownUtil.show();
    }
    closePopover() {
        this.state.popover = false;
        this.dropdownUtil.hide();
    }
    onPopoverSelect({ iso }) {
        const { firstSelected, secondSelected } = this.state;
        this.state.firstSelected = iso;
        if (this.input.range) {
            const selected = firstSelected || secondSelected;
            if (firstSelected && secondSelected) {
                // both were selected; reset selection
                this.state.secondSelected = null;
            }
            else if (selected) {
                // exactly one was selected; figure out the order
                if (selected < iso) {
                    this.state.firstSelected = selected;
                    this.state.secondSelected = iso;
                }
                else {
                    this.state.secondSelected = selected;
                }
                if (this.input.collapseOnSelect) {
                    this.expander.expanded = false;
                }
            }
        }
        else if (this.input.collapseOnSelect) {
            this.expander.expanded = false;
        }
        this.emitSelectedChange();
    }
    /**
     * If the cursor is at the end of the input and it makes sense to add a d/m/y separator, add it.
     */
    onInputKeyup({ originalEvent: event }) {
        var _a;
        // abort if key wasn't a number
        if (!/^\d$/.test(event.key)) {
            return;
        }
        const input = event.target;
        const { value } = input;
        if (input.selectionStart === value.length) {
            const { o: order, s: sep } = (0, dates_1.getLocale)(this.input.locale);
            let i = 0;
            let start = 0;
            for (let currStart; ~(currStart = value.indexOf(sep[i], start));) {
                start = currStart + sep[i].length;
                i++;
            }
            if (value.length - start === (order[i] === "y" ? 4 : 2)) {
                input.value += (_a = sep[i]) !== null && _a !== void 0 ? _a : "";
            }
        }
    }
    emitSelectedChange() {
        this.emit("change", this.input.range
            ? {
                rangeStart: this.state.firstSelected,
                rangeEnd: this.state.secondSelected,
            }
            : {
                selected: this.state.firstSelected,
            });
    }
}
module.exports = DateTextbox;
