from lib.snabbdom import h
import message
from browser import document
from model.translation import TAGS


def modal_template(content, title, msg, prop):
    reset = message.msg(message.ModalNotOkClose)
    return [
        h("header", {}, [
            h("h3", {}, title),
            h("label.close", {"on": {"click": reset}}, "×")]),
        h("section.content", {}, content ),
        h("footer", {}, [
            h("a.button", {"on": {"click":  message.msg(msg, prop)}}, "OK"),
            h("label.button.dangerous", {"on": {"click": reset}}, "Cancel")])]
    
    
def one_question_modal(title, msg, question, current_value, prop):
    content = [
        h("span", {}, question),
        h("label", {}, [
            h("input#modal-input", {"props": {"type": "text", "value": current_value}}, "")])]
    return modal_template(content, title, msg, prop)


def edit_translation(translation, cluster_idx, num_clusters, cls, prop):
    def split_line2(left, right):
        return h("div.flex.two", {}, [
            h("span.third.span-left-of-input", {}, left), h("span.two-third", {}, right)])
    
    def split_line3(left, center, right):
        return h("div.flex.three", {}, [
            h("span.third.span-left-of-input", {}, left), h("span.third", {}, center), h("span.third", {}, right)])
    
    def dropdown_right(tag_name):
        left = tag_name + ":"
        
        values = TAGS[tag_name]
        selected_value = translation.tags[tag_name] if tag_name in translation.tags else None
        
        options = [h("option", {}, [])]
        for value in values:
            options.append(h("option", {"props": {"selected": selected_value == value}}, value))
        center = h("select#{}-s".format(tag_name), {}, options)
        
        right_value = selected_value if selected_value not in values and selected_value is not None else ""
        right = h("input#{}-o".format(tag_name), 
                  {"props": {"type": "text", "value": right_value, "placeholder": "drugo"}}, 
                  [])
        
        return split_line3(left, center, right)
                        
    # first line: transalation itself
    content = [split_line2("Prevedek:", 
                           h("input#etv", {"props": {"type": "text", "value": translation.translation}}, ""))]
    
    # cluster number
    options = [h("option", {"props": {"selected": idx == cluster_idx}}, str(idx + 1)) for idx in range(num_clusters + 1)]
    content.append(split_line2("Stevilka gruce:", h("select#cluster-num", {}, options)))
    
    # tags
    content.append(h("h4", {}, "Tags"))
    for tag in TAGS.keys():
        content.append(dropdown_right(tag))
        
    return modal_template(content, "Translation", cls, prop)


def edit_sense_label(sense):
    content = [h("span", {}, "Edit sense labels")]
    
    for slabel in sense.temporary_labels:
        content.append(h("label", {}, [
            h("input.sense-edit-input", {"props": {"type": "text", "value": slabel}}, "")]))
        
    content.append(h("button", {"on": {"click": message.msg(message.AddSenseLabel, sense)}}, "+"))
    
    return modal_template(content, "Sense", message.EditSenseLabel, sense)


def edit_sense_definition(sense):
    return one_question_modal("Sense definition", message.EditSenseDefinition, "Edit sense definition", sense.definition, sense)


def edit_comment(comment):
    return one_question_modal("Comment", message.EditComment, "Edit comment", comment, None)