from ipyleaflet import Polygon, WidgetControl
from ipywidgets import widgets
from ipywidgets.widgets.widget import jsondumps
import leafmap
import logging
import solara
from reacton import component as component

from toy_app.src import map_utils

log = logging.getLogger(__name__)


# Display a cog in leafmap
# Allow the user to draw a shape on the map
# Retrieve the user's shape and run metrics on it
# Used Stac to get the available collections from the 10m Annual Land Use Land Cover (9-class)
libya_fire_url = (
    "https://github.com/opengeos/data/releases/download/raster/Libya-2023-07-01.tif"
)
richness = "https://data.source.coop/cboettig/mobi/species-richness-all/SpeciesRichness_All.tif"
deforest = "https://data.source.coop/vizzuality/lg-land-carbon-data/deforest_carbon_100m_cog.tif"
irrecoverable = (
    "https://data.source.coop/cboettig/carbon/cogs/irrecoverable_c_total_2018.tif"
)
libya_fire_name = "Libya Fire"
libya_layer_visible = solara.reactive("True")
test_poly = {
    "type": "Feature",
    "properties": {},
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [-72.949219, 42.447781],
                [-73.35022, 42.195969],
                [-73.372192, 41.799983],
                [-73.026123, 41.566142],
                [-72.608643, 41.343825],
                [-72.301025, 41.590797],
                [-71.993408, 41.442726],
                [-71.768188, 41.967659],
                [-71.28479, 42.138968],
                [-72.064819, 42.362603],
                [-72.614136, 42.195969],
                [-72.949219, 42.447781],
            ]
        ],
    },
}
geometry = solara.reactive(jsondumps(test_poly))
lost_carbon_count = solara.reactive(0)


class Map(leafmap.Map):
    """
    This is the map which will be displayed in the solara webapp
    """

    def __init__(self, **kwargs):
        log.warning("Starting Map init")
        kwargs["toolbar_control"] = False
        super().__init__(**kwargs)
        basemap = {
            "url": "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
            "attribution": "Google",
            "name": "Google Satellite",
            "opacity": 1.0,
        }
        self.add_tile_layer(**basemap, shown=False)
        self.add_layer_manager(opened=False)
        self.add_cog_layer(
            url=libya_fire_url, name=libya_fire_name
        )  # Just display the cog for now, the layer toggle isn't working as expected
        self.add_cog_layer(
            url=irrecoverable,
            name="irrecoverable c",
            palette="reds",
            zoom_to_layer=False,
            opacity=0.8,
        )
        # self.toggle_libya_layer()
        # user_poly = map_utils.get_user_polygon(self)
        # if user_poly:
        #     log.warning(f"Polygon? {user_poly}")
        # self.add_click_detector_widget()
        self.add_button()

    def add_button(self):
        button = widgets.Button(description="Calculate")
        output = widgets.Output()

        def on_button_click(_):
            if self.user_roi is not None:
                geometry.set(self.user_roi)
                selected_polygon = map_utils.read_polygon(self.user_roi)
                selected_on_carbon = map_utils.extract_geom(
                    selected_polygon, irrecoverable
                ).fillna(0)
                area = round(float(map_utils.area_hectares(selected_polygon)))
                carbon_total = round(float(selected_on_carbon.mean()) * area)
                lost_carbon_count.set(carbon_total)

        button.on_click(on_button_click)

        widget = widgets.VBox([button, output])
        self.add_widget(widget)


zoom = solara.reactive(2)
center = solara.reactive((20, 0))


@component
def Page():
    with solara.Column(style={"min_width": "500px"}):
        with solara.Row():
            solara.Text(
                f"Average Carbon Lost within the selected area in 2018: {lost_carbon_count.value:,} Tonnes"
            )
        Map.element(  # type: ignore
            zoom=zoom.value,
            on_zoom=zoom.set,
            center=center.value,
            on_center=center.set,
            scroll_wheel_zoom=True,
            toolbar_ctrl=False,
            draw_control=True,
            height="780px",
        )
        with solara.Row():
            solara.Text(f"Center: {center.value}")
            solara.Text(f"Zoom: {zoom.value}")
            solara.Text(f"UserPoly: {geometry.value}")