from lib.snabbdom import h, patch
from message import *
import random
from view.utils import *
from model import Translation, Sense, Example
from browser import document

from export import export_to_xml


class View:
    def __init__(self, container):
        self.vdom = h('div', {}, "Loading...")
        self.entry_vdom = None
        self.model = None
        patch(container, self.vdom)
        
        # this does not work on parent div, so attaching to document here
        document.addEventListener("keydown", msg(KeyboardPress))
    
    def view(self, model, data_change):
        self.model = model
        
        if data_change or self.entry_vdom is None:
            self.model.pre_view()
            self.entry_vdom = self.model.entry.view(self.model)
          
        new_vdom = self._view()
        patch(self.vdom, new_vdom)
        self.vdom = new_vdom
    
    def _view(self):
        return h("div", {"on": { "click": msg(Reset) }}, [
            self.entry_vdom,
            # h("button.blk", {"on": { "click": lambda _: check_export(self.model) } }, "CHK"),
            View.view_menu(self.model.menu_location, self.model.menu_target, self.model.entry),
            View.view_modal(self.model.modal_shown, self.model.modal)])
    
    @staticmethod
    def view_toggle_buttons(model):
        txt_examples = "Hide examples" if model.examples_shown else "Show examples"
        txt_clusters = "Hide clusters" if model.clusters_shown else "Show clusters"
        
        return [h("span.button.toggle", {"on": {"click": msg(ToggleExamples)}}, txt_examples),
                h("span.button.toggle", {"on": {"click": msg(ToggleClusters)}}, txt_clusters),
                View.view_ske_button(model)]
        
    @staticmethod
    def view_translations(translations, parent, model):
        result = []
        for cluster in translations:
            result.append(h("div.translation-div-cluster", {}, [t.view(model) for t in cluster]))
        
        result.append(h("button.add-button", {"on": {"click": msg(ShowAddTranslation, parent)}}, "+"))
        return result
    
    @staticmethod
    def view_ske_button(model):
        return h(
            "span#ske-button.button.toggle", 
            { "on": {"click": msg(ShowSkeModal, 1, model.entry.headword, 0, "simple")} }, 
            h("svg#ske-img", {
                "attrs": {
                    "xmlns": "http://www.w3.org/2000/svg",
                    "height": "1.4em",
                    "viewBox": "0 0 9.82 9.82" }},
                h("path", {"attrs": {
                    "d": "M0 5C0 .1 0 .1 4.9.1s4.9 0 4.9 4.9 0 4.9-4.9 4.9S0 9.9 0 5zm6.05 4.36C9.28 8.518 10.46 4.68 8.3 2c-.432-.54-2.04.978-2.05 1.93-.001.227.01.233.486.233 1.58.001 1.8 2.17.26 2.42-2.44.396-2.43-3.48.018-5.05.52-.334.53-.296-.125-.602-4.62-2.16-8.77 3.6-5.2 7.24.624.638.99.562 1.6-.328.543-.798.56-1.23.047-1.23-1.12 0-1.77-.88-1.32-1.77.564-1.1 2.2-.863 2.64.4.385 1.12.006 2.36-1.03 3.36-.61.588-.594.62.38.838.398.09 1.57.048 2.03-.072z",
                    "fill": "#fff"}})))
    
    @staticmethod
    def view_menu(location, menu_target, entry): 
        style = {
            "left": "{}px".format(location[0]),
            "top": "{}px".format(location[1])
        }
        
        if menu_target is None:
            style["opacity"] = "0"
            style["visibility"] = "hidden"
        
        elif type(menu_target) is Translation:
            translation = menu_target
            return h("span.popup-menu", { "style": style }, [
                h("button.shyButton", { "on": {"click": msg(ShowEditTranslation, translation)}}, "✎"),
                h("button.shyButton", { "on": {"click": msg(MoveRight, translation)}}, "→"),
                h("button.shyButton", { "on": {"click": msg(MoveLeft, translation)}}, "←"),
                h("button.shyButton", { "on": {"click": msg(BinTranslation, translation)}}, "🗑")])
        
        elif type(menu_target) is Sense:
            sense = menu_target
            return h("span.popup-menu", { "style": style }, [
                h("button.shyButton", { "on": {"click": msg(SenseMoveUp, sense)}}, "↑"),
                h("button.shyButton", { "on": {"click": msg(SenseMoveDown, sense)}}, "↓"),
                h("button.shyButton", { "on": {"click": msg(AddMultiwordExample, sense)}}, "+"),
                h("button.shyButton", { "on": {"click": msg(SenseBin, sense)}}, "🗑")])
        
        elif type(menu_target) is Example:
            example = menu_target
            sense = example_sense(example, entry)
            dom_children = [
                h("button.shyButton", { "on": {"click": msg(ShowExampleEdit, example, sense)}}, "✎"),
                h("button.shyButton", { "on": {"click": msg(ExampleMoveUp, example)}}, "↑"),
                h("button.shyButton", { "on": {"click": msg(ExampleMoveDown, example)}}, "↓"),
                h("button.shyButton", { "on": {"click": msg(ExampleBin, example)}}, "🗑")]

            if example.is_multiword():
                dom_children.insert(1, h("button.shyButton", { "on": {"click": msg(ExampleAsNewEntry, example, sense)}}, "Izvozi v novo geslo"))

            return h("span.popup-menu", { "style": style }, dom_children)
        else:
            console.log("Should not be heree!!")
        
    @staticmethod
    def view_modal(modal_shown, modal):
        return h("div.modal", {}, [
            h("input", { "props": {"type": "checkbox", "checked": modal_shown} }, ""), 
            h("label.overlay", {}, ""), 
            h("article", {"on": { "click": msg(NoAction) }}, modal())])