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

from flexx import flx

from ipfsdocs.placeholder import PlaceHolder
from ipfsdocs.common import (
    URL,
    BootstrapButton,
)


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

img {
    max-width: 100%;
    max-height: 100%;
}

video {
    max-width: 100%;
    max-height: 100%;
}

"""

    def init(self):
        global Hammer
        self.placeholders_widget = flx.Layout(css_class="grid", flex=1.0)
        self.placeholders = []
        self.h = Hammer(self.node)
        self.h.on("swipeleft", lambda ev: self.onswipeleft())
        self.h.on("swiperight", lambda ev: self.onswiperight())
        self.setup_placeholders()

    def onswiperight(self):
        if self.root.frontend.inmodal:
            return
        self.previous()

    def onswipeleft(self):
        if self.root.frontend.inmodal:
            return
        self.next()

    @flx.reaction("placeholders*.contextmenu")
    def focus_oncontextmenu(self, *events):
        event = events[-1]
        for placeholder in self.placeholders:
            if placeholder == event.source:
                placeholder.set_highlight("HIGHLIGHT")
            else:
                placeholder.set_highlight("DISCRET")

    @flx.reaction("root.jssays.contextmenu_exit")
    def restore_oncontextmenu_exit(self, *events):
        for placeholder in self.placeholders:
            placeholder.set_highlight("NEUTRAL")

    def intersect(self, entries):
        for entry in entries:
            entry.target.flx_parent.set_visible(entry.isIntersecting)
            entry.target.flx_parent.set_load(entry.isIntersecting)
            entry.target.flx_parent.set_intersection_ratio(
                entry.intersectionRatio
            )

    @flx.reaction("root.state.number_per_page", "root.state.thumbnail_width")
    def setup_placeholders(self):
        global IntersectionObserver
        self.observer = IntersectionObserver(
            self.intersect,
            {
                "root": self.node,
                # top, right, bottom, left
                "rootMargin": "100px 0px 100px 0px",
                "threshold": 0.1,
            },
        )
        for placeholder in self.placeholders:
            placeholder.dispose()

        with self.placeholders_widget:
            self.placeholders = [
                PlaceHolder(
                    minsize=(int(self.root.state.thumbnail_width), int(self.root.state.thumbnail_width)),
                    maxsize=(int(self.root.state.thumbnail_width), int(self.root.state.thumbnail_width)),
                )
                for i in range(self.root.state.number_per_page)
            ]
        for placeholder in self.placeholders:
            placeholder.node.flx_parent = placeholder
            self.observer.observe(placeholder.node)
        self.update_query_results()

    @flx.emitter
    def update_query_results(self):
        return {}

    @flx.reaction("key_down")
    def on_key_down(self, *events):
        global window
        if self.root.frontend.inmodal:
            return
        for event in events:
            if event.key == "ArrowRight":
                self.next()
            elif event.key == "ArrowLeft":
                self.previous()
            elif event.key == "ArrowDown":
                self.placeholders_widget.node.scrollTop += 2
            elif event.key == "ArrowUp":
                self.placeholders_widget.node.scrollTop -= 2
            elif event.key == "PageDown":
                self.placeholders_widget.node.scrollTop += 0.8 * self.placeholders_widget.node.clientHeight
            elif event.key == "PageUp":
                self.placeholders_widget.node.scrollTop -= 0.8 * self.placeholders_widget.node.clientHeight
            elif event.key == "Home":
                self.placeholders_widget.node.scrollTop = 0
            elif event.key == "End":
                self.placeholders_widget.node.scrollTop = self.placeholders_widget.node.scrollHeight
        return

    def next(self):
        self.root.state.next_page()
        self.placeholders_widget.node.scroll(0, 0)

    def previous(self):
        self.root.state.previous_page()
        self.placeholders_widget.node.scroll(0, 9999)

    @flx.reaction("root.state.query_results", "root.state.page",
                  "root.state.number_per_page", "update_query_results")
    def new_query_results(self, *events):
        global undefined, moment
        for i, placeholder in enumerate(self.placeholders):
            row = self.root.state.query_results[i + (self.root.state.page * self.root.state.number_per_page)]
            if row == undefined:
                placeholder.hide()
            else:
                placeholder.show()
                placeholder.set_url(f'{row["cid"]}?filename={row["filename"]}')
                placeholder.set_webcid(row["web_cid"])
                placeholder.set_filename(row["filename"])
                placeholder.set_cid(row["cid"])
                placeholder.set_mimetype(row["mimetype"])
                placeholder.update_tags(row["tags"])
                title = f"{moment(row['date']).format('LLLL')}: {row['description']}"
                placeholder.set_description(title)
                if row["class"] == "photo":
                    placeholder.set_html(
                        f'<img data-toggle="tooltip"'
                        f' data-placement="top"'
                        f' data-html="true"'
                        f' title="{title}"'
                        f' class="centered fit"'
                        f' src="{URL}{row["thumbnail_cid"]}"/>'
                    )
                elif row["class"] == "video":
                    placeholder.set_html(
                        f'<video class="centered shrink_to_space fit" controls="controls" preload="none" poster="{URL}{row["thumbnail_cid"]}">'
                        f'  <source src="{URL}{row["web_cid"]}" type="video/webm">'
                        '</video>'
                    )
                else:
                    placeholder.set_html(f"euh: {row['class']}")