import { Host, h } from "@stencil/core";
import { selectedChatStore } from "../../store/store";
import { getZervaProfile, getZervaShopUrl, sendMessage } from "../../api";
import { ZButton } from "../internal-component/z-button";
import { handleError } from "../../store/dialog";
import { useTranslation } from "../../utils/utils";
import { getConnectionId, getZwizPackageData, openWindow } from "../../utils/func";
export class ProfileZerva {
    profile = null;
    isLoading = false;
    isGeneratingShopUrl = false;
    async componentWillLoad() {
        await this.fetchProfile();
    }
    async fetchProfile() {
        const connectionId = getConnectionId();
        const zwizPackageData = getZwizPackageData();
        if (!zwizPackageData?.zerva?.business_id) {
            this.profile = null;
            return;
        }
        if (connectionId) {
            try {
                this.isLoading = true;
                const response = await getZervaProfile(connectionId);
                this.profile = response.result;
            }
            catch (error) {
                handleError(error, 'Failed to get Zerva Profile');
            }
            finally {
                this.isLoading = false;
            }
        }
    }
    async generateShopUrl(action) {
        const selectedChat = selectedChatStore.get('selectedChat');
        const connectionId = getConnectionId();
        const zwizPackageData = getZwizPackageData();
        const t = useTranslation();
        if (!connectionId || !this.profile || !zwizPackageData?.zerva?.shop_id) {
            return;
        }
        try {
            this.isGeneratingShopUrl = true;
            const response = await getZervaShopUrl(connectionId, {
                channel: selectedChat.channel,
                user_id: selectedChat.user.id,
                zerva_shop_profile_id: zwizPackageData.zerva?.shop_id,
            });
            if (response.url) {
                if (action === 'send') {
                    await sendMessage({
                        sessionId: selectedChat.id,
                        messages: [{
                                type: 'button',
                                text: t('chat_profile_view.zerva.booking_message'),
                                buttons: [
                                    {
                                        id: 'zerva_booking-button',
                                        action_type: 'url',
                                        text: t('chat_profile_view.zerva.booking_button'),
                                        action: response.url,
                                    }
                                ],
                            }],
                    });
                }
                else if (action === 'admin') {
                    openWindow(response.url);
                }
            }
        }
        catch (error) {
            const errorMessage = action === 'send'
                ? 'Failed to generate booking link'
                : 'Failed to generate admin booking link';
            handleError(error, errorMessage);
        }
        finally {
            this.isGeneratingShopUrl = false;
        }
    }
    handleSendBookingLink = () => this.generateShopUrl('send');
    handleAdminBooking = () => this.generateShopUrl('admin');
    render() {
        const t = useTranslation();
        if (this.isLoading) {
            return (h(Host, null, h("div", { class: "flex justify-center items-center h-40" }, h("span", { class: "loading loading-spinner text-primary" }))));
        }
        if (!this.profile) {
            return h(Host, null);
        }
        return (h(Host, null, h("div", { class: "relative w-full mb-12 pt-2" }, this.profile.picture_cover_url ? (h("img", { src: this.profile.picture_cover_url, alt: "Cover", class: "profile-zerva-cover", loading: "lazy", onError: (e) => { e.target.style.display = 'none'; } })) : (h("div", { class: "profile-zerva-cover" })), h("div", { class: "profile-zerva-avatar-wrapper" }, h("z-avatar", { pictureUrl: this.profile.picture_url, size: "full" }))), h("div", { class: "flex flex-col items-center px-4" }, h("div", { class: "text-xl font-bold profile-zerva-name mb-6" }, this.profile.name), h("div", { class: "w-full flex flex-col gap-3" }, h("div", { class: "w-full profile-zerva-button-wrapper" }, h(ZButton, { variant: "outlined", fullWidth: true, disabled: this.isGeneratingShopUrl, label: h("span", null, t('chat_profile_view.zerva.send_booking_link')), onClick: this.handleSendBookingLink })), h("div", { class: "w-full profile-zerva-button-wrapper" }, h(ZButton, { variant: "outlined", fullWidth: true, disabled: this.isGeneratingShopUrl, label: h("span", null, t('chat_profile_view.zerva.admin_booking')), onClick: this.handleAdminBooking }))))));
    }
    static get is() { return "profile-zerva"; }
    static get originalStyleUrls() {
        return {
            "$": ["profile-zerva.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["profile-zerva.css"]
        };
    }
    static get states() {
        return {
            "profile": {},
            "isLoading": {},
            "isGeneratingShopUrl": {}
        };
    }
}
