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

import { STORAGE, generateCoinLogoHtml, getValueStyle, buildDynamicUrl, smartSearch, getLang } from "../../utils/helper.js";

import { CustomModal } from "../../components/custom-modal.js";

import { Screener } from "../../components/screener_table.js";

if (typeof window !== "undefined") {
    if (!window.sendPostRequest) window.sendPostRequest = sendPostRequest;
    if (!window.addThousandSeparator) window.addThousandSeparator = addThousandSeparator;
    if (!window.generateCoinLogoHtml) window.generateCoinLogoHtml = generateCoinLogoHtml;
    if (!window.getValueStyle) window.getValueStyle = getValueStyle;
    if (!window.buildDynamicUrl) window.buildDynamicUrl = buildDynamicUrl;
    if (!window.smartSearch) window.smartSearch = smartSearch;
    if (!window.getLang) window.getLang = getLang;
    if (!window.STORAGE) window.STORAGE = STORAGE;
    if (!window.scrollToCenter) window.scrollToCenter = scrollToCenter;
    if (!window.initCustomSelects) window.initCustomSelects = initCustomSelects;
    if (!window.CustomModal) window.CustomModal = CustomModal;
}

export class VunelivScreenerBase extends VunelivBase {
    static widgetCss=[ "pages/screener", "layouts/screener_table" ];
    static assetType="crypto";
    clampConfig(c) {
        if (c.per_page > 300) c.per_page = 50;
    }
    static branding_bar=true;
    getSkeletonHtml() {
        return `\n            <div class="screener-main-content">\n                <div class="">\n                    <div class="data-controls">\n                        <div class="data-controls-left">\n                            <div class="control-buttons-scroll">\n                                <button class="control-btn skeleton" style="width:80px;height:32px"></button>\n                                <button class="control-btn skeleton" style="width:100px;height:32px"></button>\n                                <button class="control-btn skeleton" style="width:90px;height:32px"></button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class="fx-table-scroll-shadow">\n                    <div class="screener-table-container loading" aria-busy="true">\n                        <div class="skeleton-loading-wrapper" aria-hidden="true">\n                            <table class="skeleton-table">\n                                <thead><tr>\n                                    <th class="skeleton-th-fav"><span class="skeleton skeleton-star"></span></th>\n                                    <th class="skeleton-th-name"><span class="skeleton skeleton-header-name"></span></th>\n                                    <th><span class="skeleton skeleton-header-price"></span></th>\n                                    <th><span class="skeleton skeleton-header-change"></span></th>\n                                    <th><span class="skeleton skeleton-header-volume"></span></th>\n                                    <th><span class="skeleton skeleton-header-cap"></span></th>\n                                    <th><span class="skeleton skeleton-header-change"></span></th>\n                                </tr></thead>\n                                <tbody>${Array(5).fill(0).map(() => `\n                                    <tr>\n                                        <td class="skeleton-td-fav"><span class="skeleton skeleton-star"></span></td>\n                                        <td class="skeleton-td-name">\n                                            <div class="skeleton-name-cell">\n                                                <div class="skeleton skeleton-logo"></div>\n                                                <div class="skeleton-coin-details">\n                                                    <div class="skeleton skeleton-symbol"></div>\n                                                    <div class="skeleton skeleton-name"></div>\n                                                </div>\n                                            </div>\n                                        </td>\n                                        <td><span class="skeleton skeleton-value"></span></td>\n                                        <td><span class="skeleton skeleton-value"></span></td>\n                                        <td><span class="skeleton skeleton-value"></span></td>\n                                        <td><span class="skeleton skeleton-value"></span></td>\n                                        <td><span class="skeleton skeleton-value"></span></td>\n                                    </tr>`).join("")}\n                                </tbody>\n                            </table>\n                        </div>\n                    </div>\n                </div>\n            </div>`;
    }
    onReady(root, config) {
        const assetType = this.constructor.assetType;
        const sort = config.SORT_BY_COLUMN && config.SORT_BY_DIRECTION ? {
            column: config.SORT_BY_COLUMN,
            direction: config.SORT_BY_DIRECTION
        } : null;
        new Screener({
            config: {
                CURRENT_ASSET_TYPE: config.CURRENT_ASSET_TYPE || assetType,
                API_BASE_PATH: config.API_BASE_PATH || assetType,
                PER_PAGE: parseInt(config.PER_PAGE) || 50,
                DEFAULT_PRESET: config.DEFAULT_PRESET || "overview",
                DEFAULT_TIME_PERIOD: config.DEFAULT_TIME_PERIOD || "1D",
                DEFAULT_COUNTRY: config.DEFAULT_COUNTRY || "US",
                DEFAULT_IS_PRIMARY: config.DEFAULT_IS_PRIMARY ?? 1,
                ENABLE_FILTER_MANAGER: config.ENABLE_FILTER_MANAGER !== false,
                SHOW_FAVORITES_ADD_REMOVE: config.SHOW_FAVORITES_ADD_REMOVE !== false,
                ENABLE_COLOR_GROUPS: config.ENABLE_COLOR_GROUPS !== false,
                SHOW_COLUMNS_BUTTON: config.SHOW_COLUMNS_BUTTON !== false,
                ENABLE_SORT: config.ENABLE_SORT !== false,
                ENABLE_STORAGE: config.ENABLE_STORAGE !== false,
                ENABLE_INFINITE_SCROLL: !!config.ENABLE_INFINITE_SCROLL,
                SHOW_TICKER: config.SHOW_TICKER !== false,
                SHOW_DESCRIPTION: config.SHOW_DESCRIPTION !== false,
                SHOW_LOGO: config.SHOW_LOGO !== false,
                SHOW_CURRENCY: config.SHOW_CURRENCY !== false,
                enableLinks: config.enableLinks !== false,
                linkUrl: config.linkUrl || null,
                linkTarget: config.linkTarget || "_self",
                ...config.CUSTOM_PRESETS ? {
                    CUSTOM_PRESETS: config.CUSTOM_PRESETS
                } : {},
                ...config.DEFAULT_FILTERS ? {
                    EMBED_DEFAULT_FILTERS: config.DEFAULT_FILTERS
                } : {}
            },
            state: {
                ...sort ? {
                    currentSort: sort
                } : {},
                storageKey: `widget_${assetType}`,
                favStorageKey: `widget_watchlist_${assetType}`
            },
            rootNode: root
        });
    }
}