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

export const MESES = [
    'Janeiro',
    'Fevereiro',
    'Março',
    'Abril',
    'Maio',
    'Junho',
    'Julho',
    'Agosto',
    'Setembro',
    'Outubro',
    'Novembro',
    'Dezembro',
];

const DIAS_SEMANA = [
    'Domingo',
    'Segunda-Feira',
    'Terça-Feira',
    'Quarta-Feira',
    'Quinta-Feira',
    'Sexta-Feira',
    'Sabado',
];

/**
 * Classe para o UC de linha do tempo
 */
class GOVBRTimelineUC {
    /**
     * @type {import("./GOVBRTimelineUserControl.mjs").GOVBRTimelineUserControl}
     */
    userControl;
    /**
     * @type {HTMLElement}
     */
    host;
    /**
     * @type {HTMLElement}
     */
    acoes;
    /**
     * @type {HTMLElement}
     */
    container;

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

    /**
     * @type {number}
     */
    idxAtual = -1;
    /**
     * @type {number}
     */
    idxAnimacaoAtual = 0;
    /**
     * @type {number}
     */
    timeoutCloseAcoes = null;

    /**
     * @type {boolean}
     */
    isInvertido = false;

    /**
     * @param {import('./GOVBRTimelineUserControl.mjs').GOVBRTimelineUserControl} userControl
     * @param {HTMLElement} host
     */
    constructor(userControl, host) {
        this.userControl = userControl;
        this.host = host;
        this.acoes = document.createElement('div');
        this.acoes.className = 'govbr-timeline-base-acoes';
        this.host.append(this.acoes);
        this.host.style.setProperty('height', this.userControl.ALTURA_COMPONENTE || '');
        this.host.style.setProperty('width', this.userControl.LARGURA_COMPONENTE || '');
        this.suggest = new GOVBRSuggest(this.host);
        this.suggestHint = new GOVBRSuggest(this.host);
        const scroll = document.createElement('div');
        scroll.className = 'govbr-timeline-base-scroll';
        scroll.addEventListener(
            'scroll',
            () => {
                this.suggest.fechaSuggest();
            },
            { passive: true }
        );
        this.container = document.createElement('div');
        this.container.className = 'govbr-timeline-base-container';
        this.host.append(scroll);
        scroll.append(this.container);
        if (this.userControl.ALTURA_COMPONENTE && this.userControl.ALTURA_COMPONENTE !== '100%') {
            scroll.style.setProperty('max-height', 'initial');
        }

        this.host.style.display = 'none';
        let stylesRestante = 2;
        GOVBRPlataformaJS.importarStyleSheet(this.userControl.URL_CDN, 'linha-tempo', this.userControl.VERSAO_JS_COMPONENTE, 'GOVBRTimelineUC', this.host).then(() => {
            stylesRestante--;
            if (!stylesRestante) {
                this.host.style.display = '';
            }
            this.recalculaPosicoesCards();
        });
        let formato = (this.userControl.FORMATO_EXIBICAO || 'HORIZONTAL').toLowerCase().split('-')[0];
        formato = formato[0].toUpperCase() + formato.substring(1);
        GOVBRPlataformaJS.importarStyleSheet(this.userControl.URL_CDN, 'linha-tempo', this.userControl.VERSAO_JS_COMPONENTE, 'GOVBRTimeline' + formato + 'UC', this.host).then(
            () => {
                stylesRestante--;
                if (!stylesRestante) {
                    this.host.style.display = '';
                }
                this.recalculaPosicoesCards();
            }
        );
        GOVBR.logs.debug('Linha do Tempo - Carregado');
        GOVBR.logs.debug(this);

        this.recriaBotoesAcoes();
        this.recriaConteudoItens();

        this.container.style.setProperty('overflow', 'hidden');
        this.container.style.setProperty('pointer-events', 'none');
        this.container.addEventListener('animationend', (event) => {
            if (event.animationName == 'govbr-timeline-base-container') {
                this.container.style.setProperty('overflow', '');
                this.container.style.setProperty('pointer-events', '');

                const abertos = this.container.querySelectorAll('.govbr-timeline-card-aberto');
                if (abertos.length) {
                    const bBHost = this.container.getBoundingClientRect();
                    const bBAberto = abertos[abertos.length - 1].getBoundingClientRect();
                    const scroll = bBAberto.top - bBHost.top;
                    this.container.scrollTo({ behavior: 'smooth', top: scroll });
                }
                this.recalculaPosicoesCards();
            }
            /** @type {HTMLElement} */ (event.target).classList.add('govbr-timeline-ignora-animacao');
        });

        document.body.addEventListener('click', (event) => {
            if (!this.acoes.contains(/** @type {HTMLElement} */ (event.target)) && this.acoes.classList.contains('govbr-timeline-base-acoes-aberta')) {
                this.acoes.classList.remove('govbr-timeline-base-acoes-aberta');
                this.acoes.classList.remove('govbr-timeline-base-acoes-aberta-full');
                this.timeoutCloseAcoes = setTimeout(
                    () => {
                        this.timeoutCloseAcoes = null;
                        this.acoes.classList.remove('govbr-timeline-base-acoes-reproduzindo-animacao');
                    },
                    ((parseInt(this.acoes.style.getPropertyValue('--total-filhos')) || 0) + 1) * 50
                );
            }
        });
    }

