class queuePanel extends panelObj{
    constructor(client, panelDocument){
        super(client, "Media Queue", "/panel/queue", panelDocument);

        //Store releative scale of items in seconds, defaulting to 30 minute chunks
        this.scale = 30 * 60;

        //Create variable to hold rescale timer
        this.rescaleTimer = null;

        this.autoscroll = true;

        //Define non-input event listeners
        this.defineListeners();
    }

    docSwitch(){
        //Call derived doc switch function
        super.docSwitch();

        //Get queue div
        this.queue = this.panelDocument.querySelector('#queue');
        //Get queue container
        this.queueContainer = this.queue.querySelector("#queue-container");
        //Get queue marker contianer
        this.queueMarkerContainer = this.queue.querySelector('#queue-marker-container');
        //Get queue layout controller
        this.queueLayoutController = this.panelDocument.querySelector('#queue-panel-layout-controller');
        //Re-acquire time marker
        this.timeMarker = this.panelDocument.querySelector('#time-marker');

        //Get main control buttons
        this.addMediaButton = this.panelDocument.querySelector('#queue-add-media');
        this.scrollLockButton = this.panelDocument.querySelector('#queue-scroll-lock');

        //Get control divs
        //Add Media
        this.addMediaDiv = this.panelDocument.querySelector('#queue-media-prompts');

        //Get control div elements
        //Add Media
        this.addMediaLinkPrompt = this.panelDocument.querySelector('#media-link-input');
        this.addMediaNamePrompt = this.panelDocument.querySelector('#media-name-input');
        this.queueLastButton = this.panelDocument.querySelector('#queue-last-button');
        this.queueAtButton = this.panelDocument.querySelector('#queue-at-button');

        //Render out the queue
        this.fullRender();

        //Setup panel input
        this.setupInput();
    }

    closer(){
        //Clear any remaining timers
        clearTimeout(this.timeMarkerTimer);
    }


    defineListeners(){
        //Render queue when we receive a new copy of the queue data from the server
        this.client.socket.on("clientMetadata", (data) => {this.renderQueue();})
        this.client.socket.on("queue", (data) => {this.renderQueue();})
    }

    setupInput(){
        //Re-render queue and time-marker on window resize as time-relative absolute positioning will be absolutely thrown
        this.ownerDoc.defaultView.addEventListener('resize', this.resizeRender.bind(this));

        //queue
        this.queue.addEventListener('wheel', this.scaleScroll.bind(this));

        //control bar controls
        this.addMediaButton.addEventListener('click', this.toggleAddMedia.bind(this));
        this.scrollLockButton.addEventListener('click', this.lockScroll.bind(this));

        //control bar divs
        this.queueLastButton.addEventListener('click', this.queueLast.bind(this))
    }

    toggleAddMedia(event){
        if(this.addMediaDiv.style.display == 'none'){
            this.addMediaDiv.style.display = '';
        }else{
            this.addMediaDiv.style.display = 'none';
        }
    }

    queueLast(event){
        //Send off the request
        this.client.socket.emit("queue",{url:this.addMediaLinkPrompt.value, title:this.addMediaNamePrompt.value});
        this.addMediaLinkPrompt.value = '';
        this.addMediaNamePrompt.value = '';
    }

    lockScroll(event){
        //Enable scroll lock
        this.autoscroll = true;
        //Light the indicator
        this.scrollLockButton.classList.add('positive-button');
        //Render the marker early to insta-jump
        this.renderTimeMarker();
    }

