class VideoChatWidget {

    constructor() {
        this.name = "elements"
        this.statisticsDataApi = 'https\u003A\/\/pe.warehouse.prod.palladio.net.pl' + '/api/action/add'
        this.product = 'testowy';

        this.getWidgetData();
        this.checkAndAddStyles();
        this.addGoogleIcons();

        this.isOpen = false;
        this.searchPromoterInterval = 0;

        this.body = document.body;

        this.chatTool = document.createElement('div');
        this.chatTool.id = 'chatTool';
        this.chatTool.classList.add('elements');
        this.chatTool.innerHTML = '<i class="material-icons widget-info">chat_bubble_outline</i>';
        this.chatTool.addEventListener('click', () => { this.toggle() });

        this.body.appendChild(this.chatTool);

        window.addEventListener('popstate', (event) => {
            this.removeElement(document.getElementById('chatTool'))
        })
    }

    toggle() {
        if (!this.isOpen) {
            this.chatTool.classList.add('open');
            this.postData({ type: 'widgetClick' })
        } else {
            this.chatTool.classList.remove('open');
        }
        this.isOpen = !this.isOpen;
        if (this.isOpen) {
            this.searchPromoters();
        } else {
            window.clearInterval(this.searchPromoterInterval);
            this.chatTool.innerHTML = '<i class="material-icons widget-info">chat_bubble_outline</i>';
        }
    }

    searchPromoters() {
        this.getWidgetData()
        this.searchPromoterInterval = setInterval(() => {
            this.getWidgetData()
        }, 10000);
    }

    checkAndAddStyles() {
        if (!document.getElementById('video_widget_style')) {
            let style = document.createElement('link');
            style.rel = "stylesheet";
            style.type = 'text/css';
            style.href = 'https\u003A\/\/pe.warehouse.prod.palladio.net.pl/widget/widget-styles.css';
            style.id = 'video_widget_style';
            document.getElementsByTagName('head')[0].appendChild(style);
        }
    }

    addGoogleIcons() {
        let style = document.createElement('link');
        style.rel = "stylesheet";
        style.type = 'text/css';
        style.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
        document.getElementsByTagName('head')[0].appendChild(style);
    }

    getWidgetData() {
        if (document.getElementById('video_widget_data')) {
            this.removeElement(document.getElementById('video_widget_data'));
        }

        let script = document.createElement('script');
        script.type = "text/javascript";
        script.src = 'https\u003A\/\/pe.warehouse.prod.palladio.net.pl/widget/data.js?ts=' + new Date().getTime();
        script.id = 'video_widget_data';

        document.head.appendChild(script);
    }

    removeElement(element) {
        element && element.parentNode && element.parentNode.removeChild(element);
    }

    show(count) {
        if (this.isOpen) {
            if(count) {
                this.chatTool.innerHTML = '<p class="widget-info"> <span id="videoChat" class="button"> Po\u0142\u0105cz\u0020z\u0020promotorem </span> <br> <span id="textChat" class="button button-2"> Rozpocznij\u0020chat </span> </p>';
                this.addStatisticEvent();
            } else {
                this.chatTool.innerHTML = '<p class="widget-info"> Nie\u0020znaleziono\u0020wolnego\u0020promota,\u0020spr\u00F3buj\u0020ponownie\u0020na\u0020chwile </p>';
            }
        }
    }

    addStatisticEvent() {
        const videoChat = document.getElementById('videoChat')
        videoChat.addEventListener('click', () => {
            this.postData({type: 'videoClick'}).then(()=> {
                window.location.href = 'https\u003A\/\/pe.tool.prod.palladio.net.pl\//client/'+this.product+'/video';
            })
        });

        const textChat = document.getElementById('textChat')
        textChat.addEventListener('click', () => {
            this.postData({type: 'chatClick'}).then(()=> {
                window.location.href = 'https\u003A\/\/pe.tool.prod.palladio.net.pl\//client/'+this.product+'/text';
            })
            
        });
    }

    async postData(data = {}) {
        const response = await fetch(this.statisticsDataApi, {
            method: 'POST', 
            mode: 'cors', 
            cache: 'no-cache', 
            credentials: 'same-origin', 
            headers: {
            'Content-Type': 'application/json'
            },
            redirect: 'follow',
            referrerPolicy: 'no-referrer',
            body: JSON.stringify(data)
        });
        return response.json(); 
    }
}

(()=> {
    window.videoChatWidget = new VideoChatWidget();
})()