    /**
     * Monta o conteúdo HTML para as ações
     */
    recriaBotoesAcoes() {
        this.acoes.innerHTML = '';

        let possuiNaoAbertos = false;
        let possuiNaoFechados = false;

        /**
         * @param {import('./GOVBRTimelineUserControl.mjs').GOVBRTimelineItem} item
         */
        const buscaItens = (item) => {
            if (item.aberto) {
                possuiNaoFechados = true;
            } else {
                possuiNaoAbertos = true;
            }
            if (possuiNaoAbertos && possuiNaoFechados) {
                return;
            }
            if (item.Filhos?.length) {
                item.Filhos.forEach(buscaItens);
            }
        };
        this.userControl.ITENS_EXIBICAO.forEach(buscaItens);

        /**
         * @param {boolean} aberto
         */
        const colapsaExpande = (aberto) => {
            /**
             * @param {import('./GOVBRTimelineUserControl.mjs').GOVBRTimelineItem} item
             */
            const aplicaCollapse = (item) => {
                item.aberto = aberto;
                if (item.Filhos?.length) {
                    item.Filhos.forEach(aplicaCollapse);
                }
            };
            this.userControl.ITENS_EXIBICAO.forEach(aplicaCollapse);
            this.recriaBotoesAcoes();
            this.recriaConteudoItens();
        };

        const abrirAcoes = document.createElement('button');
        abrirAcoes.type = 'button';
        abrirAcoes.title = 'Abrir Ações';
        abrirAcoes.className = 'govbr-timeline-base-acoes-botao-dropdown';
        abrirAcoes.addEventListener('click', (e) => {
            if (this.acoes.classList.contains('govbr-timeline-base-acoes-aberta')) {
                this.acoes.classList.remove('govbr-timeline-base-acoes-aberta');
                this.timeoutCloseAcoes = setTimeout(
                    () => {
                        this.timeoutCloseAcoes = null;
                        this.acoes.classList.remove('govbr-timeline-base-acoes-reproduzindo-animacao');
                    },
                    (idxEl + 1) * 50
                );
            } else {
                if (this.timeoutCloseAcoes) {
                    clearTimeout(this.timeoutCloseAcoes);
                    this.timeoutCloseAcoes = null;
                }
                this.acoes.classList.add('govbr-timeline-base-acoes-aberta');
                this.acoes.classList.add('govbr-timeline-base-acoes-reproduzindo-animacao');
            }
        });
        const iconeAbrir = document.createElement('i');
        iconeAbrir.className = 'fa-solid fa-bars';
        abrirAcoes.prepend(iconeAbrir);
        this.acoes.append(abrirAcoes);

        let idxEl = 0;

        const inverter = document.createElement('button');
        inverter.type = 'button';
        inverter.title = 'Inverter a Ordem dos Itens';
        inverter.innerText = 'Inverter';
        inverter.className = 'govbr-timeline-acoes-inverter';
        inverter.style.setProperty('--delay-animacao', '' + idxEl++);
        inverter.addEventListener('click', (e) => {
            this.isInvertido = !this.isInvertido;
            this.recriaBotoesAcoes();
            this.recriaConteudoItens();
            e.preventDefault();
        });
        const iconeInverter = document.createElement('i');
        iconeInverter.className = 'fa-regular ' + (this.isInvertido ? 'fa-square-check' : 'fa-square');
        inverter.prepend(iconeInverter);
        this.acoes.append(inverter);

        (this.userControl?.BOTOES_CABECALHO || []).forEach((botao) => {
            const itemBotao = document.createElement('button');
            itemBotao.type = 'button';
            itemBotao.classList.add('govbr-timeline-acoes-especificas');
            itemBotao.style.setProperty('--delay-animacao', '' + idxEl++);
            itemBotao.setAttribute('data-identificador', botao.identificador);
            itemBotao.innerText = botao.texto;
            itemBotao.title = botao.texto;
            if (botao.classeIcone) {
                const icone = document.createElement('i');
                icone.className = 'govbr-timeline-botao-icone ' + botao.classeIcone;
                itemBotao.prepend(icone);
                itemBotao.classList.add('govbr-timeline-suggest-botao-possui-icone');
            }
            if (botao.corFrente) {
                itemBotao.style.setProperty('--cor-texto', botao.corFrente);
                itemBotao.style.setProperty('--cor-fundo', botao.corFundo);
            }
            this.acoes.append(itemBotao);
            itemBotao.addEventListener('click', (e) => {
                e.preventDefault();
                this.disparaClickBotaoItem(null, null, botao.identificador);
            });
        });

        const expandirTodos = document.createElement('button');
        expandirTodos.type = 'button';
        expandirTodos.title = 'Expandir Todos os Itens';
        expandirTodos.innerText = 'Expandir';
        expandirTodos.className = 'govbr-timeline-acoes-expandir';
        expandirTodos.style.setProperty('--delay-animacao', '' + idxEl++);
        expandirTodos.addEventListener('click', (e) => {
            colapsaExpande(true);
            e.preventDefault();
        });
        const iconeExpandir = document.createElement('i');
        iconeExpandir.className = 'fa-solid fa-square-plus';
        expandirTodos.prepend(iconeExpandir);
        this.acoes.append(expandirTodos);
        if (!possuiNaoAbertos) {
            expandirTodos.disabled = true;
        }

        const colapsarTodos = document.createElement('button');
        colapsarTodos.type = 'button';
        colapsarTodos.title = 'Recolher Todos os Itens';
        colapsarTodos.innerText = 'Recolher';
        colapsarTodos.className = 'govbr-timeline-acoes-colapsar';
        colapsarTodos.style.setProperty('--delay-animacao', '' + idxEl++);
        colapsarTodos.addEventListener('click', (e) => {
            colapsaExpande(false);
            e.preventDefault();
        });
        const iconeColapsar = document.createElement('i');
        iconeColapsar.className = 'fa-solid fa-square-minus';
        colapsarTodos.prepend(iconeColapsar);
        this.acoes.append(colapsarTodos);
        if (!possuiNaoFechados) {
            colapsarTodos.disabled = true;
        }

        this.acoes.style.setProperty('--total-filhos', '' + idxEl);
    }

