/// <reference path="./../../typings/bootstrap.d.ts"/>

import { IView } from "../menu/interfaces";
import { ContextView, ICachedContext } from "../menu/contextView";
import { Url } from "./../../url";
import { Messages, GroupMessages } from "../messages/messages";
import { MessageToast } from "../messages/messageToast";
import { Modal } from "./Modal"
import { SchedulerView } from "./schedulerView"
import { AddGroupModal } from "./group/addGroupModal";
import { AssignTamplateModal } from "./group/assignTemplateModal";
import { EditGroupModal } from "./group/editGroupModal";
import { Group } from "./group/group";

export class GroupView implements IView {
    $viewElement: JQuery;
    name: string;
    icon: string;
    contextView: ContextView<ICachedContext>;
    callbacksSet: boolean = false;

    rootGroups: { [id: string]: Group } = {};

    createGroupModal: AddGroupModal;
    assignTamplateModal: AssignTamplateModal;
    renameGroupModal: EditGroupModal;

    static messageToast: MessageToast;
    static companyId: string;
    static currentGroupId: string;

    static addPrefix: string = "add-";
    static assignedPrefix: string = "assigned-";
    static assignedListPrefix: string = "assignedlist-";

    static Singleton: GroupView;

    constructor(companyId: string, element: JQuery) {
        GroupView.companyId = companyId;
        this.$viewElement = element;
        this.name = "Grupy";
        this.icon = "fa-object-group";
    }

    initialize(): boolean {
        if (this.$viewElement.length === 0) {
            return false;
        }

        this.contextView = new ContextView<ICachedContext>(this.$viewElement.find("#device-section"));

        this.createGroupModal = new AddGroupModal($("#addModal"), GroupView.companyId, this);
        this.assignTamplateModal = new AssignTamplateModal($("#groupAssignModal"), GroupView.companyId, this);
        this.renameGroupModal = new EditGroupModal($("#editModal"), GroupView.companyId, this);

        GroupView.Singleton = this;

        return true;
    }

    onShow(): void {
        var t = this;

        var rootJElements = $(".group-list >.group-info");
        rootJElements.each(function (index: number, element: Element) {
            var rootGroup = new Group($(element));
            t.rootGroups[rootGroup.Id] = rootGroup;
        });
        GroupView.messageToast = new MessageToast(2000, "#info-toast-area");

        if (!this.callbacksSet) {
            this.callbacksSet = true;
            t.setCallbacks();
            t.createGroupModal.modalInit();
            t.assignTamplateModal.modalInit();
            t.renameGroupModal.modalInit();
        }
    }

    public setCallbacks(): void {
        var jElement = jQuery("#group-section");

        var t = this;
        jElement.off("click.show-devices").on("click.show-devices", ".show-devices", function () {
            var row = $(this).closest(".group-info");
            $(".active-row").removeClass("active-row");
            row.find(">.data").addClass("active-row");
            var groupId = row.data("id");

            t.diplayGroupDevices(groupId, false);
        });
        jElement.off("click.assign-devices").on("click.assign-devices", ".assign-devices", function () {
            var row = $(this).closest(".group-info");
            $(".active-row").removeClass("active-row");
            row.find(">.data").addClass("active-row");
            var groupId = row.data("id");

            t.diplayGroupDevices(groupId, true);
        });
        jElement.off("click.add-subgroup").on("click.add-subgroup", ".add-subgroup", function () {
            var groupId = $(this).closest(".group-info").data("id");
            t.createGroupModal.displayModal(groupId);
        });
        jElement.off("click.assign-template").on("click.assign-template", ".assign-template", function () {
            var groupId = $(this).closest(".group-info").data("id");
            t.assignTamplateModal.displayModal(groupId);
        });
        jElement.off("click.assigned-template-list-btn").on("click.assigned-template-list-btn", ".assigned-template-list-btn", function () {
            var row = $(this).closest(".group-info");
            $(".active-row").removeClass("active-row");
            row.find(">.data").addClass("active-row");
            var groupId = row.data("id");

            t.displayGroupTemplates(groupId);
        });

        jElement.off("click.rename-group").on("click.rename-group", ".rename-group", function () {
            var groupId = $(this).closest(".group-info").data("id");
            t.renameGroupModal.displayModal(groupId);
        });
        jElement.off("click.add-root-group").on("click.add-root-group", ".add-root-group", function () {
            t.createGroupModal.displayModal();
        });
        jElement.off("click.remove-group").on("click.remove-group", ".remove-group", function () {
            var groupId = $(this).closest(".group-info").data("id");
            Group.getGroup(groupId).delete();
        });
        jElement.off("click.fold-all").on("click.fold-all", ".fold-all", function () {
            Group.foldAll();
        })
        jElement.off("click.unfold-all").on("click.unfold-all", ".unfold-all", function () {
            Group.unfoldAll();
        })
    }

    private setDeviceCallbacks(): void {
        var t = this;
        var getId = function (el: HTMLElement): string {
            return $(el).closest(".device-info").data("id");
        }

        $(".action-button-container").off("click.remove-from-group").on("click.remove-from-group", ".remove-from-group", function () {
            var deviceId = getId(this);
            Group.getGroup(GroupView.currentGroupId).removeDevice(deviceId);
        });
        $(".action-button-container").off("click.add-to-group").on("click.add-to-group", ".add-to-group", function () {
            var deviceId = getId(this);
            Group.getGroup(GroupView.currentGroupId).addDevice(deviceId);
        });
    }