    scaleScroll(event){
        if(event.ctrlKey){
            //Capture inverse scroll wheel direction
            const scrollDirection = event.wheelDeltaY / Math.abs(event.wheelDeltaY) * -1;

            //Default scale factor to 5 seconds
            let scaleFactor = 5;

            //Tried to do this with math but couldnt because im bad at math so heres the if statement of shame :(
            if(this.scale >= 7200){
                scaleFactor = 3600
            }else if(this.scale >= 3600){
                scaleFactor = scrollDirection > 0 ? 3600 : 1800;
            }else if(this.scale >= 1800){
                scaleFactor = scrollDirection > 0 ? 1800 : 900;
            }else if(this.scale == 900){
                scaleFactor = scrollDirection > 0 ? 900 : 300;
            }else if(this.scale > 300){
                //If we're above five minutes use five minutes
                scaleFactor = 300;
            }else if(this.scale == 300){
                //If we're at five minutes scroll up by five minutes or scroll down to one minute
                scaleFactor = scrollDirection > 0 ? 300 : 240;
            }else if(this.scale == 60){
                //If we're at one minutes scroll up by four minutes or scroll down by 10 seconds
                scaleFactor = scrollDirection > 0 ? 240 : 10;
            }else if(this.scale > 10){
                scaleFactor = 10;
            }else if(this.scale == 10){
                scaleFactor = scrollDirection > 0 ? 10 : 5;
            }

            //Prevent page-wide zoom in/out
            event.preventDefault();

            //Clear out the queue UI
            this.clearQueue();

            //Calculate new scale
            const newScale = this.scale + (scaleFactor * scrollDirection);

            //Clamp scale between 10 seconds and half a day
            this.scale = Math.max(5, Math.min(43200, newScale));

            //If we have no scale label
            if(this.scaleLabel == null){
                //Make it
                this.scaleLabel = document.createElement('p');
                this.scaleLabel.id = 'queue-marker-scale-label';
                this.queue.appendChild(this.scaleLabel);
            }

            //Set scale label text to humie readable time scale
            this.scaleLabel.innerHTML = `Time Scale:<br>${this.humieFriendlyDuration(this.scale)}`

            //Clear any previous rescale timer
            clearTimeout(this.rescaleTimer);
            //Set timeout to re-render after input stops
            this.rescaleTimer = setTimeout(this.fullRender.bind(this), 500);
        //Otherwise, if we're just scrolling
        }else{
            //Disable scroll lock
            this.autoscroll = false;
            //Unlight the indicator
            this.scrollLockButton.classList.remove('positive-button');
        }
    }

    humieFriendlyDuration(seconds){
        //If we have an invalid duration
        if(seconds <= 0){
            //bitch, moan, and complain!
            return('Invalid input duration');
        }

        //Create an empty array to hold the time strings
        const timeStrings = [];

        //Pull hours from time
        const hours = Math.floor(seconds / 3600);
        //Remove recorded hours
        seconds -= hours * 3600;

        //Pull minutes from time
        const minutes = Math.floor(seconds / 60);
        //Remove recorded minutes
        seconds -= minutes * 60;

        //If we have an hour
        if(hours == 1){
            //Add the string
            timeStrings.push('1 Hour');
        //If we have hours
        }else if(hours > 0){
            //Add the string
            timeStrings.push(`${hours} Hours`);
        }

        //If we have a minute
        if(minutes == 1){
            //Add the string
            timeStrings.push('1 Minute');
        //If we have minutes
        }else if(minutes > 0){
            //Add the string
            timeStrings.push(`${minutes} Minutes`);
        }

        //Add the 'and ' if we need it
        const secondsPrefix = timeStrings.length > 0 ? 'and ' : '';

        //If we have a second
        if(seconds == 1){
            //Add the string
            timeStrings.push(`${secondsPrefix}1 Second`);
        //If we have more than a second
        }else if(seconds > 1){
            //Add the string
            timeStrings.push(`${secondsPrefix}${seconds} Seconds`);
        } 

        //Join the time strings together
        return timeStrings.join(', ');
    }

    resizeRender(event){
        const date = new Date();
        this.renderQueue(date);
        this.renderTimeMarker(date);
    }

    clearQueue(){
        //Clear out queue container
        this.queueContainer.innerHTML = '';;
        //Clear out queue marker container
        this.queueMarkerContainer.innerHTML = '';
        
        //Grab all related tooltips
        const tooltips = this.ownerDoc.body.querySelectorAll('.media-tooltip');

        //clear them out since we're clearing out the elements with the event to remove them
        //These should clear out on their own on mousemove but this makes things look a *little* prettier :)
        for(let tooltip of tooltips){
            tooltip.parentNode.remove();
        }

        //Clear any marker timers
        clearTimeout(this.timeMarkerTimer);

        //If we have an existing time marker
        if(this.timeMarker != null){
            //Clear it out
            this.timeMarker.remove();
            this.timeMarker = null;
        }
    }