    /**
     * Monta o conteudo HTML para os itens.
     */
    recriaConteudoItens() {
        let itens = (this.userControl.ITENS_EXIBICAO || []).slice();
        if (this.isInvertido) {
            itens = itens.reverse();
        }
        this.host.className = 'govbr-timeline-base govbr-timeline-' + (this.userControl.FORMATO_EXIBICAO || 'HORIZONTAL').toLowerCase();
        this.container.innerHTML = '';
        this.idxAtual = -1;
        this.idxAnimacaoAtual = 0;
        /**
         * @param {import("./GOVBRTimelineUserControl.mjs").GOVBRTimelineItem} item
         * @param {number} idx
         * @param {boolean} filho
         */
        const montaItem = (item, idx, filho) => {
            this.montaItem(item, idx, filho, !!item.Filhos?.length);
            this.montaIcone(item, idx, filho, !!item.Filhos?.length);
            item.__carregado = true;
            if (item.Filhos) {
                item.Filhos.forEach((e) => montaItem(e, idx, true));
            }
        };
        itens.forEach((item, idx) => montaItem(item, idx, false));
        this.container.style.setProperty('--total-itens', '' + (this.idxAtual + 1));
        this.recalculaPosicoesCards();
    }

    /**
     * Monta o card para o item.
     * @param {import("./GOVBRTimelineUserControl.mjs").GOVBRTimelineItem} item
     * @param {number} idx
     * @param {boolean} filho
     * @param {boolean} possuiFilho
     */
    montaItem(item, idx, filho, possuiFilho) {
        this.idxAtual++;
        const card = document.createElement('article');
        card.style.setProperty('--idx', '' + this.idxAtual);
        card.style.setProperty('--idx-animacao', '' + this.idxAnimacaoAtual);
        card.setAttribute('data-identificador', item.identificador);
        card.classList.add('govbr-timeline-card');
        if (item.__carregado) {
            card.classList.add('govbr-timeline-ignora-animacao');
        } else if (this.idxAnimacaoAtual < 5) {
            this.idxAnimacaoAtual++;
        }
        if (filho) {
            card.classList.add('govbr-timeline-card-filho');
        }
        if (possuiFilho) {
            card.classList.add('govbr-timeline-card-possui-filho');
        }
        if (idx % 2 === 1) {
            card.classList.add('govbr-timeline-card-impar');
        }
        if (item.corFundo) {
            card.style.setProperty('--cor-fundo', item.corFundo);
            card.style.setProperty('--cor-texto', GOVBRPlataformaJS.ColorUtils.calculaCorTextoFundo(item.corFundo));
        }

        this.montaCabecalhoItem(card, item);

        const conteudo = document.createElement('div');
        conteudo.classList.add('govbr-timeline-conteudo');
        conteudo.innerHTML = item.conteudoHTML || '<p class="govbr-timeline-sem-conteudo">Sem mais informações para exibir</p>';
        card.append(conteudo);

        this.montaSecoesItem(card, item);

        if (item.Botoes?.length) {
            const areaBotoes = document.createElement('div');
            areaBotoes.classList.add('govbr-timeline-botoes');
            this.montaBotoesItem(item, areaBotoes);
            card.append(areaBotoes);
        }

        if (item.rodapeHTML) {
            const rodape = document.createElement('div');
            rodape.classList.add('govbr-timeline-rodape');
            rodape.innerHTML = item.rodapeHTML;
            card.append(rodape);
        }

        this.container.append(card);
    }

