require('../scss/style.scss');
require('../scss/home.scss');
const logger_commands = require('./utils/logger');
const $ = require('jquery');
const utils = require('./utils');
const websocket = require('./websocket');
const api = require('./utils/api');
import HugeUploader from 'huge-uploader';
const ui = require('./ui/common');
const copyToClipboard = require('./utils/copyToClipboard');
const pretty_bytes = require('pretty-bytes');
const query_string = require('query-string');

const $sidebar_items = $(".left-sidebar").children();

let qs = query_string.parse(location.search);
logger.log(qs);

if (qs.watchroom) {
    websocket.send({
        command: "start-watching",
        data: qs.watchroom
    });
}

$("#save_display_name").on("click", function() {
    utils.validate.keys({
        display_name: $("#display_name").val().trim()
    }, [
        ["display_name", "Username cannot be empty"]
    ]).then(function(data) {
        return api.post("/account/update/display-name", data);
    }).then(function(data) {
        ui.show_banner(data);
    }).catch(api.handle_error_message);
});

ui.init_new_password();

$("#save_new_password").on("click", function() {
    utils.validate.keys({
        current_password: $("#current_password").val(),
        new_password: $("#new_password").val()
    }, [
        ["current_password", "Current password required"],
        ["new_password", "Passwords don't match", password => password === $("#confirm_password").val()],
        ["new_password", "You must appease the password strength meter", password => utils.validate.password(password).score]
    ]).then(function(data) {
        return api.post("/account/update/password", data);
    }).then(function(data) {
        ui.show_banner(data);
    }).catch(api.handle_error_message);
});

$("#request_account_deletion").on("click", function() {
    api.post("/account/delete/request").then(function(data) {
        ui.show_banner(data);
        $("#deletion_code_wrapper").slideDown();
    }).catch(api.handle_error_message);
});

$("#submit_account_deletion").on("click", function() {
    utils.validate.keys({
        code: $("#deletion_code").val(),
        current_password: $("#deletion_current_password").val()
    }, [
        ["code", "You must enter the deletion code emailed to you"],
        ["current_password", "Current password required"]
    ]).then(function(data) {
        return api.post("/account/delete", data);
    }).then(function() {
        location.reload();
    }).catch(api.handle_error_message);
});

toggle_logger_settings_state(
    logger_commands.logs_enabled(),
    false
);
$("#toggle_logs").on("click", function() {
    toggle_logger_settings_state(
        logger_commands.toggle_logs(), true
    );
});

function toggle_logger_settings_state(enable, show_banner) {
    if (enable) {
        $("#logs_size").text(pretty_bytes(logger_commands.logs_memory_usage()));
        $("#logs_enabled_message").show();
        $("#logs_disabled_message").hide();
        $("#toggle_logs").text("Disable Logs");
        $("#export_logs").removeClass("disabled-button").on("click", function() {
            logger_commands.export_logs().then(function() {
                ui.show_banner({
                    message: "Logs Exported"
                });
                $("#logs_size").text(pretty_bytes(logger_commands.logs_memory_usage()));
            }).catch(api.handle_error_message);
        });
        if (show_banner) {
            ui.show_banner({
                message: "Logs Enabled"
            });
        }
    } else {
        $("#logs_enabled_message").hide();
        $("#logs_disabled_message").show();
        $("#toggle_logs").text("Enable Logs");
        $("#export_logs").addClass("disabled-button").off("click");
        if (show_banner) {
            ui.show_banner({
                message: "Logs Disabled"
            });
        }
    }
}

$("#settings").on("click", function() {
    $("#logs_size").text(pretty_bytes(logger_commands.logs_memory_usage()));
});

