require('../../scss/banner.scss');
require('../../scss/password.scss');
const $ = require('jquery');
const utils = require('../utils');

const default_password_message = "No bullshit requirements, just fill the password strength bar at least halfway";

function limit_field_group_width() {
    const $fields_groups_in_modal = $('.modal').find('.field-group').css('max-width', 250);
    $('.field-group').not($fields_groups_in_modal).each(function(i, field_group) {
        const $field_group = $(field_group)
        const min_width = {
            "1": 0, // Handle base case, though there should always be at least 1 feild and 1 button
            "2": 0, // No point to wrap when there's only 1 field and 1 button
            "3": 620,
            "4": 880,
            "5": 1100
        } [$field_group.children().length];
        const content_width = $field_group.closest('.content').width()
        if (content_width < min_width) {
            $field_group.css('max-width', 250); // This value comes from the modal width
        } else {
            $field_group.css('max-width', '');
        }
    });
}

limit_field_group_width();
$(window).on('resize', limit_field_group_width);

function get_inputs(element_queries, name) {
    return element_queries.map(function(query) {
        return $(query).find(`[name="${name}"]`);
    });
}

module.exports = {
    show_banner: function({
        message,
        color,
        persistent
    }) {
        color = color || "green";
        logger.log("show", color, "banner:", message);
        let $banner = $('<div>', {
            class: "banner",
            text: message
        }).addClass(color);
        if (!persistent) {
            setTimeout(function() {
                $banner.slideUp(250, function() {
                    $banner.remove();
                });
            }, 3500);
        }
        $(".banner-container").prepend($banner);
        $banner.css("height", "unset");
        let target_height = $banner.outerHeight() - 20; // account for the margins
        $banner.css("height", 0);
        $banner.animate({
            height: target_height,
            opacity: 0.85
        }, 250);
    },
    get_inputs,
    prefill_inputs: function(element_query, data) {
        for (const [key, value] of Object.entries(data)) {
            get_inputs([element_query], key).forEach(function($input) {
                $input.val(value);
            });
        }
    },
    init_new_password: function() {
        $(".password-strength-message").text(default_password_message);
        $("#new_password").on("input", function(event) {
            let password = event.target.value;
            if (password) {
                const result = utils.validate.password(password.slice(0, Math.min(password.length, 100)));
                $(".password-strength-meter").val(result.score);
                let message = `Crackable in ${result.crack_times_display.online_throttling_100_per_hour}`;
                if (!result.score) {
                    message += `. ${result.feedback.warning || result.feedback.suggestions[0] || "Do better"}`;
                }
                $(".password-strength-message").text(message);
            } else {
                $(".password-strength-meter").val(0);
                $(".password-strength-message").text(default_password_message);
            }
        });
    },
    generate_date_options: function($select, month) {
        $select.empty();
        // Month in JavaScript is 0-indexed (January is 0, February is 1, etc), 
        // but by using 0 as the day it will give us the last day of the prior
        // month. So passing in 1 as the month number will return the last day
        // of January, not February
        const days_in_month = month && month * 1 ? new Date(2023, month * 1, 0).getDate() : 31;
        for (let date = 1; date <= days_in_month; date++) {
            $select.append($('<option>', {
                value: date,
                text: utils.format_date(date)
            }));
        }
        $select.append($('<option>', {
            value: 0,
            text: "Last day of month"
        }));
        $select.val(1);
        return $select;
    },
    generate_month_options: function($select) {
        $select.empty();
        $select.append($('<option>', {
            value: 0,
            text: "Monthly"
        }));
        for (let month = 1; month <= utils.months.length; month++) {
            $select.append($('<option>', {
                value: month,
                text: `Yearly in ${utils.months[month - 1]}`
            }));
        }
        $select.val(0);
        return $select;
    }
};