    public displayGroupTemplates(id: string): void {
        var scope = this;
        var key = GroupView.assignedListPrefix + id;
        GroupView.currentGroupId = id;
        var group = Group.getGroup(id);
        $.ajax({
            type: "GET",
            url: Url.action("Template", "GetGroupTemplates", { groupId: id, companyId: GroupView.companyId }),
            success: function (data) {
                $("#device-section .context-view-body").html(data);
                $("#device-section").removeClass("hidden");
                scope.loadActionButtons(id);
                scope.setTemplateAssignmentCallbacks();
            }
        });
    }

    public loadActionButtons(groupId: string) {
        $("#device-section .top-panel .btn-group").html(`
                <div class='action-btn-container'>
                     <a class="btn btn-link go-to-scheduler" data-groupid='${groupId}' href="#">
                        <i class="fa fa-calendar" aria-hidden="true"></i>
                        Harmonogram
                     </a>
                     <a class="btn btn-link refresh-device-content" data-groupid='${groupId}' data-companyId='${GroupView.companyId}' href="#">
                        <i class="fa fa-refresh" aria-hidden="true"></i>
                        Odśwież urządzenia
                     </a>`);
        //$("#device-section .top-panel").html(`<div class='action-btn-container'><div class='go-to-scheduler' data-groupid='${groupId}'><i class='fa fa- calendar dissociate-group-assignment' aria-hidden='true'></i><p>Harmonogram</p></div></div>`);
    }

    public eraseDeviceSectionTopPanel() {
        $("#device-section .top-panel .btn-group").empty();
    }

    public diplayGroupDevices(id: string, addView: boolean): void {
        var t = this;
        var key = (addView ? GroupView.addPrefix : GroupView.assignedPrefix) + id;

        GroupView.currentGroupId = id;
        var group = Group.getGroup(id);

        var reload = false;
        if (addView && group.AddDirty) {
            group.AddDirty = false
            reload = true;
        }
        else if (!addView && group.ListDirty) {
            group.ListDirty = false
            reload = true;
        }

        if (reload) {
            try {
                t.contextView.reload(key);
            } catch (e) {
                t.contextView.load({
                    url: addView
                        ? Url.action("Dashboard", "AvaiableDevices", { groupId: id })
                        : Url.action("Dashboard", "GroupDevices", { groupId: id }),
                    success: function () {
                        t.eraseDeviceSectionTopPanel();
                        t.setDeviceCallbacks();
                    }
                }, key);
            }


        } else {
            t.contextView.load({
                url: addView
                    ? Url.action("Dashboard", "AvaiableDevices", { groupId: id })
                    : Url.action("Dashboard", "GroupDevices", { groupId: id }),
                success: function () {
                    t.eraseDeviceSectionTopPanel();
                    t.setDeviceCallbacks();
                }
            }, key);
        }
    }

    public getGroupParcial(groupId: string, callback: (data: any) => void) {
        $.get(Url.action("Dashboard", "GroupParcial", { groupId: groupId }))
            .done(function (data) {
                callback(data);
                GroupView.messageToast.displayToast("success", GroupMessages.parcialDownloaded);
            }).fail(function () {
                GroupView.messageToast.displayToast("error", Messages.operationFailed);
            });
        return
    }

    public refreshRoot(id: string) {
        var jElement = $(".group-list >.group-info[data-id='" + id + "']");
        var root = new Group(jElement);
        this.rootGroups[id] = root;
    }

    public removeRoot(id: string) {
        var jElement = $(".group-list >.group-info[data-id='" + id + "']");
        jElement.remove();
    }

    public setTemplateAssignmentCallbacks(): void {
        $(".action-btn-container").off("click.go-to-scheduler").on("click.go-to-scheduler", ".go-to-scheduler", function () {
            Group.getGroup(GroupView.currentGroupId).goToScheduler($(".action-btn-container .go-to-scheduler").data("groupid"));
        });
        $(".action-btn-container").off("click.delete-assignment").on("click.delete-assignment", ".delete-assignment", function () {
            Group.getGroup(GroupView.currentGroupId).removeTemplateGroupAssignment($(this).data("assignmentid"));
        });
        $(".action-btn-container").off("click.refresh-device-content").on("click.refresh-device-content", ".refresh-device-content", function () {
            var source = $(".action-btn-container .refresh-device-content"),
                groupId: string = source.data("groupid"),
                companyId: string = source.data("companyid"),
                refreshUrl: string = `/Template/Refresh/${companyId}/${groupId}`;

            $.ajax({
                type: "PUT",
                url: refreshUrl,
                success: function (data) {
                    var messageToast = new MessageToast(30000, "#info-toast-area");
                    messageToast.displayToast("success", "Zaktualizowano treść szablonów na urządzeniach.");
                },
                error: function (data) {
                    var message = "Napotkano błędy podczas wysyłania danych";
                    console.log(data);
                    var messageToast = new MessageToast(30000, "#info-toast-area");
                    messageToast.displayToast("error", message);
                }

            })
        });

    }
}