$(function(){
    var download_progress = $('#download-progress');
    var out = $('#output');
    const ipcRenderer = require('electron').ipcRenderer;
    const request = require('request');
    const {dialog} = require('electron').remote;

    var cache = {};
    var path = "";
    ipcRenderer.on('download-progress', function(event, arg) {
      console.log(arg); // prints "pong"
      $('#download-progress-'+arg.id).css("width",arg.percent);
      $('#download-progress-'+arg.id).html(arg.percent);
    });
    ipcRenderer.on('process-fin', function(event, arg) {
      console.log(arg); // prints "pong"
      $('#download-progress-'+arg.id).css("width",arg.percent);
      $('#download-progress-'+arg.id).html("CONVERTED");
    });
    ipcRenderer.on('file', function(event, arg) {
      console.log(arg); // prints "pong"
      $('#body-'+arg.id).append('<audio src="file://'+path+'/'+cache[arg.id]+'.mp3" controls="true"/>');
    });
    document.getElementById('party').addEventListener('click', _ => {
            path = dialog.showOpenDialog({
                properties: ['openDirectory']
            })[0];
            console.log(path)
            ipcRenderer.send('setPath', {path:path});
    })

    $('#start-download').click(function(){
        var video_id = $('#url').val().split('v=')[1];
        var ampersandPosition = video_id.indexOf('&');
        if(ampersandPosition != -1) {
          video_id = video_id.substring(0, ampersandPosition);
        }
        request
          .get('https://www.youtube.com/oembed?url=http://www.youtube.com/watch?v='+ video_id+'&format=json', function(err,httpResponse,body){
              var YT = JSON.parse(body);
              $( '<div class="media" ><div class="media-left"><a href="#"><img width="128" class="media-object" src="'+YT.thumbnail_url +'" alt="..."></a></div><div class="media-body" id="body-'+video_id+'"><h4 class="media-heading">'+YT.title+'</h4> Author: '+YT.author_name+'<div class="progress"><div class="progress-bar" id="download-progress-'+video_id+'" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 00%;">0%</div></div></div></div>').prependTo('#output');
              cache[video_id] = YT.title;
          })
        ipcRenderer.send('start-download', {url:$('#url').val(),id:video_id});
    })
})