import Vue from 'vue/dist/vue.esm.js';
import _ from "lodash";
import {
    getData,
    COLORS
} from "../utilities";
import AjaxMethods from "./methods/ajax";
import * as UIkit from "uikit";

// This is binding to a class name, so elem is actually a DOM object
export default function (elem) {
    let data = getData(elem, [
        // Server data
        "community", "channels", "users",

        // Player data
        "user", "communities",

        // Shared data
        "servers", "types", "pendingRequests", "typePresets"
    ]);

    const app = new Vue({
        el: elem,
        mixins: [AjaxMethods],
        data: {
            // Server data
            community: data.community,
            channels: data.channels,
            users: data.users,

            // Player data
            user: data.user,
            communities: data.communities,

            // Shared data
            servers: data.servers,
            types: data.types,
            typePresets: data.typePresets,
            pendingRequests: data.pendingRequests,
            pendingRequestsInputDisabled: false,
            newRouteCommunity: undefined,
            newRouteChannel: undefined,
            newRouteServers: [],
            newRouteUsers: [],
            newRouteTypes: [],
            newRouteServerRadio: "any",
            newRouteTypesRadio: "any",
            newRouteInputDisabled: false,
            editRouteCommunity: undefined,
            editRouteChannel: undefined,
            editRouteSelectedServer: undefined
        },
        mounted: function () {
            let colors = _.values(COLORS);
            for (let request of this.pendingRequests) {
                Vue.set(request, "color", _.sample(colors));
            }

            UIkit.util.on("#create-new-route-modal", "beforeshow", () => {
                this.resetNewRouteVars();
            });
        },
        computed: {
            createRequestButtonEnabled: function () {
                return !this.newRouteInputDisabled && this.newRouteChannel && (this.newRouteCommunity || this.newRouteUsers);
            },
            availableRouteData: function () {
                let routes = [];

                if (this.currentContext === this.community) {
                    if (!this.editRouteChannel) return [];

                    routes = this.editRouteChannel.routes;
                } else {
                    if (!this.editRouteCommunity) return [];

                    routes = _.flatMap(this.editRouteCommunity.channels, function (category) {
                        return _.flatMap(category.channels, (channel) => channel.routes);
                    });
                }

                // A route is considered editable if it has available types to edit
                return _.filter(routes, (route) => !_.isEmpty(this.availableServers(route)));
            }
        },
        methods: {
            availableServers: function (route) {
                let servers = _.filter(route.servers, (server) => {
                    return _.isUndefined(server.deleted) && !_.isEmpty(this.availableTypes(server));
                });

                return _.sortBy(servers, ["name"]);
            },
            availableTypes: function (server) {
                return _.filter(server.types, (type) => {
                    return _.isUndefined(type.deleted);
                });
            },
            requestSelectAllCheckbox: function (request) {
                return this.$refs[`request-${request.user.id}-${request.server.id}-${request.channel.id}-select-all`][0];
            },
            toggleRequestType: function (request, type, event) {
                let checked = event.target.checked;

                if (_.isUndefined(type)) {
                    _.each(request.types, (type) => { Vue.set(type, "selected", checked) });
                } else {
                    Vue.set(type, "selected", checked);

                    let allTypesSize = request.types.length;
                    let selectedTypesSize = _.filter(request.types, "selected").length;
                    let selectAllCheckbox = this.requestSelectAllCheckbox(request);

                    selectAllCheckbox.checked = (selectedTypesSize === allTypesSize);
                    selectAllCheckbox.indeterminate = (selectedTypesSize > 0 && selectedTypesSize < allTypesSize);
                }
            },
            resetNewRouteVars: function () {
                this.newRouteCommunity = this.editRouteCommunity || undefined;
                this.newRouteChannel = this.editRouteChannel || undefined;
                this.newRouteServers = [];
                this.newRouteUsers = [];
                this.newRouteTypes = [];
                this.newRouteServerRadio = "any";
                this.newRouteTypesRadio = "any";
            },
            typeTooltip: function (tooltipName, type, route_data) {
                let tooltips = {
                    enable: [
                        `${route_data.user.name} has not accepted this request yet. ESM will send a message to <span class="esm-text-color-toast-blue">#${route_data.channel.name}</span> if they accept it`,
                        `Click to permanently stop routing ${type.name} notifications to this channel`
                    ],
                    delete: [
                        `Click to delete pending request`,
                        `Click to permanently stop routing ${type.name} notifications to this channel`
                    ]
                };

                return tooltips[tooltipName][type.editable ? 1 : 0];
            },
            updateAvailableRoutes: function (typeIds, action) {
                let vueInstance = this;

                let servers = _.flatMap(this.availableRouteData, "servers");

                // Cache the servers up front so this code can support one or many acceptances, and doesn't require looping over every server for each ID
                let serverIndexByTypeId = {};
                _.each(servers, (server, index) => {
                    _.each(server.types, (type) => {
                        serverIndexByTypeId[type.id] = index;
                    });
                });

                // Update the types that were accepted/declined
                _.each(typeIds, function (typeId) {
                    let server = servers[serverIndexByTypeId[typeId]];
                    if (server == null) return;

                    let type = _.find(server.types, ["id", typeId]);
                    if (_.isUndefined(type)) return;

                    if (action === "decline") {
                        return _.pull(server.types, type);
                    }

                    if (vueInstance.currentContext == vueInstance.community) {
                        Vue.set(type, "community_accepted", true);
                    } else {
                        Vue.set(type, "user_accepted", true);
                    }

                    if (type.user_accepted && type.community_accepted) {
                        Vue.set(type, "enabled", true);
                        Vue.set(type, "editable", true);
                    }
                });
            }
        }
    });
}