import { h } from "@stencil/core";
import { configStore } from "../../store/store";
import { Icon } from "./icon";
import { formatDate } from "../../utils/dayjs";
export const ZDatePicker = ({ id, label, placeholder = '', value = '', onChange, autoFocus, error, disabled, min }) => {
    const theme = configStore.get('theme');
    return (h("div", { class: "mb-2", "data-theme": theme }, label && h("label", { class: "z-date-picker-label" }, label), h("div", { class: "z-date-picker-field" }, h("input", { id: id, type: value ? 'date' : 'text', placeholder: placeholder, class: `z-date-picker-input ${disabled ? 'bg-paper' : ''}`, value: formatDate(value ?? ''), onFocus: (e) => {
            if (!disabled) {
                const target = e.target;
                target.type = 'date';
                if (typeof target.showPicker === 'function') {
                    try {
                        target.showPicker();
                    }
                    catch (err) {
                        // showPicker might fail if not triggered by a user gesture or not supported
                        // We ignore it here to prevent the app from crashing.
                    }
                }
            }
        }, onClick: (e) => {
            if (!disabled) {
                const target = e.target;
                if (target.type === 'date' && typeof target.showPicker === 'function') {
                    try {
                        target.showPicker();
                    }
                    catch (err) {
                        // showPicker might fail if not triggered by a user gesture or already open
                    }
                }
            }
        }, onBlur: (e) => {
            if (!e.target.value)
                e.target.type = 'text';
        }, onInput: (e) => {
            if (onChange)
                onChange(e.target.value);
        }, autoFocus: autoFocus, disabled: disabled, min: min }), h("div", { class: "z-date-picker-icon-wrapper" }, h(Icon, { name: "CalendarDays", addClass: "z-date-picker-icon" }))), error && h("p", { class: "z-date-picker-error" }, error)));
};
