import { h } from "@stencil/core";
import { useTranslation } from "../../utils/utils";
import { ZIconButton } from "./z-icon-button";
import { ZButton } from "./z-button";
import { Icon } from "./icon";
import { configStore, userStore } from "../../store/store";
import { getAddressAsText } from "../../utils/func";
export const MergeUserView = ({ mergeIndex, onClose, onPrevMergeUser, onNextMergeUser, onActionMergeUser }) => {
    const t = useTranslation();
    const theme = configStore.get('theme');
    const user = userStore.get('user');
    return (h("div", { class: "z-animate-width", "data-theme": theme }, h("div", { class: "profile-info-compare-wrapper text-surface" }, h(ZIconButton, { variant: "none", iconName: "ChevronLeft", onClick: onClose }), h("span", null, t('profile_tab.compare_user'))), h("div", { class: "profile-info-compare-remark-wrapper" }, h("span", { class: "profile-info-compare-remark text-theme-gray" }, "*", t('profile_tab.compare_user_info'))), user.match_users && user.match_users.length > 0 && (h("div", null, h("div", { class: "profile-info-match-user-wrapper" }, h(ZIconButton, { variant: "none", iconName: "ChevronLeft", addClassIcon: `size-8 ${mergeIndex === 0 ? 'text-background' : 'text-primary'}`, noPadding: true, onClick: onPrevMergeUser }), (() => {
        const matchUser = user.match_users[mergeIndex];
        return (h("div", { class: "profile-info-match-user-container" }, h("div", { class: "profile-info-match-user-box" }, h("div", { class: "relative" }, h("z-avatar", { pictureUrl: user.picture_url, size: "full", isNotRound: true }), h("div", { class: "profile-info-avatar-box-merge" }, h(ZButton, { maxWidth: "max-w-32", label: user.name, endIcon: h("img", { src: `https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/${user.channel}.png`, alt: "agent avatar", class: "profile-info-avatar", loading: "lazy" }) }))), h("div", { class: "relative" }, h("z-avatar", { pictureUrl: matchUser.user.picture_url, size: "full", isNotRound: true }), h("div", { class: "profile-info-avatar-box-merge" }, h(ZButton, { maxWidth: "max-w-32", label: matchUser.user.name, endIcon: h("img", { src: `https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/${matchUser ? matchUser.channel : ''}.png`, alt: "agent avatar", class: "profile-info-avatar", loading: "lazy" }) })))), h("div", { class: "m-2 text-surface" }, h("p", { class: "font-semibold" }, t('profile_tab.ai_summary')), h("span", { class: "profile-info-pre-line" }, matchUser.reason, "\u00A0", t('profile_tab.prob'), "\u00A0", matchUser.confidence, "%\u00A0", t('profile_tab.same_user'))), h("div", { class: "profile-info-match-user-action-wrapper" }, h(ZButton, { variant: "text", textVariant: "text", label: t('no'), startIcon: h(Icon, { name: "X", addClass: "size-5 text-red-700" }), onClick: () => onActionMergeUser('reject') }), h(ZButton, { variant: "text", textVariant: "text", label: t('profile_tab.merge_user'), startIcon: h(Icon, { name: "Check", addClass: "size-5 text-green-700" }), onClick: () => onActionMergeUser('merge') }))));
    })(), h(ZIconButton, { variant: "none", iconName: "ChevronRight", addClassIcon: `size-8 ${mergeIndex === user.match_users.length - 1 ? 'text-background' : 'text-primary'}`, noPadding: true, onClick: onNextMergeUser })), h("p", { class: "font-semibold mx-4 text-surface" }, t('profile_tab.compare_table')), (() => {
        const matchUser = user.match_users[mergeIndex];
        const fields = [
            { label: t('channel'), key: 'channel' },
            { label: t('email'), key: 'email' },
            { label: t('phone_no'), key: 'phone_number' },
            { label: t('address'), key: 'address' },
            { label: t('gender'), key: 'gender' },
        ];
        return (h("div", { class: "profile-info-match-user-name-wrapper scroll-container" }, h("table", { class: "profile-info-match-user-table" }, h("thead", { class: "profile-info-match-user-table-header" }, h("tr", null, h("th", null, t('name')), h("th", null, user.name), h("th", null, matchUser.user.name))), h("tbody", null, fields.map(({ label, key }, index) => {
            let value = user[key];
            let comparedValue = matchUser.user[key];
            if (key === 'channel') {
                comparedValue = matchUser[key];
            }
            if (key === 'address') {
                value = getAddressAsText(user[key]);
                comparedValue = getAddressAsText(matchUser[key]);
            }
            return (h("tr", { key: index }, h("td", { class: "text-surface" }, h("p", { class: "profile-info-match-user-table-label" }, label)), h("td", { class: "text-theme-gray" }, h("p", { class: `profile-info-match-user-table-value ${key === 'email' ? '' : 'capitalize'}` }, value || '-')), h("td", { class: "text-theme-gray" }, h("p", { class: `profile-info-match-user-table-value ${key === 'email' ? '' : 'capitalize'}` }, comparedValue || '-'))));
        })))));
    })()))));
};
