import { h } from "@stencil/core";
import { Icon } from "../internal-component/icon";
import { useTranslation } from "../../utils/utils";
export const QuickMessageTemplateButtonList = ({ buttons = [], maxButtonCount, addButtonLabel, onButtonClick, onAddButton, onReorderButton, listClass = 'flex flex-col gap-3', buttonClass = '', }) => {
    const buttonBaseClass = `flex w-full flex-col items-center gap-1 rounded-xl px-2 py-2 text-xs font-medium text-white shadow-sm transition-all cursor-pointer bg-primary truncate`;
    const addButtonClass = `flex w-full items-center justify-center gap-2 rounded-xl border-[1.5px] border-dashed px-4 py-3 text-sm font-medium border-primary text-primary focus:outline-none cursor-pointer`;
    const t = useTranslation();
    const showReorder = !!onReorderButton && buttons.length > 1;
    return (h("div", { class: listClass }, buttons.map((button, index) => {
        const isFirst = index === 0;
        const isLast = index === buttons.length - 1;
        return (h("div", { class: "flex items-center gap-2", key: button.id }, showReorder && (h("div", { class: "flex flex-col items-center gap-1" }, !isFirst && (h("button", { type: "button", class: "inline-flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] border-primary text-primary transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer", "aria-label": t('quick_message.move_up'), onClick: event => {
                event.stopPropagation();
                if (onReorderButton)
                    onReorderButton(button.id, 'up');
            } }, h(Icon, { name: "ChevronUp", addClass: "size-4" }))), !isLast && (h("button", { type: "button", class: "inline-flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] border-primary text-primary transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 cursor-pointer", "aria-label": t('quick_message.move_down'), onClick: event => {
                event.stopPropagation();
                if (onReorderButton)
                    onReorderButton(button.id, 'down');
            } }, h(Icon, { name: "ChevronDown", addClass: "size-4" }))))), h("button", { type: "button", class: `${buttonBaseClass} ${buttonClass}`.trim(), onClick: () => {
                if (onButtonClick)
                    onButtonClick(button);
            } }, h("span", { class: "w-full text-center text-xs leading-tight truncate" }, button.text || '-'), h("span", { class: "w-full text-center text-xs leading-tight opacity-80 truncate" }, button.action_type === 'text' ? '-' : button.action || '-'))));
    }), buttons.length < maxButtonCount && (h("button", { type: "button", class: addButtonClass, onClick: () => {
            if (onAddButton)
                onAddButton();
        } }, h(Icon, { name: "Plus", addClass: "size-4" }), addButtonLabel))));
};
