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

import { CurrencyConverter } from "../pages/currency_converter.js";

class VunelivCurrencyConverter extends VunelivBase {
    static slug="currency-converter";
    static useSocket=false;
    static branding_bar=true;
    static branding_path="currency-converter";
    static widgetCss=[ "pages/currency_converter" ];
    getSkeletonHtml() {
        const showChart = this.dataset.show_chart !== "false" && this.dataset.showChart !== "false";
        const showRateInfo = this.dataset.show_rate_info !== "false" && this.dataset.showRateInfo !== "false";
        const showSwap = this.dataset.show_swap_btn !== "false" && this.dataset.showSwapBtn !== "false";
        const currencyBox = `\n            <div class="converter-box">\n                <span class="converter-box-label"><span class="skeleton skeleton-text skeleton-w-30"></span></span>\n                <div class="converter-box-content">\n                    <div class="converter-amount skeleton"></div>\n                    <div class="dropdown-select no-auto-highlight">\n                        <div class="select-trigger">\n                            <span class="select-trigger-text">\n                                <span class="select-option-img">\n                                    <div class="flag-icon-container">\n                                        <span class="skeleton skeleton-circle skeleton-circle-sm"></span>\n                                    </div>\n                                    <span class="skeleton skeleton-text skeleton-w-30"></span>\n                                </span>\n                            </span>\n                            <svg width="16" height="16" class="select-arrow"></svg>\n                        </div>\n                    </div>\n                </div>\n            </div>`;
        const swapBtn = showSwap ? `\n            <div class="swap-btn-wrapper">\n                <button type="button" class="swap-btn" disabled>\n                    <svg width="22" height="22"></svg>\n                </button>\n            </div>` : "";
        let rateSection = "";
        if (showRateInfo || showChart) {
            rateSection = `<div class="rate-display" aria-busy="true">`;
            if (showRateInfo) {
                rateSection += `\n                    <div class="rate-info-text">\n                        <span class="rate-main skeleton skeleton-text skeleton-w-60"></span>\n                        <span class="rate-inverse skeleton skeleton-text-sm skeleton-w-50"></span>\n                    </div>`;
            }
            if (showChart) {
                rateSection += `\n                    <div class="chart-wrapper">\n                        <div class="chart-container skeleton"></div>\n                    </div>`;
            }
            rateSection += `</div>`;
        }
        return `\n            <div class="converter-card" aria-busy="true">\n                <div class="converter-main">\n                    ${currencyBox}\n                    ${swapBtn}\n                    ${currencyBox}\n                </div>\n                ${rateSection}\n            </div>`;
    }
    onReady(root, config) {
        new CurrencyConverter({
            rootNode: root,
            addThousandSeparator: addThousandSeparator,
            initCustomSelects: initCustomSelects,
            apiEndpoint: config.API_ENDPOINT || "",
            iconPath: config.ICON_PATH || "",
            iconType: config.ICON_TYPE || ".svg",
            initial: config.CONVERTER_INITIAL || {}
        });
    }
}

customElements.define("vunelix-currency-converter", VunelivCurrencyConverter);