"use strict";

import './bootstrap';
import Pillarbox from '@srgssr/pillarbox-web';
import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";
import * as echarts from 'echarts';

window.echarts = echarts;

// Tabs
function changeTab(el){

    let tabId = el.getAttribute('id');
    let panels = document.querySelectorAll('.panel');

    panels.forEach(p => {
        if(p.getAttribute('id') === tabId+'_panel'){
            p.hidden = false;
        }else{
            p.hidden = true;
        }
    })
}

const tabs = document.querySelectorAll('input[type="radio"]');
tabs.forEach(tab => {
    tab.addEventListener('click', e => {
        changeTab(e.target);
    })
})

// Chart word count over time
const wordCountTrack = document.getElementById('words-count-track');
const wordTime = wordCountTrack.getAttribute('data-time').split(',');
const wordWords = wordCountTrack.getAttribute('data-words').split(',');
const chartWordCount = echarts.init(wordCountTrack);

const wordCountCtrl = document.getElementById('topic-track-worte-ctrl');

function setWordCountChart(){

    let grid = [];
    let xAxis = [];
    let yAxis = [];
    let series = [];
    let totalWordCount = wordWords.slice(-1);
    let count = wordCountCtrl.value;
    // let max = totalWordCount / count;
    let data = [];

    let wordWordsLen = wordWords.length;
    let chunks = Math.floor(wordWordsLen / count);

    for(let i = 0; i < wordWordsLen; i += chunks){

        let chunk = wordWords.slice(i, i + chunks );
        let firstItem = chunk[0];
        let dataChunk = chunk.map((c) => c - firstItem);

        data.push(dataChunk)

    }

    let max = 0;
    data.forEach((d) => {

        if(parseInt(d.slice(-1)) > max){
            max = d.slice(-1);
        }
    })

    for(let i = 0; i < count; i++){
        grid.push({
            left: `${i * (100 / count)}%`,
            top: '0',
            width: `${100 / count}%`,
            height: '100%'
        });
        xAxis.push({
            type: 'category',
            gridIndex: i,
            min: 0,
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        });
        yAxis.push({
            type: 'value',
            gridIndex: i,
            min: 0,
            max: max,
            splitLine: {
                lineStyle: {
                    color: '#aaa'
                }
            },
            axisLabel: {
                show: false
            }
        });
        series.push({
            type: 'line',
            name: `${i}`,
            xAxisIndex: i,
            yAxisIndex: i,
            data: data[i],
            showSymbol: false,
            lineStyle: {
                color: '#fff',
            }
        });
    }

    const wordCountChartOptions = {
        grid: grid,
        xAxis: xAxis,
        yAxis: yAxis,
        series: series,
        tooltip: {
            trigger: 'axis',
            valueFormatter: (value) => 'Gesprochene Worte ' + new Intl.NumberFormat('de-CH').format(value),
            formatter: (v) => {

                let index = v[0].componentIndex;
                //console.log(wordCountChartOptions.series[0]);
                let count_tooltip = 0;
                for(let i = 0; i < index; i++){
                    count_tooltip = count_tooltip + parseInt(wordCountChartOptions.series[i].data.slice(-1));
                }
                count_tooltip = parseInt(v[0].axisValue) + count_tooltip;
                return `Segment: ${index + 1}<br>Wort: ${count_tooltip}`;

            }
        },
    }


    chartWordCount.setOption(wordCountChartOptions);

}

wordCountCtrl.addEventListener('change', (e) => {
    chartWordCount.clear();
    setWordCountChart();
})

setWordCountChart();

// Chart sentiments over time
const sentimentsTrack = document.getElementById('sentiment-track');
const sentiTime = sentimentsTrack.getAttribute('data-time').split(',');
const sentiPol = sentimentsTrack.getAttribute('data-sentiments').split(',');
const sentiWeights = sentimentsTrack.getAttribute('data-weights').split(',');
const chartSentiments = echarts.init(sentimentsTrack);

const chartSentimentsOptions = {
    tooltip: {
        trigger: 'axis',
        position: "top",
        formatter: (e) => {
            let sek = e[0].axisValue;
            let sent = e[0].data;
            sent = sent == 0 ? 'Neutral' : sent == 1 ? 'Positiv' : 'Negativ';
            return `Sekunde: ${sek}<br>Sentiment: ${sent}`
        }
    },
    grid: {
        show: false,
        top: 0,
        bottom: 0,
        right: 0,
        left: 0
    },
  xAxis: {
    type: "category",
    data: sentiTime
  },
  yAxis: {
    type: "category",
    data: ["-1", "0", "1"]
  },
  series: [
    {
        symbolSize: sentiWeights,
        data: sentiPol,
        type: 'scatter',
        itemStyle: {
            color: (e) => {
                if(e.data == -1){
                    return '#d01c8b'
                }else if(e.data == 0){
                    return '#f7f7f7'
                }else{
                    return '#4dac26'
                }
            }
        }
    }
  ]
};

