"""The settings page."""
import asyncio
from blurme.templates import template
from blurme.state import State
import reflex as rx


color = "rgb(107,99,246)"

@template(route="/settings", title="Zdjęcie", image = "/image-icon.png")
def settings() -> rx.Component:

    return rx.vstack(
        rx.heading("BlurMe", font_size="3em", margin_bottom="25px", background_image="linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", background_clip="text", padding = "10px"),
        rx.text("Dodaj zdjęcie, które chcesz zanonimizować", font_size="1.2em"),
        rx.upload(
            rx.vstack(rx.text("Przeciągnij albo kliknij, aby wybrać pliki"),),
            border=f"1px dotted {color}",
            padding="5em",
            multiple=True,
            accept={
                "image/png": [".png"],
                "image/jpeg": [".jpg", ".jpeg"],
                "image/webp": [".webp"],
                "image/tiff": [".tif", ".tiff"], }, 
            max_files=5,
            ),
        rx.hstack(rx.foreach(rx.selected_files, rx.text)),
        rx.button( "Załaduj zdjęcie",
            on_click=lambda: State.handle_upload(
            rx.upload_files()),color = "rgba(47, 187, 74,255)"),

        rx.responsive_grid(
            rx.foreach(
                State.img,
                lambda img: rx.vstack(
                    rx.image(src=f'/{img}', height = "200px"),
                    rx.text(img),
                    
            
                rx.hstack(rx.button("Usuń",
                          on_click=lambda img_name=img: State.delete_image(img_name), color="rgba(255, 75, 42,255)",
                          width = "125px"),
                          rx.button("Anonimizuj",
                          on_click=lambda img_name=img: State.image_anonymization(img_name),
                          width = "125px"),
                          rx.button("Pobierz",
                          on_click=lambda img_name=img: State.download_image(img_name),
                          width = "125px"),
                          padding="1em"
            ),
            ),
            
        ),columns=[2],
            spacing="5px",
            


        #rx.foreach(
        #    State.img,
        #    lambda img: rx.vstack(
        #        rx.image(src=f'/{img}', max_width = "800px"),
        #        rx.hstack(rx.button("Usuń",
        #                  on_click=lambda img_name=img: State.delete_image(img_name),
        #                  width = "125px"),
        #                  rx.button("Anonimizuj",
        #                  width = "125px"),
        #                  rx.button("Pobierz",
        #                  on_click=lambda img_name=img: State.download_image(img_name),
        #                  width = "125px"),
        #                  padding="1em"
        #    ),  
        #    padding="3em",

    ),)