import { Fragment, h } from "@stencil/core";
import { useTranslation } from "../../utils/utils";
import { isValidTelephoneNumber, isValidUrl } from "../../utils/validators";
import { Icon } from "../internal-component/icon";
import { ZButton } from "../internal-component/z-button";
export const QuickMessageTemplateButtonDialog = ({ isOpen, isEditing, label, actionValue, actionType, maxButtonNameLength, onLabelInput, onActionInput, onActionTypeChange, onClose, onSave, onDelete, }) => {
    if (!isOpen) {
        return null;
    }
    const t = useTranslation();
    const requiresActionField = actionType !== 'text';
    const actionPlaceholder = actionType === 'url' ? t('quick_message.button_action_url_placeholder') : actionType === 'tel' ? t('quick_message.button_action_tel_placeholder') : '';
    const trimmedLabel = (label || '').trim();
    const trimmedActionValue = (actionValue || '').trim();
    let actionError;
    if (requiresActionField) {
        if (!trimmedActionValue) {
            actionError = t('quick_message.button_action_required');
        }
        else if (actionType === 'url' && !isValidUrl(trimmedActionValue)) {
            actionError = t('quick_message.button_action_url_invalid');
        }
        else if (actionType === 'tel' && !isValidTelephoneNumber(trimmedActionValue)) {
            actionError = t('quick_message.button_action_tel_invalid');
        }
    }
    const disableSave = !trimmedLabel || (requiresActionField && !!actionError);
    const actionTabs = [
        { value: 'text', label: t('quick_message.button_action_text') },
        { value: 'url', label: t('quick_message.button_action_url') },
        { value: 'tel', label: t('quick_message.button_action_tel') },
    ];
    return (h("div", { class: "quick-message-button-content__dialog-backdrop", onClick: () => onClose() }, h("div", { class: "quick-message-button-content__dialog bg-background text-surface rounded-2xl p-5 shadow-xl", role: "dialog", "aria-modal": "true", onClick: event => event.stopPropagation() }, h("div", { class: "flex items-start justify-between" }, h("h3", { class: "text-base font-semibold" }, isEditing ? t('quick_message.edit_button') : t('quick_message.add_button')), h("button", { type: "button", class: "inline-flex cursor-pointer items-center justify-center rounded-full p-1", onClick: () => onClose() }, h(Icon, { name: "X" }))), h("div", { class: "quick-message-button-content__dialog-body mt-4 flex flex-col gap-4" }, h("div", null, h("label", { class: "text-sm font-medium text-theme-gray" }, t('quick_message.button_label')), h("div", { class: "mt-2" }, h("input", { type: "text", value: label, maxLength: maxButtonNameLength, placeholder: t('quick_message.button_label_placeholder'), class: "w-full rounded-lg border px-3 py-2 text-sm focus:outline-none ring-primary border-primary bg-background", onInput: event => onLabelInput(event.target.value) }), h("div", { class: "mt-1 text-right text-xs text-theme-gray" }, label.length, "/", maxButtonNameLength))), h("div", { class: "flex items-center justify-between border-b border-primary" }, actionTabs.map(tab => (h("button", { type: "button", class: `quick-message-button-content__tab flex-1 cursor-pointer border-b-2 px-2 pb-2 text-center text-sm font-medium transition-colors ${actionType === tab.value ? 'text-primary' : 'text-theme-gray'}`, style: { borderColor: actionType === tab.value ? 'currentColor' : 'transparent' }, onClick: () => onActionTypeChange(tab.value) }, tab.label)))), h("div", { class: `quick-message-button-content__action ${requiresActionField ? '' : 'quick-message-button-content__action--empty'}` }, requiresActionField && (h(Fragment, null, h("label", { class: "text-sm font-medium text-theme-gray" }, actionType === 'url' ? t('quick_message.button_action_url') : t('quick_message.button_action_tel')), h("input", { type: actionType === 'tel' ? 'tel' : 'url', value: actionValue, placeholder: actionPlaceholder, class: `mt-2 w-full rounded-lg border px-3 py-2 text-sm focus:outline-none ring-primary bg-background ${actionError ? 'border-red-500 focus:ring-red-500 focus:border-red-500' : `border-primary`}`, onInput: event => onActionInput(event.target.value) }), actionError && h("p", { class: "mt-1 text-xs text-red-500" }, actionError))))), h("div", { class: "mt-6 flex gap-3" }, !isEditing && h(ZButton, { variant: "outlined", label: t('cancel'), fullWidth: true, onClick: () => onClose() }), isEditing && onDelete && h(ZButton, { variant: "outlined", label: t('remove'), fullWidth: true, onClick: () => onDelete() }), h(ZButton, { variant: "primary", label: t('save'), fullWidth: true, disabled: disableSave, onClick: () => onSave() })))));
};