$("#file-upload").on("change", function() {
    let files = document.getElementById("file-upload").files;
    const $queued = $(".queued-files");
    if (files.length) {
        let total_size = 0;
        $queued.removeClass("queued-files-empty").empty();
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            total_size += file.size;
            $queued.append(
                `<div class="queued-file">
                    <div>
                        <span class="queued-file-name">${file.name}</span>
                        ${pretty_bytes(file.size)}
                    </div>
                    <div class="queued-file-progress">
                        <span class="queued-file-progress-label">Uploaded:</span>
                        <progress class="upload-progress" max="100" value="0"></progress>
                    </div>
                </div>`
            );
        }
        $(".file-upload-total").text("Total: " + pretty_bytes(total_size)).show();
    } else {
        $queued.addClass("queued-files-empty").text("No Files Selected");
        $(".file-upload-total").hide();
    }
});

const $upload_button = $(".upload-button").on("click", function() {
    let files = document.getElementById("file-upload").files;
    if (files.length && !$upload_button.hasClass("disabled-button")) {
        $upload_button.html(`<img class="upload-button-loading-gif" src="/images/loading.gif">Uploading...`).addClass("disabled-button");
        uploadFiles(files, 0);
    }
});

function uploadFiles(files, curr_file_index) {
    if (curr_file_index >= files.length) {
        logger.log("All files uploaded");
        document.getElementById("file-upload").value = "";
        $(".queued-files").addClass("queued-files-empty").text("All Files Uploaded");
        $(".file-upload-total").hide();
        $upload_button.html(`Upload`).removeClass("disabled-button");
        return;
    }

    const name = files[curr_file_index].name;

    api.post("/video/upload/request", {
        name: name,
        bytes: files[curr_file_index].size
    }).then(function() {
        const curr_file = $(".queued-file").get(0);
        const $progress = $(curr_file).find(".upload-progress");

        const uploader = new HugeUploader({
            endpoint: '/api/video/upload',
            file: files[curr_file_index],
            chunkSize: 10
        });

        uploader.on('error', function(error) {
            logger.error('HugeUploader Error:', error.detail);
            ui.show_banner({
                message: "Error uploading " + files[curr_file_index].name,
                color: "red"
            });
        });

        uploader.on('progress', function(progress) {
            logger.log(`Uploading ${name} - ${progress.detail}%`);
            $progress.val(progress.detail);
        });

        uploader.on('finish', function() {
            $(curr_file).remove();
            uploadFiles(files, curr_file_index + 1);
        });
    }).catch(api.handle_error_message);
}

$("#generate_registration_link").on("click", function() {
    api.post('/registration/request-token').then(function(data) {
        $("#registration-link").text("https://watch-together.luchianov.dev/register?token=" + data.token);
        $("#registration-link-copy").show();
    }).catch(api.handle_error_message);
});

$("#registration-link-copy").on("click", function() {
    if (copyToClipboard($("#registration-link").text())) {
        ui.show_banner({
            message: "Link copied"
        });
    } else {
        ui.show_banner({
            message: "Couldn't copy link",
            color: "red"
        });
    }
});

["library", "account", "settings", "registration"].forEach(function(item) {
    $(`#${item}`).on("click", function() {
        $sidebar_items.removeClass("selected");
        $(this).addClass("selected");
        $(".content").hide();
        $(`#${item}_content`).show();
    });
});

$("#logout").on("click", function() {
    location.href = "/logout";
});

$(".mobile-menu-icon").on("mousedown", function(event) {
    let $this = $(this);
    if ($this.hasClass("left")) {
        $(".right-sidebar").removeClass("open");
        $(".left-sidebar").toggleClass("open");
    } else {
        $(".left-sidebar").removeClass("open");
        $(".right-sidebar").toggleClass("open");
    }
    event.stopPropagation();
});
$(document.body).on("mousedown", function() {
    $(".left-sidebar").removeClass("open");
    $(".right-sidebar").removeClass("open");
});

let $donate_info = $(".donate-info");
$(".donate-button").on("mouseenter", function() {
    $donate_info.show();
}).on("mousemove", function(event) {
    $donate_info.css({
        left: Math.max(10, event.originalEvent.x - $donate_info.outerWidth() - 10),
        top: event.originalEvent.y - $donate_info.outerHeight() - 10
    });
}).on("mouseout", function() {
    $donate_info.hide();
});