    /**
     * Monta o card para o item.
     * @param {HTMLElement} card
     * @param {import("./GOVBRTimelineUserControl.mjs").GOVBRTimelineItem} item
     */
    montaCabecalhoItem(card, item) {
        const cabecalho = document.createElement('div');
        cabecalho.classList.add('govbr-timeline-cabecalho');
        const titulo = document.createElement('h3');
        if (item.titulo) {
            titulo.innerText = item.titulo;
        }
        titulo.classList.add('govbr-timeline-titulo');
        if (item.conteudoHTML) {
            titulo.classList.add('govbr-timeline-titulo-clicavel');
            const abrir = document.createElement('i');
            abrir.className = 'govbr-timeline-abrir fa-solid ' + (item.aberto ? 'fa-minus' : 'fa-plus');
            if (item.aberto) {
                card.classList.add('govbr-timeline-card-aberto');
            }
            titulo.addEventListener('click', () => {
                item.aberto = !item.aberto;
                this.recriaBotoesAcoes();
                this.recriaConteudoItens();
            });
            titulo.append(abrir);
        }
        cabecalho.append(titulo);
        if (item.nomePessoa) {
            const nome = document.createElement('p');
            nome.classList.add('govbr-timeline-nome');
            if (this.userControl.FORMATO_EXIBICAO == 'VERTICAL-LATERAL') {
                nome.innerText = 'Por: ' + item.nomePessoa;
            } else {
                nome.innerText = item.nomePessoa;
            }
            cabecalho.append(nome);
        }
        if (item.dataHora) {
            const data = new Date(item.dataHora);
            if (data?.getTime?.() && data.getTime() > 0) {
                const dataHora = document.createElement('p');
                dataHora.classList.add('govbr-timeline-data-hora');
                let dataTexto;
                const horaTexto =
                    data.getHours().toString().padStart(2, '0') + ':' + data.getMinutes().toString().padStart(2, '0') + ':' + data.getSeconds().toString().padStart(2, '0');
                if (this.userControl.FORMATO_EXIBICAO == 'VERTICAL-LATERAL') {
                    dataTexto =
                        DIAS_SEMANA[data.getDay()] +
                        ', ' +
                        data.getDate().toString().padStart(2, '0') +
                        ' de ' +
                        MESES[data.getMonth()] +
                        ' de ' +
                        data.getFullYear().toString().padStart(4, '0');
                    dataHora.innerText = 'em ' + dataTexto + ' as ' + horaTexto;
                } else {
                    dataTexto =
                        data.getDate().toString().padStart(2, '0') + '/' + (data.getMonth() + 1).toString().padStart(2, '0') + '/' + data.getFullYear().toString().padStart(4, '0');
                    dataHora.innerText = dataTexto + ' ' + horaTexto;
                }
                cabecalho.append(dataHora);
            }
        }
        if (item.Tags?.length) {
            this.montaTagsCabecalhoItem(cabecalho, item.Tags);
        }
        card.append(cabecalho);
    }

