import { GOVBRSuggest } from '../../suggest/1.2.0/GOVBRSuggest.mjs';

/**
 * Classe para o UC para exibir etapas sequênciais.
 */
class GOVBREtapasUC {
    /**
     * @type {import("./GOVBREtapasUserControl.mjs").GOVBREtapasUserControl}
     */
    userControl;
    /**
     * @type {HTMLElement}
     */
    host;

    /**
     * @type {GOVBRSuggest}
     */
    suggest;

    /**
     * @param {import("./GOVBREtapasUserControl.mjs").GOVBREtapasUserControl} userControl
     * @param {HTMLElement} host
     */
    constructor(userControl, host) {
        this.userControl = userControl;
        this.host = host;

        this.host.style.setProperty('width', this.userControl.LARGURA_COMPONENTE || '');

        GOVBRPlataformaJS.importarStyleSheet(this.userControl.URL_CDN, 'etapas', this.userControl.VERSAO_JS_COMPONENTE, 'GOVBREtapasUC', this.host).then(() => {
            GOVBR.logs.debug('Etapas - Carregado');
            GOVBR.logs.debug(this);
            this.atualizaEtapas();
        });
    }

    /**
     * Cria/atualiza as etapas no elemento.
     */
    atualizaEtapas() {
        this.host.innerHTML = '';

        /**
         * @type {HTMLElement}
         */
        let elementoAtual = null;
        (this.userControl.ETAPAS || []).forEach((etapa, idx) => {
            const baseEtapa = document.createElement('div');
            baseEtapa.classList.add('govbr-etapas-etapa');
            baseEtapa.id = 'etapa-' + etapa.id;
            baseEtapa.style.setProperty('--idx', '' + idx);

            const corFundo = this.getCorFundoEtapa(etapa);
            const corFrente = this.getCorFrenteEtapa(corFundo);
            baseEtapa.style.setProperty('--cor-fundo', corFundo);
            baseEtapa.style.setProperty('--cor-frente', corFrente);

            const tituloShadow = document.createElement('div');
            tituloShadow.classList.add('govbr-etapas-etapa-shadow');
            baseEtapa.append(tituloShadow);
            const titulo = document.createElement('h3');
            const textoTitulo = document.createElement('span');
            textoTitulo.innerText = etapa.nome || '';
            textoTitulo.classList.add('govbr-etapas-etapa-titulo-texto');
            titulo.append(textoTitulo);
            titulo.classList.add('govbr-etapas-etapa-titulo');
            tituloShadow.append(titulo);

            const tags = (etapa.tags || []).slice();
            if (etapa.situacao) {
                const cor = this.getCorSituacao(etapa.situacao);
                if (cor) {
                    const iconeSituacao = this.getIconeSituacao(etapa.situacao);
                    baseEtapa.classList.add('govbr-etapas-etapa-' + etapa.situacao.toLowerCase());
                    tags.unshift({
                        nome: etapa.situacao[0] + etapa.situacao.substring(1).toLowerCase(),
                        icone: iconeSituacao,
                        corFundo: cor,
                        corFrente: this.getCorFrenteEtapa(cor),
                        larguraMaxima: true,
                    });
                    if (!elementoAtual && etapa.situacao === 'EXECUTANDO') {
                        elementoAtual = baseEtapa;
                    }
                    const icone = document.createElement('i');
                    icone.className = iconeSituacao + ' govbr-etapas-etapa-tag-icone';
                    titulo.prepend(icone);
                }
            }
            baseEtapa.addEventListener('click', () => {
                if (baseEtapa.hasAttribute('data-aberta')) {
                    return;
                }
                baseEtapa.setAttribute('data-aberta', '');
                const margemEsquerda = parseInt(getComputedStyle(baseEtapa).getPropertyValue('margin-right')) || 0;
                const larguraEtapa = baseEtapa.getBoundingClientRect().width + margemEsquerda;
                this.suggest = new GOVBRSuggest(document.body);
                this.suggest.forcePosicaoX = 'inicio-apos';
                const divSuggest = this.suggest.abreSuggest(baseEtapa, () => {
                    baseEtapa.removeAttribute('data-aberta');
                });
                divSuggest.classList.add('govbr-etapas-suggest');
                divSuggest.style.setProperty('width', larguraEtapa + 'px');
                divSuggest.style.setProperty('--cor-fundo', corFundo);
                divSuggest.style.setProperty('--cor-frente', corFrente);
                this.montaConteudoEtapa(divSuggest, etapa, tags);
            });

            this.host.append(baseEtapa);
        });

        if (elementoAtual?.scrollIntoView) {
            elementoAtual?.scrollIntoView({
                inline: 'start',
            });
        }
    }

