import { VunelivBase, addThousandSeparator } from "../vunelix-base.js";

import { InfiniteMarquee } from "../../components/infinite-marquee.js";

export class VunelivTickerBase extends VunelivBase {
    static widgetCss=[];
    getSkeletonHtml() {
        const isBlock = (this.dataset.ui_template || this.dataset.uiTemplate || "inline") === "ticker-block";
        const showFlag = this.dataset.show_flag !== "false" && this.dataset.showFlag !== "false";
        const showSymbol = this.dataset.show_symbol !== "false" && this.dataset.showSymbol !== "false";
        const showName = this.dataset.show_full_name !== "false" && this.dataset.showFullName !== "false";
        let items = "";
        if (isBlock) {
            for (let i = 0; i < 6; i++) {
                let metricsHtml = "";
                metricsHtml += `<div class="skeleton-metric"><span class="skeleton skeleton-metric-label"></span><span class="skeleton skeleton-metric-value"></span></div><div class="skeleton-metric"><span class="skeleton skeleton-metric-label"></span><span class="skeleton skeleton-metric-value"></span></div>`;
                items += `\n                    <div class="marquee-skeleton-item skeleton-ticker-block">\n                        <div class="skeleton-top">\n                            <div class="skeleton-heading">\n                                ${showFlag ? '<span class="skeleton skeleton-logo"></span>' : ""}\n                                <span class="skeleton skeleton-name"></span>\n                            </div>\n                            <span class="skeleton skeleton-price"></span>\n                        </div>\n                        <div class="skeleton-metrics">${metricsHtml}</div>\n                    </div>`;
            }
        } else {
            for (let i = 0; i < 6; i++) {
                const textGroup = showSymbol || showName ? `\n                    <div class="skeleton-text-group">\n                        ${showSymbol ? '<span class="skeleton skeleton-symbol"></span>' : ""}\n                        ${showName ? '<span class="skeleton skeleton-name"></span>' : ""}\n                    </div>` : "";
                items += `\n                    <div class="marquee-skeleton-item">\n                        ${showFlag ? '<span class="skeleton skeleton-logo"></span>' : ""}\n                        ${textGroup}\n                        <span class="skeleton skeleton-price"></span>\n                        <span class="skeleton skeleton-change"></span>\n                    </div>`;
            }
        }
        return `<div id="widget-marquee"><div class="marquee-skeleton-wrapper" aria-hidden="true">${items}</div></div>`;
    }
    onReady(root, config) {
        const noAnim = config.noAnimation ?? false;
        let symbols = config.symbols || "BINANCE:BTCUSD,BINANCE:ETHUSD";
        if (typeof symbols === "string") {
            symbols = symbols.split(",").map(s => s.trim()).filter(Boolean);
        }
        let metrics = config.metrics || "active.c,active.ch,active.chp";
        if (typeof metrics === "string") {
            metrics = metrics.split(",").map(s => s.trim()).filter(Boolean);
        }
        let direction = config.direction || "auto";
        if (direction === "auto") {
            const widgetRoot = root.querySelector(".vnx-widget-root");
            const isRTL = widgetRoot?.dir === "rtl" || widgetRoot?.getAttribute("dir") === "rtl";
            direction = isRTL ? "ltr" : "rtl";
        }
        const container = root.querySelector("#widget-marquee");
        if (!container) return;
        if (config.showBorder === false) {
            container.style.border = "none";
            container.style.padding = "0";
        }
        new InfiniteMarquee({
            containerId: container.id || "widget-marquee",
            rootNode: root,
            webSocketInstance: this._webSocket,
            apiEndpoint: config.API_ENDPOINT || "",
            addThousandSeparator: addThousandSeparator,
            getValueStyle: window.getValueStyle,
            buildDynamicUrl: window.buildDynamicUrl,
            generateCoinLogoHtml: window.generateCoinLogoHtml,
            convertNumberToShortForm: window.convertNumberToShortForm,
            formatDateTime: window.formatDateTime,
            getLang: (path, fallback) => this.widgetGetLang(path, fallback),
            symbols: symbols,
            metrics: metrics,
            maxSymbols: config.maxSymbols || 30,
            showSymbol: config.showSymbol !== false,
            showExchange: !!config.showExchange,
            showFlag: config.showFlag !== false,
            showFullName: config.showFullName !== false,
            showMetricLabel: config.showMetricLabel !== false,
            timePeriod: config.timePeriod || "1d",
            speed: parseInt(config.speed) || 30,
            direction: direction,
            pauseOnHover: config.pauseOnHover !== false,
            stopMarquee: !!config.stopMarquee,
            uiTemplate: config.uiTemplate || "inline",
            cardStyle: config.cardStyle || "card",
            itemSpacing: parseInt(config.itemSpacing) || 10,
            enableLinks: config.enableLinks !== false,
            linkTarget: config.linkTarget || "_blank",
            linkUrl: config.linkUrl || ""
        });
    }
}