    /**
     * Monta uma seção para o card do item.
     * @param {HTMLElement} card
     * @param {import("./GOVBRTimelineUserControl.mjs").GOVBRTimelineItem} item
     */
    montaSecoesItem(card, item) {
        item.Secoes?.forEach?.((secao) => {
            if (secao.Itens.length) {
                const elSecao = document.createElement('div');
                elSecao.classList.add('govbr-timeline-secao');
                const titulo = document.createElement('h4');
                titulo.classList.add('govbr-timeline-secao-titulo');
                titulo.innerText = secao.titulo + ' (' + secao.Itens.length + ')';
                if (secao.classeIcone) {
                    const icone = document.createElement('i');
                    icone.className = secao.classeIcone;
                    icone.classList.add('govbr-timeline-secao-icone');
                    titulo.prepend(icone);
                }
                elSecao.append(titulo);

                secao.Itens.forEach((subitem) => {
                    const containerItem = document.createElement('article');
                    containerItem.classList.add('govbr-timeline-secao-item');
                    containerItem.tabIndex = 0;
                    if (subitem.linkImagem) {
                        containerItem.classList.add('govbr-timeline-secao-item-possui-imagem');
                        const img = document.createElement('img');
                        img.ariaHidden = 'true';
                        img.src = subitem.linkImagem;
                        img.classList.add('govbr-timeline-secao-item-imagem');
                        img.addEventListener('error', () => {
                            containerItem.classList.remove('govbr-timeline-secao-item-possui-imagem');
                            img.remove();
                        });
                        containerItem.append(img);
                    }
                    if (subitem.Hint) {
                        const spanHint = document.createElement('span');
                        spanHint.classList.add('govbr-timeline-secao-item-hint', 'fa-solid', 'fa-question-circle');
                        this.suggestHint.aplicaHint(spanHint, subitem.Hint);
                        containerItem.append(spanHint);
                    }
                    if (subitem.recusado) {
                        const spanRecusa = document.createElement('span');
                        spanRecusa.classList.add('govbr-timeline-secao-item-recusa');
                        spanRecusa.innerText = 'Recusado';
                        containerItem.append(spanRecusa);
                    }
                    const titulo = document.createElement('h5');
                    titulo.classList.add('govbr-timeline-secao-item-titulo');
                    titulo.title = subitem.titulo;
                    titulo.innerText = subitem.titulo;
                    containerItem.append(titulo);
                    if (subitem.Botoes?.length) {
                        containerItem.classList.add('govbr-timeline-secao-item-possui-acoes');
                        const botaoAcao = document.createElement('span');
                        botaoAcao.classList.add('govbr-timeline-secao-item-acoes');
                        botaoAcao.title = 'Ações';
                        const iconeAcao = document.createElement('i');
                        iconeAcao.className = 'fa-solid fa-chevron-down';
                        botaoAcao.append(iconeAcao);
                        containerItem.append(botaoAcao);
                        this.montaAcoesSecoesItem(containerItem, botaoAcao, item, subitem);
                    }
                    elSecao.append(containerItem);
                });

                card.append(elSecao);
            }
        });
    }