    /**
     *
     * @param {HTMLElement} baseEtapa
     * @param {import("./GOVBREtapasUserControl.mjs").GOVBREtapasUCEtapa} etapa
     * @param {import("./GOVBREtapasUserControl.mjs").GOVBREtapasUCEtapaTag[]} tags
     */
    montaConteudoEtapa(baseEtapa, etapa, tags) {
        const titulo = document.createElement('h3');
        titulo.innerText = etapa.nome || '';
        titulo.classList.add('govbr-etapas-etapa-conteudo-titulo');
        baseEtapa.append(titulo);
        this.montaTagsEtapa(baseEtapa, tags);
        const conteudo = document.createElement('p');
        conteudo.classList.add('govbr-etapas-etapa-conteudo');
        conteudo.innerText = etapa.conteudo || '';
        baseEtapa.append(conteudo);
        this.montaTagsRodapeEtapa(baseEtapa, etapa.tagsRodape || []);
    }

    /**
     * Monta as tags para a etapa.
     * @param {HTMLElement} baseEtapa
     * @param {import("./GOVBREtapasUserControl.mjs").GOVBREtapasUCEtapaTag[]} tags
     */
    montaTagsEtapa(baseEtapa, tags) {
        if (!tags.length) {
            return;
        }
        const baseTags = document.createElement('ul');
        baseTags.classList.add('govbr-etapas-etapa-tags');
        baseEtapa.append(baseTags);
        tags.forEach((tag) => {
            const elTag = document.createElement('li');
            elTag.classList.add('govbr-etapas-etapa-tag');
            elTag.style.setProperty('--cor-fundo', tag.corFundo);
            elTag.style.setProperty('--cor-frente', tag.corFrente);
            const titulo = (tag.titulo || '').trim();
            if (titulo) {
                let suggestHint = new GOVBRSuggest(document.body);
                suggestHint.forcePosicaoX = 'inicio-apos';
                suggestHint.aplicaHint(elTag, titulo);
            }

            if (tag.icone) {
                const icone = document.createElement('i');
                icone.className = tag.icone + ' govbr-etapas-etapa-tag-icone';
                elTag.append(icone);
            }
            const spanTexto = document.createElement('span');
            spanTexto.classList.add('govbr-etapas-etapa-tag-texto');
            spanTexto.innerText = tag.nome;
            elTag.append(spanTexto);
            if (tag.larguraMaxima) {
                elTag.style.setProperty('width', '100%');
            }

            baseTags.append(elTag);
        });
    }

    /**
     * Monta as tags do rodapé para a etapa.
     * @param {HTMLElement} baseEtapa
     * @param {import("./GOVBREtapasUserControl.mjs").GOVBREtapasUCEtapaTagRodape[]} tags
     */
    montaTagsRodapeEtapa(baseEtapa, tags) {
        if (!tags.length) {
            return;
        }
        const baseTags = document.createElement('ul');
        baseTags.classList.add('govbr-etapas-etapa-tags-rodape');
        baseEtapa.append(baseTags);
        tags.forEach((tag) => {
            const elTag = document.createElement('li');
            elTag.classList.add('govbr-etapas-etapa-tag-rodape');
            elTag.innerText = tag.texto;
            const titulo = (tag.titulo || '').trim();
            if (titulo) {
                let suggestHint = new GOVBRSuggest(document.body);
                suggestHint.forcePosicaoX = 'inicio-apos';
                suggestHint.aplicaHint(elTag, titulo);
            }

            if (tag.icone) {
                const icone = document.createElement('i');
                icone.className = tag.icone + ' govbr-etapas-etapa-tag-icone';
                elTag.prepend(icone);
            }

            baseTags.append(elTag);
        });
    }

    /**
     * Retorna a cor a ser utilizada para a etapa.
     * @param {import("./GOVBREtapasUserControl.mjs").GOVBREtapasUCEtapa} etapa
     */
    getCorFundoEtapa(etapa) {
        if (etapa.cor) {
            return etapa.cor;
        }
        return this.getCorSituacao(etapa.situacao) || '#b5b7bd';
    }

    /**
     * Retorna a cor para a situação.
     * @param {import("./GOVBREtapasUserControl.mjs").GOVBREtapasUCSituacao} situacao
     * @returns string
     */
    getCorSituacao(situacao) {
        switch (situacao) {
            case 'CONCLUIDO':
                return '#04995d';
            case 'EXECUTANDO':
                return '#0073ae';
            case 'AGUARDANDO':
                return '#808080';
        }
        return '';
    }

    /**
     * Retorna a cor para a situação.
     * @param {import("./GOVBREtapasUserControl.mjs").GOVBREtapasUCSituacao} situacao
     * @returns string
     */
    getIconeSituacao(situacao) {
        switch (situacao) {
            case 'CONCLUIDO':
                return 'fa-solid fa-check';
            case 'EXECUTANDO':
                return 'fa-solid fa-forward';
            case 'AGUARDANDO':
                return 'fa-solid fa-clock';
        }
        return '';
    }

    /**
     * Retorna a cor do textoa ser utilizada para a etapa.
     * @param {string} corFundo
     */
    getCorFrenteEtapa(corFundo) {
        return GOVBRPlataformaJS.ColorUtils.calculaCorTextoFundo(corFundo);
    }
}

// Caso esteja no browser, disponibiliza o widget no objeto de window.
if (typeof window !== 'undefined') {
    // @ts-ignore
    window['GOVBREtapasUC'] = GOVBREtapasUC;
}
export { GOVBREtapasUC };
