import { h } from "@stencil/core";
import { ZIconButton } from "./z-icon-button";
import { configStore } from "../../store/store";
export const ContextSection = ({ user, readOnly = false, activeTabIndex, isEditContext, context, onEditContext, onCloseContext, onSaveUserContexts, onContextSelecting, onCreateUserContext, }) => {
    const theme = configStore.get('theme');
    return (h("div", { class: "profile-info-user-wrapper border-b-[0.5px] pt-2 gap-y-1 border-divider", "data-theme": theme }, h("div", { class: "col-span-3 profile-info-box-wrapper" }, h("span", { class: "text-surface whitespace-nowrap" }, "\u0E1A\u0E23\u0E34\u0E1A\u0E17\u0E02\u0E2D\u0E07\u0E1A\u0E17\u0E2A\u0E19\u0E17\u0E19\u0E32"), !readOnly && activeTabIndex === 0 && (h("slot", null, isEditContext ? (h("div", { class: "profile-info-box-wrapper justify-end w-full" }, h(ZIconButton, { variant: "text", iconName: "X", addClassIcon: "size-4", onClick: onCloseContext }), h(ZIconButton, { variant: "text", iconName: "Save", addClassIcon: "size-4", onClick: onSaveUserContexts }))) : (h("div", { class: "profile-info-box-wrapper justify-end w-full" }, h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: onEditContext })))))), h("div", { class: "profile-info-tag-wrapper scroll-container" }, isEditContext ? (h("autocomplete-select", { value: user.context === context ? user.context : '', fetchItems: () => Promise.resolve([{
                name: 'contactadmin'
            }]), createItem: async (name) => {
            const result = await onCreateUserContext(name);
            return { name: result };
        }, onSelecting: item => onContextSelecting(item.detail.name), referenceSelector: "profile-context", showClearButton: true })) : (h("div", { class: "profile-info-box-wrapper" }, h("span", { class: "text-sm text-surface" }, user.context ? user.context : '-'))))));
};