    async fullRender(date = new Date()){

        //Clear the queue
        this.clearQueue();

        //If we have a scale label
        if(this.scaleLabel != null){
            //Take it out
            this.scaleLabel.remove();
            this.scaleLabel = null;
        }

        //Render out time scale
        this.renderQueueScale(date);

        //wait a few frames so the scale can finish rendering, because dom function aren't async for some fucking reason
        for(let i = 0; i <= 2; i++){
            await utils.awaitNextFrame();
        }

        //render the time marker
        this.renderTimeMarker(date, true);

        //render out the queue
        this.renderQueue(date);
    }

    renderQueue(date = new Date()){
        //Clear out queue container
        this.queueContainer.innerHTML = '';

        //for every entry in the queue
        for(let entry of this.client.queue){
            //Create entry div
            const entryDiv = document.createElement('div');
            entryDiv.classList.add('queue-entry');

            //Place entry div
            entryDiv.style.top = `${this.offsetByDate(new Date(entry[1].startTime))}px`;
            entryDiv.style.bottom = `${this.offsetByDate(new Date(entry[1].startTime + (entry[1].duration * 1000)), true)}px`;

            //Create entry title
            const entryTitle = document.createElement('p');
            entryTitle.textContent = entry[1].title;

            //Tooltip generation
            //tooltip div
            const tooltipDiv = document.createElement('div');
            tooltipDiv.classList.add('media-tooltip');

            //tooltip title
            const tooltipTitle = document.createElement('p');
            tooltipTitle.textContent = `Title: ${entry[1].title}`;

            //tooltip filename
            const tooltipFilename = document.createElement('p');
            tooltipFilename.textContent = `File Name: ${entry[1].fileName}`;

            //tooltip source
            const tooltipSource = document.createElement('p');
            tooltipSource.textContent = `Source: ${entry[1].type}`;

            //tooltip duration
            const tooltipDuration = document.createElement('p');
            tooltipDuration.textContent = `Duration: ${entry[1].duration}`;

            //tooltip start
            const tooltipStart = document.createElement('p');
            tooltipStart.textContent = `Start Time: ${new Date(entry[1].startTime).toLocaleString()}`;

            //tooltip end
            const tooltipEnd = document.createElement('p');
            tooltipEnd.textContent = `Start Time: ${new Date(entry[1].startTime + (entry[1].duration * 1000)).toLocaleString()}`;

            //append components
            for(let component of [
                tooltipTitle,
                tooltipFilename,
                tooltipSource,
                tooltipDuration,
                tooltipStart,
                tooltipEnd
            ]){
                tooltipDiv.append(component);
            }

            //Setup media tooltip
            entryDiv.addEventListener('mouseenter',(event)=>{utils.ux.displayTooltip(event, tooltipDiv, false, null, true, this.ownerDoc);});

            //context menu
            const menuMap = new Map([
                ["Play now", ()=>{this.client.socket.emit('move', {uuid: entry[1].uuid})}],
                ["Move To...", ()=>{}],
                ["Delete", ()=>{this.client.socket.emit('delete', {uuid: entry[1].uuid})}],
                ["Open in New Tab", ()=>{window.open(entry[1].url, '_blank').focus();}],
                ["Copy URL", ()=>{navigator.clipboard.writeText(entry[1].url);}],
            ]);

            //Setup context menu
            entryDiv.addEventListener('contextmenu', (event)=>{utils.ux.displayContextMenu(event, '', menuMap, this.ownerDoc);});
            
            //Append entry elements
            entryDiv.append(entryTitle);

            //Append entry
            this.queueContainer.append(entryDiv);
        }
    }

