class CustomDateTimePicker extends PDFViewCtrl.viewerui.IDateTimePicker {
    constructor(pdfViewer, format) {
        super(pdfViewer, format);
        this.element = document.createElement('input'); // Creates a DOM element for the date-time picker
        this.element.style = 'opacity: 0.001; display: inline-block; width: 1px; height: 1px;'

        const changeEventHook = (dates, currentDateString, self, data) => {
            if (dates.length === 0) return;
            const date = new Date(dates[0].getTime());
            date.setMonth(self.currentMonth);
            date.setFullYear(self.currentYear);
            const newDate = new Date(self.formatDate(date, this.format));
            let value = newDate;
            if (newDate.toString() === 'Invalid Date') {
                value = date;
            }
            self.setDate(value, false, this.format);
            this.dispatchNewValue(value);
        };

        this.picker = flatpickr(this.element, {
            locale: this.resolveFlatpickrLocale(pdfViewer.getCurrentLanguage()),
            disableMobile: true,
            clickOpens: false,
            allowInput: true,
            enableTime: this.showHour || this.showMinute || this.showSeconds,
            enableSeconds: this.showSeconds,
            time_24hr: this.time24Hour,
            closeOnSelect: false,
            onYearChange: changeEventHook,
            onMonthChange: changeEventHook,
            onChange: (dates, currentDateString, self) => {
                this.dispatchNewValue(dates[0]);
            },
        });
        
        // Hide time picker elements if not needed
        
        if (!(this.showHour || this.showMinute || this.showSeconds)) {
            this.picker.timeContainer?.classList.add('fv__force-hide');
        } else {
            if (!this.showHour) {
                this.picker.hourElement?.classList.add('fv__force-hide');
            }
            if (!this.showMinute) {
                this.picker.minuteElement?.classList.add('fv__force-hide');
            }
            if (!this.showSeconds) {
                this.picker.secondElement?.classList.add('fv__force-hide');
            }
        }
        if (!(this.showYear || this.showMonth || this.showDate)) {
            this.picker.monthNav?.classList.add('fv__force-hide');
            this.picker.innerContainer?.classList.add('fv__force-hide');
        }
        if (this.time24Hour) {
            this.picker.amPM?.classList.add('fv__force-hide');
            this.picker.hourElement?.setAttribute('min', '0');
            this.picker.hourElement?.setAttribute('max', '23');
        } else {
            this.picker.hourElement?.setAttribute('min', '0');
            this.picker.hourElement?.setAttribute('max', '12');
        }

        const secondElement =
            this.picker.timeContainer?.querySelector(
                '.flatpickr-second'
            )?.parentElement;

        if (!this.showSeconds) {
            secondElement?.classList.add('fv__force-hide');
            secondElement?.previousElementSibling?.classList.add(
                'fv__force-hide'
            );
        }
    }
    dispatchNewValue(value) {
        if (typeof this.onChangeCallback !== 'function') {
            return;
        }
        this.onChangeCallback(PDFViewCtrl.commons.PDFDate.from(value));
    }
    resolveFlatpickrLocale(language) {
        switch (language.toLowerCase()) {
            case 'zh-cn':
                return 'zh';
            case 'zh-tw':
                return 'zh_tw';
            case 'en-us':
                return 'en';
        }
        return 'en';
    }

    isOpen() {
        // Returns whether the date-time picker is open
        return this.picker.isOpen;
    }

    open(option) {
        // Implement opening logic
        if (option.current) {
            this.picker.setDate(option.current.getDate());
        }
        if (this.picker.isOpen) {
            this.picker.close();
        }
        this.picker.redraw();
        if (option.container) {
            this.picker._positionElement = option.container;
        }
        this.picker.open(undefined, option.container);
    }

    onChange(callback) {
        // Registers a callback for value changes and returns a function to unregister it
        this.onChangeCallback = callback;
        // Return function to remove the callback
        return () => {
            this.onChangeCallback = null;
        };
    }

    close() {
        // Closes the date-time picker
        if (this.picker.isOpen) {
            this.picker.close();
        }
        // Implement closing logic
        console.log('close date time picker');
        this.element.remove();
    }

    destroy() {
        // Destroys the date-time picker and releases resources
        // Destruction timing is determined by the Web SDK
        // Implement destruction logic
        console.log('destroy date time picker');
        this.picker.destroy();
    }

    containsElement(element) {
        // Checks if an element belongs to the date-time picker
        // This method determines if user interactions should switch form field focus
        return (
            this.picker.calendarContainer.contains(element) ||
            element === this.picker.calendarContainer
        );
    }
}
