import { h } from "@stencil/core";
import { configStore } from "../../store/store";
import { ZIconButton } from "./z-icon-button";
export const ZContextInput = ({ keyInput, valueInput, onDelete }) => {
    const theme = configStore.get('theme');
    let keyTextareaEl = null;
    let valueTextareaEl = null;
    const syncKeyHeight = () => {
        if (!keyTextareaEl)
            return;
        keyTextareaEl.style.height = 'auto';
        keyTextareaEl.style.height = `${keyTextareaEl.scrollHeight}px`;
    };
    const syncValueHeight = () => {
        if (!valueTextareaEl)
            return;
        valueTextareaEl.style.height = 'auto';
        valueTextareaEl.style.height = `${valueTextareaEl.scrollHeight}px`;
    };
    const handleKeyInput = (e) => {
        const target = e.target;
        if (keyInput.onChange)
            keyInput.onChange(target.value);
        requestAnimationFrame(() => syncKeyHeight());
    };
    const handleValueInput = (e) => {
        const target = e.target;
        if (valueInput.onChange)
            valueInput.onChange(target.value);
        requestAnimationFrame(() => syncValueHeight());
    };
    const handleKeyRef = (el) => {
        if (el) {
            keyTextareaEl = el;
            requestAnimationFrame(() => syncKeyHeight());
        }
    };
    const handleValueRef = (el) => {
        if (el) {
            valueTextareaEl = el;
            requestAnimationFrame(() => syncValueHeight());
        }
    };
    return (h("div", { class: "flex flex-col gap-3 w-full py-4 border-b border-gray-300 last:border-0", "data-theme": theme }, h("div", { class: "flex items-start gap-2 w-full" }, h("fieldset", { class: "flex-1 border border-divider rounded-md px-3 pb-2 pt-1 focus-within:border-primary transition-colors bg-background" }, keyInput.value ? (h("legend", { class: "text-xs text-theme-gray px-1" }, keyInput.placeholder)) : null, h("textarea", { ref: handleKeyRef, disabled: keyInput.disabled, id: "Key_" + keyInput.id, placeholder: keyInput.value ? "" : keyInput.placeholder, class: "w-full bg-transparent border-none outline-none focus:ring-0 focus:outline-none resize-none text-sm text-surface m-0 p-0 overflow-hidden min-h-[20px]", value: keyInput.value, onInput: handleKeyInput, rows: 1 })), onDelete &&
        h("div", { class: "pt-1" }, h(ZIconButton, { variant: 'text', iconName: "Trash2", addClassIcon: "size-5 text-red-500", onClick: onDelete }))), h("fieldset", { class: "w-full border border-divider rounded-md px-3 pb-2 pt-1 focus-within:border-primary transition-colors bg-background" }, valueInput.value ? (h("legend", { class: "text-xs text-theme-gray px-1" }, valueInput.placeholder)) : null, h("textarea", { ref: handleValueRef, disabled: valueInput.disabled, id: "Value_" + valueInput.id, placeholder: valueInput.value ? "" : valueInput.placeholder, class: "w-full bg-transparent border-none outline-none focus:ring-0 focus:outline-none resize-none text-sm text-surface m-0 p-0 overflow-hidden min-h-[60px]", value: valueInput.value, onInput: handleValueInput, rows: 3 }))));
};
