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

import { Heatmap } from "../../pages/heatmap.js";

export class VunelivHeatmapBase extends VunelivBase {
    static widgetCss=[ "pages/heatmap" ];
    static useSocket=false;
    static heatmapType="crypto";
    static branding_bar=true;
    clampConfig(c) {
        if (c.default_per_page > 200) c.default_per_page = 100;
    }
    getSkeletonHtml() {
        const showLegend = this.dataset.enable_legend !== "false" && this.dataset.enableLegend !== "false";
        let legend = "";
        if (showLegend) {
            legend = `\n                <div class="heatmap-legend-row">\n                    <div class="heatmap-legend">\n                        <div class="legend-bar">\n                            <div class="legend-boxes" id="heatmapLegendBoxes">\n                                <div class="legend-box-item"><span class="legend-box-label skeleton"></span><span class="legend-box heatmap-negative-5"></span></div>\n                                <div class="legend-box-item"><span class="legend-box-label skeleton"></span><span class="legend-box heatmap-negative-4"></span></div>\n                                <div class="legend-box-item"><span class="legend-box-label skeleton"></span><span class="legend-box heatmap-negative-2"></span></div>\n                                <div class="legend-box-item"><span class="legend-box-label skeleton"></span><span class="legend-box heatmap-neutral-2"></span></div>\n                                <div class="legend-box-item"><span class="legend-box-label skeleton"></span><span class="legend-box heatmap-positive-2"></span></div>\n                                <div class="legend-box-item"><span class="legend-box-label skeleton"></span><span class="legend-box heatmap-positive-4"></span></div>\n                                <div class="legend-box-item"><span class="legend-box-label skeleton"></span><span class="legend-box heatmap-positive-5"></span></div>\n                            </div>\n                        </div>\n                    </div>\n                </div>`;
        }
        return `\n            <div class="heatmap-fullscreen-wrapper" id="heatmapFullscreenWrapper">\n                <div class="heatmap-container" aria-busy="true">\n                    <div class="heatmap-skeleton" aria-hidden="true">\n                        <div class="skeleton skeleton-lg"></div>\n                        <div class="skeleton skeleton-md"></div>\n                        <div class="skeleton skeleton-md"></div>\n                        <div class="skeleton"></div>\n                        <div class="skeleton"></div>\n                        <div class="skeleton"></div>\n                        <div class="skeleton"></div>\n                        <div class="skeleton"></div>\n                        <div class="skeleton"></div>\n                        <div class="skeleton"></div>\n                        <div class="skeleton"></div>\n                        <div class="skeleton"></div>\n                        <div class="skeleton"></div>\n                        <div class="skeleton"></div>\n                        <div class="skeleton"></div>\n                    </div>\n                    <div class="heatmap-treemap" id="heatmapTreemap"></div>\n                </div>\n                ${legend}\n            </div>`;
    }
    onReady(root, config) {
        const i = config.HEATMAP_INITIAL || {};
        const isStock = this.constructor.heatmapType === "stock";
        let colorField, colorPeriod;
        if (i.DEFAULT_COLOR) {
            [colorField, colorPeriod] = i.DEFAULT_COLOR.split("|");
        }
        new Heatmap({
            root: root,
            hostElement: root.querySelector(".vnx-widget-root") || root.host,
            apiEndpoint: config.API_ENDPOINT || "",
            iconPath: config.ICON_PATH || "",
            iconType: config.ICON_TYPE || ".svg",
            initCustomSelects: selector => initCustomSelects(selector, root),
            scrollToCenter: scrollToCenter,
            addThousandSeparator: addThousandSeparator,
            TYPE: i.TYPE || (isStock ? "stock" : "coin"),
            SORT_VALUE: i.DEFAULT_SORT || "market_cap",
            SORT_FIELD: isStock ? "earnings.market_cap" : "perf.market_cap",
            PER_PAGE: parseInt(i.DEFAULT_PER_PAGE) || 100,
            ...colorField && {
                COLOR_FIELD: colorField
            },
            ...colorPeriod && {
                PERIOD: colorPeriod
            },
            ...i.DEFAULT_COUNTRY && {
                COUNTRY: i.DEFAULT_COUNTRY
            },
            ...i.DEFAULT_INDICES && {
                INDICES: i.DEFAULT_INDICES
            },
            ...i.DEFAULT_INDICES_NAME && {
                INDICES_NAME: i.DEFAULT_INDICES_NAME
            },
            ...i.DEFAULT_INDICES_LOGO && {
                INDICES_LOGO: i.DEFAULT_INDICES_LOGO
            },
            ...i.DEFAULT_SECTOR && {
                SECTOR: i.DEFAULT_SECTOR
            },
            ...i.DEFAULT_IS_PRIMARY !== undefined && {
                IS_PRIMARY: i.DEFAULT_IS_PRIMARY
            },
            COLOR_MODE: i.DEFAULT_COLOR_MODE || "fixed",
            SHOW_LOGO: i.DEFAULT_SHOW_LOGO ?? true,
            DISPLAY_NAME: i.DEFAULT_DISPLAY_NAME || (isStock ? "symbol" : "name"),
            DISPLAY_VALUE: i.DEFAULT_DISPLAY_VALUE || "selected",
            BOX_BORDER_RADIUS: i.DEFAULT_BORDER_RADIUS ? 6 : 0,
            LINK_TARGET: i.LINK_TARGET || "_blank",
            OVERVIEW_URL: i.OVERVIEW_URL || "",
            ...i.CHART_URL && {
                CHART_URL: i.CHART_URL
            },
            ENABLE_SETTINGS: i.ENABLE_SETTINGS ?? true,
            ENABLE_SCREENSHOT: i.ENABLE_SCREENSHOT ?? true,
            ENABLE_FULLSCREEN: i.ENABLE_FULLSCREEN ?? true,
            ENABLE_ZOOM_CONTROLS: i.ENABLE_ZOOM_CONTROLS ?? true,
            ENABLE_WHEEL_ZOOM: i.ENABLE_WHEEL_ZOOM ?? false,
            ENABLE_LEGEND: i.ENABLE_LEGEND ?? true,
            ENABLE_TYPE_SELECT: i.ENABLE_TYPE_SELECT ?? !isStock,
            ENABLE_SORT_SELECT: i.ENABLE_SORT_SELECT ?? true,
            ENABLE_COLOR_SELECT: i.ENABLE_COLOR_SELECT ?? true,
            ENABLE_PER_PAGE_SELECT: i.ENABLE_PER_PAGE_SELECT ?? true,
            ENABLE_COUNTRY_SELECT: i.ENABLE_COUNTRY_SELECT ?? isStock,
            ENABLE_INDICES_SELECT: i.ENABLE_INDICES_SELECT ?? isStock,
            ENABLE_SECTOR_SELECT: i.ENABLE_SECTOR_SELECT ?? isStock,
            ENABLE_PRIMARY_TOGGLE: i.ENABLE_PRIMARY_TOGGLE ?? true,
            ENABLE_HOVER_TOOLTIP: i.ENABLE_HOVER_TOOLTIP ?? true,
            ENABLE_CLICK_TOOLTIP: i.ENABLE_CLICK_TOOLTIP ?? true,
            ENABLE_OVERVIEW_LINK: i.ENABLE_OVERVIEW_LINK ?? true,
            ENABLE_CHART_LINK: i.ENABLE_CHART_LINK ?? true,
            AUTO_UPDATE: i.AUTO_UPDATE ?? false,
            ...i.AUTO_UPDATE_INTERVAL && {
                AUTO_UPDATE_INTERVAL: parseInt(i.AUTO_UPDATE_INTERVAL)
            },
            ENABLE_STORAGE: i.ENABLE_STORAGE ?? false
        });
    }
}