    renderTimeMarker(date = new Date(), forceScroll = false){
        //Calculate marker position by date
        const markerPosition = Math.round(this.offsetByDate(date));

        //If markers are null
        if(markerPosition == null){
            //Try again in a second since the user probably just popped the panel or something :P
            (smackTimer.bind(this))();
        }

        //if we need to make the time marker
        if(this.timeMarker == null){
            //Create the time marker
            this.timeMarker = document.createElement('span');
            //Add time marker class
            this.timeMarker.id = 'time-marker';
            //Append time marker
            this.queue.appendChild(this.timeMarker);
        }

        //Set time marker position
        this.timeMarker.style.top = `${markerPosition}px`;

        //If the panel document isn't null (we're not actively switching panels)
        if(this.panelDocument != null && (this.autoscroll || forceScroll)){
            //Get height difference between window and queue layout controller
            const docDifference = this.ownerDoc.defaultView.innerHeight - this.queueLayoutController.getBoundingClientRect().height;
            //Calculate scroll target by body difference and marker position
            const scrollTarget = (markerPosition - (this.queueLayoutController.getBoundingClientRect().height - docDifference) / 2) + docDifference;
            //Calculate scroll behavior by distance
            const scrollBehavior = Math.abs(scrollTarget - this.queueLayoutController.scrollTop) > 10 ? "smooth" : "instant";
        

            //Scroll to the marker
            this.queueLayoutController.scroll({
                left: 0, 
                top: scrollTarget,
                behavior: scrollBehavior
            });
        }

        //Set the timer to run the function again
        (smackTimer.bind(this))();

        function smackTimer(){
            //Clear update timer
            clearTimeout(this.timeMarkerTimer);
            //Set timer to update marker every second
            this.timeMarkerTimer = setTimeout(this.renderTimeMarker.bind(this), 1000);
        }
    }

    renderQueueScale(inputDate = new Date()){
        //Clear out queue marker container
        this.queueMarkerContainer.innerHTML = '';       

        //Make sure we don't modify the date we're handed
        const date = structuredClone(inputDate);

        //Zero out time to midnight on the morning of the input date
        date.setHours(0,0,0,0);

        //Store epoch of current date at midnight for later user
        const dateEpoch = date.getTime();

        //while we've counted less than the amount of time in the day, count up by scale
        for(let time = 0; time <= 86400; time += this.scale){
            //Get index of current chunk by dividing time by scale
            const index = time / this.scale;

            //Set time by scale, we could do this against this.scale and date.getTime(), but this seemed cleaner :P
            date.setTime(dateEpoch + (time * 1000))

            //Create marker span
            const markerSpan = document.createElement('div');
            markerSpan.classList.add('queue-marker');

            //Create marker line (unfortunately <hr> tags don't seem to play nice with parents who have display:flex)
            const marker = document.createElement('span');
            marker.classList.add('queue-marker');

            //If it's even/zero
            if(index % 2 == 0){
                const markerLabel = document.createElement('p');
                //If scale is over a minute then we don't need to display seconds
                const seconds = this.scale > 60 ? '' : `:${('0' + date.getSeconds()).slice(-2)}`

                //If we're counting AM
                if(date.getHours() < 12){
                    //Display as AM
                    markerLabel.textContent = `${('0'+date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}${seconds}AM`
                //If we're cointing noon
                }else if(date.getHours() == 12){
                    //display as noon
                    markerLabel.textContent = `${('0'+date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}${seconds}PM`
                //if we're counting pm
                }else{
                    //display as pm
                    markerLabel.textContent = `${('0'+(date.getHours() - 12)).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}${seconds}PM`
                }

                //Add marker label to marker span    
                markerSpan.appendChild(markerLabel);
            }

            //Append marker to marker span
            markerSpan.appendChild(marker);

            //Append marker span to queue container
            this.queueMarkerContainer.appendChild(markerSpan);
        }
    }

    offsetByDate(date = new Date(), bottomOffset = false){
        //Pull start of day epoch from given date, make sure to use a new date object so we don't fuck up any date objects passed to us
        const dayEpoch = new Date(date).setHours(0,0,0,0);
        //Get difference between now and day epoch to get time since the start of the current day in milliseconds
        const curTime = date.getTime() - dayEpoch;
        //Devide by amount of milliseconds in a day to convert time over to a floating point number between 0 and 1
        //Make sure to reverse it if bottomOffset is set to true
        const timeFloat = bottomOffset ? 1 - (curTime / 86400000) : curTime / 86400000;
        //Get queue markers
        const markers = this.panelDocument.querySelectorAll('span.queue-marker');

        //If the marker is null for some reason
        if(markers[0] == null){

            return null;
        }

        //Get marker position range
        const range = [markers[0].offsetTop, markers[markers.length - 1].offsetTop]
        //Get maximum position relative to the range itself
        const offsetMax = range[1] - range[0];
        //return position relative to parent
        return (offsetMax * timeFloat) + range[0];
    }
}