const $ = require('jquery');
const utils = require('../utils');
const api = require('../utils/api');
const ui = require('./common');

let $library = $(".library");

module.exports = {
    $library: $library,
    create_video_entry: function(video, websocket) {
        let $video_entry = $(
            `<div id="${video.video_id}" class="video-entry">
            <span class="video-entry-title">
                <span class="video-entry-loading">
                    <img class="video-entry-loading-gif" src="/images/loading.gif">
                    <span class="video-entry-progress"></span>
                </span>${video.name}
            </span>
        </div>`
        ).append($(`<span></span>`).append(
            `<span>Expires On <span class="video-entry-expires">
            ${utils.format_time(video.expires)}
        </span></span>`, $(
                // Weird whitespace error when I have a new line here
                `<span class="video-entry-option" id="subtitle-upload-option"><label
                for="${video.video_id}-subtitle-upload" class="custom-subtitle-upload">upload subtitles</label></span>`
            ).append(
                $(`<input type="file" id="${video.video_id}-subtitle-upload" accept=".srt,.vtt">`).on("change", function(event) {
                    const files = event.target.files;
                    if (files.length) {
                        const subtitle_file = files[0];
                        logger.log(subtitle_file);

                        let reader = new FileReader();
                        reader.onload = (function(reader) {
                            return function() {
                                api.post("/video/upload/subtitle", {
                                    video_id: video.video_id,
                                    subtitle_string: reader.result
                                }).then(function() {
                                    ui.show_banner({
                                        message: "Subtitles uploaded"
                                    });
                                }).catch(api.handle_error_message);
                            };
                        })(reader);
                        reader.readAsText(subtitle_file);
                    }
                })
            ).on("click", function(event) {
                event.stopPropagation();
            }), $(
                `<span class="video-entry-option">renew</span>`
            ).on("click", function(event) {
                websocket.send({
                    command: "renew-video",
                    data: video.video_id
                });
                event.stopPropagation();
            }), $(
                `<span class="video-entry-option">delete</span>`
            ).on("click", function(event) {
                websocket.send({
                    command: "delete-video",
                    data: video.video_id
                });
                event.stopPropagation();
            })
        ));
        $library.prepend($video_entry);
        set_video_status(video, websocket);
    },
    set_video_status: set_video_status
};

function set_video_status(video, websocket) {
    logger.log("set video status:", video);
    let $video_entry = $(`#${video.video_id}`);
    if (video.status === api.status.video.ready) {
        $video_entry.removeClass("blocked").off("click").on("click", function() {
            websocket.send({
                command: "start-watching",
                data: video.video_id
            });
        }).find(".video-entry-loading").hide();
    } else {
        $video_entry.addClass("blocked").find(
            ".video-entry-loading"
        ).show();

        if (video.status === api.status.video.converting) {
            $video_entry.find(".video-entry-progress").text("Converting... " + (video.progress || 0) + "%");
        } else if (video.status === api.status.video.reassembling) {
            $video_entry.find(".video-entry-progress").text("Processing...");
        }
    }
}