#!/usr/bin/env python3
# -*- coding:utf-8 -*-

from flexx import flx

from ipfsdocs.events import Events
from ipfsdocs.common import (
    BootstrapButton,
    BootstrapInput,
    HR,
    get_from_localstorage,
    set_to_localstorage,
    DatePicker,
)


class Tag(flx.Widget):
    key = flx.StringProp()
    value = flx.StringProp()
    index = flx.IntProp()

    def _render_dom(self):
        if self.key.startswith("-"):
            color = "warning"
        else:
            color = "success"
        return [flx.create_element("span", {"class": f"badge badge-pill badge-{color}"}, f"{self.key}:{self.value}")]

    @flx.reaction("pointer_click")
    def remove(self):
        self.root.state.remove_active_tag(self.index)


class Tags(flx.HBox):
    CSS = """
.flx-Tags {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow-y:scroll;
}

.flx-Tags::before {
    content: "\uf02b";
}
"""

    @flx.reaction("root.state.active_tags")
    def update_tags(self):
        for child in self.children:
            child.dispose()
        with self:
            for index, key_value in enumerate(self.root.state.active_tags):
                key, value = key_value
                Tag(key=key, value=value, index=index)

    def init(self):
        self.update_tags()


class TagsHandler(flx.VBox):
    def init(self):
        with flx.HBox():
            self.key = flx.ComboBox(placeholder_text="key", flex=0.1)
            self.value = flx.ComboBox(placeholder_text="value", flex=0.1)
            self.add_filter = BootstrapButton(text="\uf067", flex=0.001)
            self.add_non_filter = BootstrapButton(text="\uf068", flex=0.001)
            self.edit = BootstrapButton(text="\uf0c4 \uf02b", flex=0.001)
        self.tags = Tags(flex=1)

    @flx.reaction("edit.pointer_click")
    def edit_tag_modal(self):
        self.root.frontend.tag_modal.display()

    @flx.reaction("root.state.tags")
    def update_tags(self):
        self.key.set_options(sorted(self.root.state.tags.keys(), key=lambda e: e.lower()))

    @flx.reaction("key.selected_index", "root.state.tags")
    def update_values(self):
        if self.key.selected_index != -1:
            self.value.set_options(sorted(self.root.state.tags[self.key.selected_key], key=lambda e: e.lower()))

    @flx.reaction("key.selected_index", "value.selected_index")
    def update_confirm(self):
        self.add_filter.set_disabled(self.key.selected_index == -1 or self.value.selected_index == -1)
        self.add_non_filter.set_disabled(self.key.selected_index == -1 or self.value.selected_index == -1)

    @flx.reaction("add_filter.pointer_click")
    def add_tag(self):
        self.root.state.add_active_tag(
            self.key.selected_key,
            self.value.selected_key,
        )

    @flx.reaction("add_non_filter.pointer_click")
    def add_non_tag(self):
        self.root.state.add_active_tag(
            "-" + self.key.selected_key,
            self.value.selected_key,
        )


class Owner(BootstrapInput):
    def init(self):
        self.set_icon_text("\uf007")
        self.owner = flx.ComboBox(
            options=('aylapomme', 'konubinix', "ayla"),
            selected_key=(get_from_localstorage("owner")["key"] or "aylapomme"),
            flex=1,
        )
        self.update_owner()

    @flx.reaction("owner.selected_key")
    def update_owner(self):
        set_to_localstorage("owner", {"key": self.owner.selected_key})
        if self.owner.selected_key != "":
            self.root.state.set_owner(self.owner.selected_key.upper())


class Query(flx.VBox):
    def init(self):
        with flx.HBox():
            self.owner = Owner(flex=1)
            with BootstrapInput(icon_text="\uf002"):
                self.state = flx.ComboBox(
                    options=("todo", "next", "done", "delete"),
                    selected_key=(get_from_localstorage("state")["key"] or "done"),
                    flex=1,
                )
        with flx.HBox():
            self.from_date = DatePicker()
            self.from_date.set_date(get_from_localstorage("from_date")["date"] or "")
            self.to_date = DatePicker()
            self.to_date.set_date(get_from_localstorage("to_date")["date"] or "")
        HR()
        TagsHandler()

    @flx.reaction("from_date.date")
    def save_from_date(self):
        set_to_localstorage("from_date", {"date": self.from_date.date})

    @flx.reaction("to_date.date")
    def save_to_date(self):
        set_to_localstorage("to_date", {"date": self.to_date.date})

    @flx.reaction("to_date.date")
    def update_to_date(self):
        self.root.state.set_to_date(self.to_date.date)

    @flx.reaction("from_date.date")
    def update_from_date(self):
        self.root.state.set_from_date(self.from_date.date)

    # @flx.reaction("events.event_id", "root.state.number_of_elements")
    # def update_delete_button(self):
    #     self.remove_event.set_disabled(self.events.event_id == -1 or self.root.state.number_of_elements != 0)

    # @flx.reaction("remove_event.pointer_click")
    # def ask_delete_event(self):
    #     self.root.frontend.confirm.display("\uf1ea \uf061 \uf1f8", self.delete_event)

    # def delete_event(self):
    #     self.root.jssays.delete_event(self.events.event_id)

    # @flx.reaction("events.event_id")
    # def update_query(self):
    #     self.root.state.set_current_event_id(self.events.event_id)

    @flx.reaction("root.state.readonly")
    def hide_when_readonly(self):
        self.set_css_class("d-none")

    @flx.reaction("state.text")
    def update_state(self, *event):
        set_to_localstorage("state", {"key": self.state.selected_key})
        if self.state.text != "":
            self.root.state.set_state(self.state.text.upper())