import { LightningElement, api } from "lwc";
import { CodeBlockItem } from "typings/custom";
import { safeDecodeURI, toJson, normalizeBoolean } from "dxUtils/normalizers";
import { DARK } from "dx/codeBlock";

export default class TabbedCodeBlock extends LightningElement {
    _codeBlocks: CodeBlockItem[] = [];
    private _showLoadingIndicator: boolean = false;

    // By default, we want a dark theme for the tabbed code block; however, if the user changes the theme of any code block, it updates the same across the entire website.
    @api defaultTheme = DARK;

    @api
    get showLoadingIndicator() {
        return this._showLoadingIndicator;
    }

    set showLoadingIndicator(value) {
        this._showLoadingIndicator = normalizeBoolean(value);
    }

    get tabs(): string {
        // Use the code block headers to create a tabs array as a JSON string
        return JSON.stringify(
            this._codeBlocks.map((codeBlock) => ({ label: codeBlock.header }))
        );
    }

    // We need to pass the attribute as decodedURI(JSON.stringify(codeBlocksArray)) to avoid issues with single and double quotes in the code block content.
    @api
    set codeBlocks(value: string) {
        if (value) {
            // Decode the encoded code block JSON string
            const decodeCodeBlockJson = safeDecodeURI(value);
            try {
                const codeBlockItems = toJson(decodeCodeBlockJson);
                this._codeBlocks = codeBlockItems.map(
                    (codeBlock: CodeBlockItem) => {
                        return {
                            ...codeBlock,
                            defaultTheme: this.defaultTheme
                        };
                    }
                );
            } catch (exception) {
                console.log("Invalid codeblock items json", exception);
            }
        }
    }

    get codeBlocks(): CodeBlockItem[] {
        return this._codeBlocks;
    }
}