"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const scrollbar_1 = require("../../scrollbar");
const button_1 = require("../../button");
const _internal_1 = require("../../_internal");
const utils_1 = require("./utils");
const interface_1 = require("./interface");
const PanelCol_1 = require("./PanelCol");
const timePickerPanelProps = {
    actions: {
        type: Array,
        default: () => ['now', 'confirm']
    },
    showHour: {
        type: Boolean,
        default: true
    },
    showMinute: {
        type: Boolean,
        default: true
    },
    showSecond: {
        type: Boolean,
        default: true
    },
    showPeriod: {
        type: Boolean,
        default: true
    },
    isHourInvalid: Boolean,
    isMinuteInvalid: Boolean,
    isSecondInvalid: Boolean,
    isValueInvalid: Boolean,
    hourValue: {
        type: Number,
        default: null
    },
    minuteValue: {
        type: Number,
        default: null
    },
    secondValue: {
        type: Number,
        default: null
    },
    isHourDisabled: Function,
    isMinuteDisabled: Function,
    isSecondDisabled: Function,
    onHourClick: {
        type: Function,
        required: true
    },
    onMinuteClick: {
        type: Function,
        required: true
    },
    onSecondClick: {
        type: Function,
        required: true
    },
    onNowClick: Function,
    nowText: String,
    confirmText: String,
    transitionDisabled: Boolean,
    onConfirmClick: Function,
    onFocusin: Function,
    onFocusout: Function,
    onFocusDetectorFocus: Function,
    onKeydown: Function,
    hours: [Number, Array],
    minutes: [Number, Array],
    seconds: [Number, Array]
};
exports.default = vue_1.defineComponent({
    name: 'TimePickerPanel',
    props: timePickerPanelProps,
    setup(props) {
        const { mergedThemeRef, mergedClsPrefixRef
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         } = vue_1.inject(interface_1.timePickerInjectionKey);
        const hoursRef = vue_1.computed(() => {
            const { isHourDisabled, hours } = props;
            return utils_1.getTimeUnits(utils_1.time.hours, hours).map((hour) => {
                return {
                    value: hour,
                    disabled: isHourDisabled ? isHourDisabled(Number(hour)) : false
                };
            });
        });
        const minutesRef = vue_1.computed(() => {
            const { isMinuteDisabled, minutes } = props;
            return utils_1.getTimeUnits(utils_1.time.minutes, minutes).map((minute) => {
                return {
                    value: minute,
                    disabled: isMinuteDisabled
                        ? isMinuteDisabled(Number(minute), props.hourValue)
                        : false
                };
            });
        });
        const secondsRef = vue_1.computed(() => {
            const { isSecondDisabled, seconds } = props;
            return utils_1.getTimeUnits(utils_1.time.seconds, seconds).map((second) => {
                return {
                    value: second,
                    disabled: isSecondDisabled
                        ? isSecondDisabled(Number(second), props.minuteValue, props.hourValue)
                        : false
                };
            });
        });
        return {
            mergedTheme: mergedThemeRef,
            mergedClsPrefix: mergedClsPrefixRef,
            hours: hoursRef,
            minutes: minutesRef,
            seconds: secondsRef,
            hourScrollRef: vue_1.ref(null),
            minuteScrollRef: vue_1.ref(null),
            secondScrollRef: vue_1.ref(null)
        };
    },
    render() {
        var _a, _b;
        const { mergedClsPrefix, mergedTheme } = this;
        return vue_1.h('div', {
            tabindex: 0,
            class: `${mergedClsPrefix}-time-picker-panel`,
            onFocusin: this.onFocusin,
            onFocusout: this.onFocusout,
            onKeydown: this.onKeydown
        }, [
            vue_1.h("div", { class: `${mergedClsPrefix}-time-picker-cols` },
                this.showHour ? (vue_1.h("div", { class: [
                        `${mergedClsPrefix}-time-picker-col`,
                        {
                            [`${mergedClsPrefix}-time-picker-col--invalid`]: this.isHourInvalid,
                            [`${mergedClsPrefix}-time-picker-col--transition-disabled`]: this.transitionDisabled
                        }
                    ] },
                    vue_1.h(scrollbar_1.NScrollbar, { ref: "hourScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
                        default: () => [
                            vue_1.h(PanelCol_1.default, { clsPrefix: mergedClsPrefix, data: this.hours, activeValue: this.hourValue, onItemClick: this.onHourClick }),
                            vue_1.h("div", { class: `${mergedClsPrefix}-time-picker-col__padding` })
                        ]
                    }))) : null,
                this.showMinute ? (vue_1.h("div", { class: [
                        `${mergedClsPrefix}-time-picker-col`,
                        {
                            [`${mergedClsPrefix}-time-picker-col--transition-disabled`]: this.transitionDisabled,
                            [`${mergedClsPrefix}-time-picker-col--invalid`]: this.isMinuteInvalid
                        }
                    ] },
                    vue_1.h(scrollbar_1.NScrollbar, { ref: "minuteScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
                        default: () => [
                            vue_1.h(PanelCol_1.default, { clsPrefix: mergedClsPrefix, data: this.minutes, activeValue: this.minuteValue, onItemClick: this.onMinuteClick }),
                            vue_1.h("div", { class: `${mergedClsPrefix}-time-picker-col__padding` })
                        ]
                    }))) : null,
                this.showSecond ? (vue_1.h("div", { class: [
                        `${mergedClsPrefix}-time-picker-col`,
                        {
                            [`${mergedClsPrefix}-time-picker-col--invalid`]: this.isSecondInvalid,
                            [`${mergedClsPrefix}-time-picker-col--transition-disabled`]: this.transitionDisabled
                        }
                    ] },
                    vue_1.h(scrollbar_1.NScrollbar, { ref: "secondScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
                        default: () => [
                            vue_1.h(PanelCol_1.default, { clsPrefix: mergedClsPrefix, data: this.seconds, activeValue: this.secondValue, onItemClick: this.onSecondClick }),
                            vue_1.h("div", { class: `${mergedClsPrefix}-time-picker-col__padding` })
                        ]
                    }))) : null),
            vue_1.h("div", { class: `${mergedClsPrefix}-time-picker-actions` },
                ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.includes('now')) ? (vue_1.h(button_1.NButton, { size: "tiny", theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.onNowClick }, { default: () => this.nowText })) : null,
                ((_b = this.actions) === null || _b === void 0 ? void 0 : _b.includes('confirm')) ? (vue_1.h(button_1.NButton, { size: "tiny", type: "primary", class: `${mergedClsPrefix}-time-picker-actions__confirm`, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, disabled: this.isValueInvalid, onClick: this.onConfirmClick }, { default: () => this.confirmText })) : null),
            vue_1.h(_internal_1.NBaseFocusDetector, { onFocus: this.onFocusDetectorFocus })
        ]);
    }
});