    /**
     * Monta as ações de uma seção para o card do item.
     * @param {HTMLElement} containerItem
     * @param {HTMLElement} botaoAcao
     * @param {import("./GOVBRTimelineUserControl.mjs").GOVBRTimelineItem} item
     * @param {import("./GOVBRTimelineUserControl.mjs").GOVBRTimelineSubitem} subitem
     */
    montaAcoesSecoesItem(containerItem, botaoAcao, item, subitem) {
        containerItem.addEventListener('click', (event) => {
            if (/** @type {HTMLElement} */ (event.target)?.classList?.contains('govbr-timeline-secao-item-hint')) {
                return;
            }
            if (!this.suggest.isAberto(botaoAcao)) {
                const suggest = this.suggest.abreSuggest(botaoAcao);
                subitem.Botoes.forEach((botao) => {
                    const itemBotao = document.createElement('button');
                    itemBotao.type = 'button';
                    itemBotao.classList.add('govbr-timeline-suggest-botao');
                    itemBotao.setAttribute('data-identificador', botao.identificador);
                    itemBotao.innerText = botao.texto;
                    itemBotao.title = botao.texto;
                    if (botao.classeIcone) {
                        const icone = document.createElement('span');
                        icone.className = 'govbr-timeline-botao-icone ' + botao.classeIcone;
                        itemBotao.prepend(icone);
                        itemBotao.classList.add('govbr-timeline-suggest-botao-possui-icone');
                    }
                    if (botao.corFrente) {
                        itemBotao.style.setProperty('--cor-texto', botao.corFrente);
                        itemBotao.style.setProperty('--cor-fundo', botao.corFundo);
                    }
                    suggest.append(itemBotao);
                    itemBotao.addEventListener('click', (e) => {
                        e.preventDefault();
                        this.disparaClickBotaoItem(item.identificador, subitem.identificador, botao.identificador);
                    });
                });
            }
        });
    }

    /**
     * Monta as tags do cabeçalho do item.
     * @param {HTMLElement} cabecalho
     * @param {import("./GOVBRTimelineUserControl.mjs").GOVBRTimelineItemTag[]} tags
     */
    montaTagsCabecalhoItem(cabecalho, tags) {
        const lista = document.createElement('ul');
        lista.classList.add('govbr-timeline-tags');
        tags.forEach((tag) => {
            const tagHTML = document.createElement('li');
            tagHTML.classList.add('govbr-timeline-tags-tag');
            tagHTML.innerText = tag.texto;
            tagHTML.style.setProperty('--cor-texto', tag.corFrente);
            tagHTML.style.setProperty('--cor-fundo', tag.corFundo);
            lista.append(tagHTML);
        });
        cabecalho.append(lista);
    }

    /**
     * Monta os botões clicáveis para o item.
     * @param {import("./GOVBRTimelineUserControl.mjs").GOVBRTimelineItem} item
     * @param {HTMLElement} areaBotoes
     */
    montaBotoesItem(item, areaBotoes) {
        item.Botoes.forEach((botao) => {
            const itemBotao = document.createElement('button');
            itemBotao.type = 'button';
            itemBotao.classList.add('govbr-timeline-botoes-botao');
            itemBotao.setAttribute('data-identificador', botao.identificador);
            itemBotao.title = botao.texto;
            if (botao.classeIcone) {
                const icone = document.createElement('span');
                icone.className = 'govbr-timeline-botao-icone ' + botao.classeIcone;
                itemBotao.prepend(icone);
                itemBotao.classList.add('govbr-timeline-botoes-botao-possui-icone');
            } else {
                itemBotao.innerText = botao.texto;
            }
            if (botao.corFrente) {
                itemBotao.style.setProperty('--cor-texto', botao.corFrente);
                itemBotao.style.setProperty('--cor-fundo', botao.corFundo);
            }
            areaBotoes.append(itemBotao);
            itemBotao.addEventListener('click', (e) => {
                e.preventDefault();
                this.disparaClickBotaoItem(item.identificador, null, botao.identificador);
            });
        });
    }

