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

import { ForexRates } from "../../pages/forex_rates.js";

export class VunelivForexRatesBase extends VunelivBase {
    static branding_bar=true;
    static widgetCss=[ "pages/forex_rates" ];
    static heatmapMode=false;
    getSocketConfig() {
        return {
            animationDuration: 1e3,
            subscriptionDelay: 500,
            heatmapMode: this.constructor.heatmapMode
        };
    }
    getSkeletonHtml() {
        const showPresets = this.dataset.show_presets !== "false" && this.dataset.showPresets !== "false";
        let cols = 8;
        let presetCount = 0;
        const customPresets = this.dataset.presets;
        if (customPresets) {
            try {
                const parsed = JSON.parse(customPresets);
                const keys = Object.keys(parsed);
                presetCount = keys.length;
                const activeKey = this.dataset.preset;
                const activeCurrencies = parsed[activeKey] || parsed[keys[0]] || "";
                const count = activeCurrencies.split(",").filter(c => c.trim()).length;
                if (count > 0) cols = Math.min(count, 10);
            } catch (e) {}
        }
        let presetTabs = "";
        if (showPresets) {
            let tabCount = presetCount > 0 ? Math.min(presetCount, 10) : 5;
            let tabs = "";
            for (let i = 0; i < tabCount; i++) {
                tabs += `<span class="skeleton skeleton-tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>\n`;
            }
            presetTabs = `\n            <div class="data-controls">\n                <div class="data-controls-left">\n                    <div class="category-tabs-container">\n                        <div id="currencyPresetsContainer">\n                            <div class="category-tabs">\n                                ${tabs}\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>`;
        }
        const headerCell = `<th>\n                            <div class="cross-rates-currency-header">\n                                <div class="search-result-icon-container">\n                                    <span class="flag-img skeleton skeleton-circle skeleton-circle-sm"></span>\n                                </div>\n                                <span class="currency-label skeleton skeleton-text skeleton-w-30"></span>\n                            </div>\n                        </th>`;
        const stickyCell = `<td class="row-sticky">\n                            <div class="cross-rates-currency-header">\n                                <div class="search-result-icon-container">\n                                    <span class="flag-img skeleton skeleton-circle skeleton-circle-sm"></span>\n                                </div>\n                                <span class="currency-label skeleton skeleton-text skeleton-w-30"></span>\n                            </div>\n                        </td>`;
        let thead = '<tr><th class="row-sticky"></th>';
        for (let i = 0; i < cols; i++) thead += headerCell;
        thead += "</tr>";
        let tbody = "";
        for (let r = 0; r < cols; r++) {
            tbody += "<tr>" + stickyCell;
            for (let c = 0; c < cols; c++) {
                if (r === c) {
                    tbody += '<td class="rate-cell self"></td>';
                } else {
                    tbody += '<td class="rate-cell"><div class="rate-value">&mdash;</div></td>';
                }
            }
            tbody += "</tr>";
        }
        return `\n            ${presetTabs}\n            <div class="cross-rates-table-container fx-table-scroll-shadow">\n                <div class="table-responsive" id="crossRatesTableWrapper">\n                    <table class="cross-rates-table fx-table loading">\n                        <thead>${thead}</thead>\n                        <tbody>${tbody}</tbody>\n                    </table>\n                </div>\n            </div>`;
    }
    onReady(root, config) {
        new ForexRates({
            rootNode: root,
            webSocketInstance: this._webSocket,
            addThousandSeparator: addThousandSeparator,
            initCustomSelects: initCustomSelects,
            scrollToCenter: scrollToCenter,
            getLang: (path, fallback) => this.widgetGetLang(path, fallback),
            apiEndpoint: config.API_ENDPOINT || "",
            iconPath: config.ICON_PATH || "",
            iconType: config.ICON_TYPE || ".svg",
            DISPLAY_MODE: config.DISPLAY_MODE || "c",
            PRESETS: config.PRESETS || {},
            DEFAULT_PRESET: config.DEFAULT_PRESET || "overview",
            enableLinks: config.enableLinks ?? true,
            linkTarget: config.linkTarget || "_blank",
            linkUrl: config.linkUrl || "",
            EXCHANGE: config.EXCHANGE || "",
            PERIOD: config.PERIOD || "",
            ENABLE_STORAGE: config.enableStorage ?? false,
            BUILD_PRESET_BUTTONS: true,
            SHOW_PRESET_BUTTONS: true
        });
    }
}