File: assets/js/components/lib/HeatmapComponent.js

import BuscaApi from './BuscaApiG.js';

export default class HeatmapComponent {
    constructor() {
        this.buscaApi = new BuscaApi(sessionStorage.getItem('token'));
        this.heatmapData = [];
        this.switchElement = null;
        this.heatmapContainerDesktop = null;
        this.heatmapContainerMobile = null;
        this.heatmapInstance = null;
    }

    init() {
        this.fetchHeatmapData();
        this.setupSwitchListener();
        this.atualizaEstiloCabecalho();
    }

    atualizaEstiloCabecalho() {
        const cabecalho = document.querySelector('.app-header');
        if (cabecalho) {
            cabecalho.style.background = 'linear-gradient(rgb(0, 0, 0), rgb(242 35 35), rgb(7 15 6))'; 
            cabecalho.style.boxShadow = 'rgb(0 0 0) 0px 36px 36px 56px'; 
        }
    }

    async fetchHeatmapData() {
        try {
            const data = await this.buscaApi.fetchApi('Analitico', 'GET');
            this.heatmapData = data;
            this.displayHeatmap(this.heatmapData, this.heatmapContainerDesktop, "0");
        } catch (error) {
            console.error('Error:', error);
        }
    }

    setupSwitchListener() {
        this.switchElement.addEventListener('change', this.toggleHeatmapDisplay.bind(this));
    }

    toggleHeatmapDisplay() {
        const isMobile = this.switchElement.checked;
        if (isMobile) {
            this.heatmapContainerMobile.style.display = 'block';
            this.heatmapContainerDesktop.style.display = 'none';
            this.displayHeatmap(this.heatmapData, this.heatmapContainerMobile, "1");
        } else {
            this.heatmapContainerDesktop.style.display = 'block';
            this.heatmapContainerMobile.style.display = 'none';
            this.displayHeatmap(this.heatmapData, this.heatmapContainerDesktop, "0");
        }
    }
    

    displayHeatmap(data, container, isMobile) {
            this.heatmapInstance = h337.create({
                container: container,
                backgroundColor: 'rgba(0,0,0,.95)',
                maxOpacity: .9,
                minOpacity: .01
            });
       
    
        const filteredData = data.filter(item => String(item.isMobile) === String(isMobile));
        const points = filteredData.map(item => {
            const containerWidth = container.offsetWidth;
            const containerHeight = container.offsetHeight;
            return {
                x: Math.round(item.x * (containerWidth / parseInt(item.screenWidth))),
                y: Math.round(item.y * (containerHeight / parseInt(item.screenHeight))),
                value: 1
            };
        });
    
        if (points.length === 0) {
            console.log("Nenhum ponto para exibir no heatmap.");
            return;
        }
    
        this.heatmapInstance.setData({ max: Math.max(...points.map(p => p.value)), data: points });
    }
    

    render() {
        document.getElementById('titulo').innerHTML='Experiência dos usuários';
        const mainDiv = document.createElement('div');
        mainDiv.className = 'main';
        mainDiv.classList.add = 'container';
        mainDiv.style.height='600px';
        const toggleSwitchDiv = document.createElement('div');
        toggleSwitchDiv.className = 'toggle-switch';

        this.switchElement = document.createElement('input');
        this.switchElement.type = 'checkbox';
        this.switchElement.id = 'switch';
        this.switchElement.className = 'toggle-switch-checkbox';
        this.switchElement.name = 'switch';

        const label = document.createElement('label');
        label.className = 'toggle-switch-label';
        label.htmlFor = 'switch';

        const innerSpan = document.createElement('span');
        innerSpan.className = 'toggle-switch-inner';

        const switchSpan = document.createElement('span');
        switchSpan.className = 'toggle-switch-switch';

        label.appendChild(innerSpan);
        label.appendChild(switchSpan);

        toggleSwitchDiv.appendChild(this.switchElement);
        toggleSwitchDiv.appendChild(label);

        this.heatmapContainerDesktop = document.createElement('div');
        this.heatmapContainerDesktop.id = 'heatmapContainerDesktop';
        this.heatmapContainerDesktop.style.display = 'block';

        this.heatmapContainerMobile = document.createElement('div');
        this.heatmapContainerMobile.id = 'heatmapContainerMobile';
        this.heatmapContainerMobile.style.display = 'none';

        const container = document.createElement('div');
        container.appendChild(toggleSwitchDiv);
        container.appendChild(this.heatmapContainerDesktop);
        container.appendChild(this.heatmapContainerMobile);

        mainDiv.appendChild(container);
        return {
            element: mainDiv,
            init: () => this.init()
        };
    }
}