/*Canopy - The next generation of stoner streaming software
Copyright (C) 2024  Rainbownapkin and the TTN Community

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.*/

class player{
    constructor (client){
        //client obj
        this.client = client;

        //booleans
        this.onUI = false;
        
        //timers
        this.uiTimer = setTimeout(this.toggleUI.bind(this), 1500, false);

        //elements
        this.playerDiv = document.querySelector("#media-panel-div");
        this.navBar = document.querySelector("#navbar");
        this.video = document.querySelector("#media-panel-video");
        this.uiBar = document.querySelector("#media-panel-head-div");
        this.showVideoIcon = document.querySelector("#chat-panel-show-video-icon");
        this.hideVideoIcon = document.querySelector("#media-panel-div-toggle-icon");
        this.cinemaModeIcon = document.querySelector("#media-panel-cinema-mode-icon");

        //run setup functions
        this.setupInput();
    }

    setupInput(){
        //UIBar Movement Detection
        this.playerDiv.addEventListener("mousemove", this.popUI.bind(this));
        this.uiBar.addEventListener("mouseenter", ()=>{this.setOnUI(true)});
        this.uiBar.addEventListener("mouseleave", ()=>{this.setOnUI(false)});

        //UIBar/header icons
        this.showVideoIcon.addEventListener("click", ()=>{this.toggleVideo()});
        this.hideVideoIcon.addEventListener("click", ()=>{this.toggleVideo()});
        this.cinemaModeIcon.addEventListener("click", ()=>{this.toggleCinemaMode()});
    }

    popUI(event){
        this.toggleUI(true);
        clearTimeout(this.uiTimer);
        if(!this.onUI){
            this.uiTimer = setTimeout(this.toggleUI.bind(this), 1500, false);
        }
    }

    toggleUI(show = this.uiBar.style.display == "none"){
        this.uiBar.style.display = show ? "flex" : "none";
    }

    toggleVideo(show = this.playerDiv.style.display == "none"){
        if(show){
            this.playerDiv.style.display = "flex";
            this.showVideoIcon.style.display = "none";
            this.client.chatBox.hideChatIcon.style.display = "flex";
            //Lock the chat to aspect ratio of the video, to make sure the chat width isn't breaking shit
            this.client.chatBox.lockAspect();
        }else{
            this.playerDiv.style.display = "none";
            this.showVideoIcon.style.display = "flex";
            this.client.chatBox.hideChatIcon.style.display = "none";
            //Need to clear the width from the split, or else it doesn't display properly
            this.client.chatBox.chatPanel.style.width = "100%";
        }
    }

    toggleCinemaMode(cinema = this.navBar.style.display == "none"){
        if(cinema){
            this.navBar.style.display = "flex";
        }else{
            this.navBar.style.display = "none";
        }
    }

    setOnUI(onUI){
        this.onUI = onUI;
        this.popUI();
    }

    getRatio(){
        return this.video.videoWidth / this.video.videoHeight;
    }
}