    /**
     * Dispara o click no botão de um item para o GeneXus.
     * @param {string} item
     * @param {string} subitem
     * @param {string} botao
     */
    disparaClickBotaoItem(item, subitem, botao) {
        this.userControl.ID_ITEM_CLICADO = item || '';
        this.userControl.ID_SUBITEM_CLICADO = subitem || '';
        this.userControl.ID_BOTAO_CLICADO = botao || '';
        this.userControl?.clickBotaoItem?.();
    }

    /**
     * Monta o ícone para o item.
     * @param {import("./GOVBRTimelineUserControl.mjs").GOVBRTimelineItem} item
     * @param {number} idx
     * @param {boolean} filho
     * @param {boolean} possuiFilho
     */
    montaIcone(item, idx, filho, possuiFilho) {
        const containerIcone = document.createElement('div');
        containerIcone.style.setProperty('--idx', '' + this.idxAtual);
        containerIcone.style.setProperty('--idx-animacao', '' + this.idxAnimacaoAtual);
        containerIcone.classList.add('govbr-timeline-container-icone');
        if (item.__carregado) {
            containerIcone.classList.add('govbr-timeline-ignora-animacao');
        }
        if (filho) {
            containerIcone.classList.add('govbr-timeline-container-icone-filho');
        }
        if (possuiFilho) {
            containerIcone.classList.add('govbr-timeline-icone-possui-filho');
        }
        if (idx % 2 === 1) {
            containerIcone.classList.add('govbr-timeline-icone-impar');
        }
        if (item.corFundo) {
            containerIcone.style.setProperty('--cor-fundo', item.corFundo);
            containerIcone.style.setProperty('--cor-texto', GOVBRPlataformaJS.ColorUtils.calculaCorTextoFundo(item.corFundo));
        }
        containerIcone.ariaHidden = 'true';
        const icone = document.createElement('span');
        if (item.classeIcone) {
            icone.className = 'govbr-timeline-icone ' + item.classeIcone;
        } else {
            icone.className = 'govbr-timeline-icone govbr-timeline-nao-possui-icone';
        }
        containerIcone.append(icone);
        this.container.append(containerIcone);
    }

    /**
     * Recalcula as posições dos cards para que este estejam centralizados a seus icones.
     */
    recalculaPosicoesCards() {
        const cards = Array.from(this.container.querySelectorAll(':scope > .govbr-timeline-card'));
        const dadosCards = cards
            .map(
                /**
                 * @param {HTMLElement} card
                 * @returns
                 */
                (card) => {
                    card.style.setProperty('--translate-card', '0px');
                    return card;
                }
            )
            .map((card) => {
                const icone = card.nextElementSibling.children[0];
                const posCardX = (card.getBoundingClientRect().left + card.getBoundingClientRect().right) / 2;
                const posIconeX = (icone.getBoundingClientRect().left + icone.getBoundingClientRect().right) / 2;
                const posCardY = (card.getBoundingClientRect().top + card.getBoundingClientRect().bottom) / 2;
                const posIconeY = (icone.getBoundingClientRect().top + icone.getBoundingClientRect().bottom) / 2;
                return {
                    card,
                    icone,
                    posCardX,
                    posIconeX,
                    posCardY,
                    posIconeY,
                };
            });
        dadosCards.forEach(({ card, icone, posCardX, posIconeX, posCardY, posIconeY }, idx) => {
            if (idx === 0) {
                icone.parentElement.classList.add('govbr-timeline-icone-first');
            }
            if (idx === cards.length - 1) {
                icone.parentElement.classList.add('govbr-timeline-icone-last');
            }
            if (this.userControl.FORMATO_EXIBICAO === 'HORIZONTAL') {
                card.style.setProperty('--translate-card', posIconeX - posCardX + 'px');
            } else {
                card.style.setProperty('--translate-card', posIconeY - posCardY + 'px');
            }
        });
    }
}

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