chartSentiments.setOption(chartSentimentsOptions);


// VIDEO


const video = document.getElementById('video');
// Timeline draggable
gsap.registerPlugin(Draggable);


const player = new Pillarbox('my-player', {
    controls: false,
    muted: false,
    srgOptions: {
        liveui: false
    }
});

player.src({ src: video.getAttribute('data-urn'), type: 'srgssr/urn' });

const timelineIndicator = document.getElementById('timeline-bar-ctrl');


// Play / Pause video
video.addEventListener('click', _ => {
    player.paused() ? player.play() : player.pause();
    timelineTimelabels();
})

// Transcript
const transcript = document.getElementById('transcript');
const transcript_cues = transcript.querySelectorAll('[data-start]');

transcript_cues.forEach(c => {
    c.addEventListener('click', (e) => {
        player.currentTime(e.target.getAttribute('data-start'));
        player.play();
    });
});


/************
 * Timeline *
 ************/

const status = {
    timelineIndicatorIsDragged: false
}

function timelineTimelabels(){
    let duration = player.duration()
    let step = duration / 10;
    let html = '<span>00:00:00</span>'

    for(let i = 1; i <= 10; i++){
        html += `<span>${secondsToTimecode(i * step)}</span>`;
    }

    document.querySelector('#timeline-bar').insertAdjacentHTML('beforeend', html);

}

/**
 * calcCurrenttimeByPosition
 * Calculate time to seek to, based on the position of the timelineIndicator.
 **/
function calcCurrenttimeByPosition(x){
    return (player.duration() / document.getElementById('timeline-bar').offsetWidth) * x
}

/**
 * Updates the position of the timeline indicator with every timeupdate of the video.
 **/
player.on('timeupdate', e =>{
    if(!status.timelineIndicatorIsDragged){
        let timelineIndicatorPosition = (document.getElementById('timeline-bar').offsetWidth / player.duration()) * player.currentTime();
        timelineIndicator.style.transform = `translate3d(${timelineIndicatorPosition}px, 0px, 0px)`;
    }

})

/**
 * Initialize the timelineindicator
 **/
document.addEventListener("DOMContentLoaded", (event) => {
    gsap.registerPlugin(Draggable)
    Draggable.create("#timeline-bar-ctrl", {
        type: "x",
        bounds: document.getElementById("timeline-bar"),
        onDragStart: function () {
            status.timelineIndicatorIsDragged = true;
        },
        onDragEnd: function () {
            player.currentTime(calcCurrenttimeByPosition(this.x));
            player.play();
            status.timelineIndicatorIsDragged = false;
        },
    });
});

chartSentiments.on('click', 'series', (e) => {
     player.currentTime(chartSentimentsOptions.xAxis.data[e.dataIndex]);
     player.play();
});

// Suche
const searchInput = document.querySelector('#search')
const searchInputBtn = document.querySelector('#searchbutton')
const searchresults = document.querySelector('#searchresults')

function search(term){

    if(term.length > 1){

        searchresults.innerHTML = '';

        transcript.querySelectorAll('li').forEach((el)=>{
            let text = el.querySelector('font').innerText.toLowerCase();
            term = term.toLowerCase();

            if(text.includes(term)){
                let clone = el.cloneNode(true);
                searchresults.appendChild(clone);
            }
        })

        if(!searchresults.querySelector('li')){
            searchresults.innerHTML = `<li>Keine Ergebnisse für «${term}»</li>`;
        }else{
            searchresults.querySelectorAll('[data-start]').forEach(c => {
                c.addEventListener('click', (e) => {
                    player.currentTime(e.target.getAttribute('data-start'));
                    player.play();
                });
            });
        }
    }else{
        searchresults.innerHTML = `<li>Bitte gib mind. 2 Buchstaben ein.</li>`;
    }

}

searchInputBtn.addEventListener('click', () => {
    search(searchInput.value)
})

const topics = document.querySelectorAll('#topicslist a');

topics.forEach(el => {
    el.addEventListener('click', e => {
        search(e.target.innerText);
        searchInput.value = e.target.innerText;
        let tab = document.getElementById('tablist_panel_search');
        tab.checked = true
        changeTab(document.getElementById('tablist_panel_search'));
    })
})