import { Fragment, h } from "@stencil/core";
import { displayDate } from "../../utils/dayjs";
import { useTranslation } from "../../utils/utils";
import { ZIconButton } from "./z-icon-button";
import { getAddressAsText, openWindow } from "../../utils/func";
import { chatLanguageStore, configStore, selectedChatStore } from "../../store/store";
import { getChatChannelPictureUrl } from "../../store/chat";
import { Icon } from "./icon";
import { TRANSLATE_LANGUAGES } from "../../utils/constant";
import { updateChat } from "../../api";
import { handleError } from "../../store/dialog";
export const AboutSection = ({ user, readOnly = false, connection, activeTabIndex, onOpenDialogEditor }) => {
    const t = useTranslation();
    const theme = configStore.get('theme');
    const selectedChat = selectedChatStore.get('selectedChat');
    const handleCancel = () => {
        const originalLanguage = chatLanguageStore.get('originalLanguage');
        selectedChatStore.set('selectedChat', { ...selectedChatStore.get('selectedChat'), language: originalLanguage });
        chatLanguageStore.reset();
    };
    const handleUpdateChatLanguage = async () => {
        try {
            chatLanguageStore.set('loading', true);
            const language = selectedChat.language;
            const { code } = await updateChat({
                sessionId: selectedChat ? selectedChat.id : '',
                language,
            });
            if (code === 'chat-updated') {
                const updateSelectedChat = {
                    ...selectedChatStore.get('selectedChat'),
                    language,
                };
                selectedChatStore.set('selectedChat', updateSelectedChat);
                chatLanguageStore.set('isEdit', false);
            }
        }
        catch (error) {
            handleError(error, 'Failed to update chat language');
        }
        finally {
            chatLanguageStore.set('loading', false);
        }
    };
    let _language = '';
    if (selectedChat) {
        if (TRANSLATE_LANGUAGES && TRANSLATE_LANGUAGES[selectedChat.language]) {
            _language = TRANSLATE_LANGUAGES[selectedChat.language];
        }
        else {
            _language = selectedChat.language;
        }
    }
    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" }, h("span", { class: "text-surface" }, t('about'))), h("div", { class: "col-span-1" }, h("span", { class: "text-sm text-theme-gray" }, t('channel'))), h("div", { class: "col-span-2" }, h("div", { class: "profile-info-connection-wrapper" }, h("img", { src: getChatChannelPictureUrl({ channel: user.channel, type: selectedChat.type }), alt: "agent avatar", class: "profile-info-avatar", loading: "lazy" }), h("span", { class: "text-sm text-surface" }, user.channel === 'zignal' ? 'Zignal' : ((connection ? connection.name : '') || selectedChat.connection.name))), user.channel === 'facebook' &&
        h("a", { href: `https://business.facebook.com/latest/${user.user_id}`, target: "_blank", rel: "noopener noreferrer", onClick: (event) => {
                event.preventDefault();
                openWindow(`https://business.facebook.com/latest/${user.user_id}`);
            }, class: "profile-info-go-to-facebook-inbox" }, t('go_to_facebook_inbox'))), h("div", { class: "col-span-1" }, h("span", { class: "profile-info-content-text-gray" }, t('email'))), h("div", { class: "col-span-2 profile-info-box-wrapper" }, h("span", { class: "profile-info-content-text-surface" }, user.email ? (Array.isArray(user.email) ? user.email.join(', ') : user.email) : '-'), !readOnly && activeTabIndex === 0 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Email', field: 'email', value: user.email }) }))), h("div", { class: "col-span-1" }, h("span", { class: "profile-info-content-text-gray" }, t('phone_no'))), h("div", { class: "col-span-2 profile-info-box-wrapper" }, h("span", { class: "profile-info-content-text-surface" }, user.phone_number ? (Array.isArray(user.phone_number) ? user.phone_number.join(', ') : user.phone_number) : '-'), !readOnly && activeTabIndex === 0 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Phone no.', field: 'phone_number', value: user.phone_number }) }))), h("div", { class: "col-span-1" }, h("span", { class: "profile-info-content-text-gray" }, t('address'))), h("div", { class: "profile-info-content-wrapper-baseline" }, h("span", { class: `profile-info-pre-line text-surface` }, getAddressAsText(user.address) || '-'), !readOnly && activeTabIndex === 0 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Address', field: 'address', value: user.address, type: 'full_address' }) }))), selectedChat.type !== 'group' &&
        h(Fragment, null, h("div", { class: "col-span-1" }, h("span", { class: "text-sm text-theme-gray" }, t('gender'))), h("div", { class: "profile-info-content-wrapper-baseline" }, h("span", { class: "profile-info-capitalize text-surface" }, user.gender ? user.gender : '-'), !readOnly && activeTabIndex === 1 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Gender', field: 'gender', value: user.gender, type: 'input' }) })))), h("div", { class: "col-span-1" }, h("span", { class: "profile-info-content-text-gray" }, t('locale'))), h("div", { class: "profile-info-content-wrapper-baseline" }, h("span", { class: "profile-info-content-text-surface" }, user.locale), !readOnly && activeTabIndex === 1 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Locale', field: 'locale', value: user.locale, type: 'input' }) }))), activeTabIndex === 0 &&
        h(Fragment, null, h("div", { class: "col-span-1" }, h("div", { class: "profile-info-content-chat_language-wrapper" }, h("span", { class: "profile-info-content-text-gray truncate", title: t('chat_language') }, t('chat_language')), h("div", { class: "relative -bottom-1 inline-flex" }, h("z-tooltip", { text: t('chat_language_desc'), position: "right" }, h(ZIconButton, { variant: "text", iconName: "Info", addClassIcon: "size-4", noPadding: true, noPaddingY: true }))))), h("div", { class: "profile-info-content-wrapper-baseline", id: "chat-language" }, chatLanguageStore.get('isEdit')
            ? h(Fragment, null, h("autocomplete-select", { value: _language, fetchItems: () => Promise.resolve(Object.entries(TRANSLATE_LANGUAGES).map(([language, label]) => ({ id: language, name: label }))), onSelecting: item => {
                    const language = item.detail.id;
                    selectedChatStore.set('selectedChat', { ...selectedChat, language });
                }, referenceSelector: "chat-language" }), h(ZIconButton, { variant: "text", iconName: "X", addClassIcon: "size-4", onClick: handleCancel, isLoading: chatLanguageStore.get('loading') }), h(ZIconButton, { variant: "text", iconName: "Save", addClassIcon: "size-4", onClick: () => handleUpdateChatLanguage(), isLoading: chatLanguageStore.get('loading') }))
            : h(Fragment, null, h(Icon, { name: "Languages", addClass: "size-4 text-primary" }), h("span", { class: "profile-info-content-text-surface" }, _language || '-'), !readOnly && activeTabIndex === 0 && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => {
                    chatLanguageStore.set('originalLanguage', selectedChat.language);
                    chatLanguageStore.set('isEdit', true);
                } }))))), h("div", { class: "col-span-1" }, h("span", { class: "profile-info-content-text-gray" }, t('register_date'))), h("div", { class: "col-span-2" }, h("span", { class: "profile-info-content-text-surface" }, displayDate(user.created_at))), h("div", { class: "col-span-1" }, h("span", { class: "profile-info-content-text-gray" }, t('last_active_date'))), h("div", { class: "col-span-2" }, h("span", { class: "profile-info-content-text-surface" }, displayDate(user.last_active_at))), h("div", { class: "col-span-1" }, h("span", { class: "profile-info-content-text-gray" }, t('note'))), h("div", { class: "profile-info-content-wrapper-baseline" }, h("span", { class: `profile-info-pre-line text-surface` }, user.note ? user.note : '-'), !readOnly && (h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", onClick: () => onOpenDialogEditor({ label: 'Note', field: 'note', value: user.note, type: 'textarea', limit: 1000 }) })))));
};
