import flet as ft


class Landing(ft.Container):
    def __init__(self):
        super().__init__(
            expand=True,
            padding=ft.padding.only(top=0, left=20, right=20, bottom=15),
            col={"sm": 12, "md": 12, "lg": 6},
            bgcolor="white10"
        )
        
        self.image = ft.Container( 
            content=ft.ResponsiveRow(
                controls=[ft.Image(
                    src=f"/images/wbs_new_logo.jpeg",
                    fit=ft.ImageFit.CONTAIN
                )
             ],
             col={"sm": 12, "md": 12, "lg": 6},
            ),
            margin=ft.margin.only(bottom=20, top=20),
            border_radius=10,
        )

        self.title = ft.Text(
            value="linehub: Explore, share, and learn every line counts",
            size=30,
                    
        )
        
        self.padding_container = ft.Container(
            height=10,
        )

        self.subtitle = ft.Text(
            value="have something interesting to share ? fill out the form and your links so others can see and learn",
            size=15,
            max_lines=2
        )

        self.content = ft.ResponsiveRow(
            controls=[
                                self.image,
                self.title, self.subtitle,
                ],
            col={"sm": 12, "md": 12, "lg": 6},
            expand=True,
        )

#create state form class
class FormData:
    tags: list[list[str]] = [
    ["Fraud/Kecurangan/Korupsi","white10"],
    ["Pelanggaran Kode Etik/Peraturan Perusahaan","white10"],
    ["Pelanggaran Hukum","white10"],
    ["Gratifikasi","white10"],
    ["Suap","white10"],
    ["Kekerasan","white10"],
    ["Lainnya","white10"],
    ]

    @staticmethod
    def update_tags(tag:list[str], instance: object):
        new_tag: list[str] = [tag[0], ft.colors.with_opacity(opacity=0.61, color="green")]
        
        FormData.tags = [
            new_tag if item[0] == new_tag[0] else [item[0],
            "white10"]
            for item in FormData.tags
        ]
        
        instance.tags.controls = instance.render_tags()
        instance.tags.update()
        
#create form class
class Form(ft.Container):
    def __init__(self):
        super().__init__(
            expand=True,
            border=ft.border.all(width=1, color="white10"),
            padding=20,
            border_radius=6
        )
        
        self.namaPelapor = ft.TextField(bgcolor="transparent",border_color=ft.colors.TRANSPARENT)
        self.alamatEmail = ft.TextField(bgcolor="transparent",border_color=ft.colors.TRANSPARENT)
        self.nomorTelepon =ft.TextField(bgcolor="transparent",border_color=ft.colors.TRANSPARENT)
        
        self.dateText = ft.TextField(bgcolor="transparent")
        self.date = ft.ElevatedButton(text="tanggal", icon=ft.icons.CALENDAR_MONTH, height=45,)
        
        self.selected_tags=[]
        self.tags = ft.Row(controls=self.render_tags(), wrap=True )
        
        self.name = ft.TextField(bgcolor="transparent", expand=1)
        self.link = ft.TextField(bgcolor="transparent", expand=2)
        
        self.locationReport= ft.Dropdown(
            options=[
                ft.dropdown.Option("Kantor Pusat"),
                ft.dropdown.Option("Transjakarta"),
                ft.dropdown.Option("MRT"),
                ft.dropdown.Option("LRT Jakarta"),
                ft.dropdown.Option("LRT Jabodetabek"),
                ft.dropdown.Option("LMS"),
                ft.dropdown.Option("Kereta Commuter Indonesia"),
                ft.dropdown.Option("D'Arcici"),
                ft.dropdown.Option("TMII"),
                ft.dropdown.Option("Gerbang Toll Cirebon"),
                ft.dropdown.Option("Gerbang Toll Bandung"),
            ]
        )
        
        self.commit = ft.TextButton(
            text="Submit",
            height=45
        )
        
        self.content = ft.ListView(
            auto_scroll=True,
            spacing=20,
            expand=True,
            controls=[
                ft.Text(value="nama pelapor"),
                self.namaPelapor,
                ft.Text(value="alamat email"),
                self.alamatEmail,
                ft.Text(value="nomor telepon"),
                self.nomorTelepon,
                ft.Divider(height=10, color="transparent"),
                #
                ft.Text("pilih tanggal"),
                ft.Row(controls=[self.dateText, self.date]),
                ft.Divider(height=10, color="transparent"),
                #
                ft.Text(value="pilih jenis pelaporan"),
                self.tags,
                ft.Divider(height=10, color="transparent"),
                #
                ft.Text(value="lokasi pelaporan"),
                self.locationReport,
                ft.Divider(height=10, color="transparent"),
                #
                ft.Text(value="Add Media"),
                ft.Row(controls=[self.name, self.link]),
                ft.Divider(height=10, color="transparent"),
                #
                ft.Row(controls=[self.commit],alignment="center")
            ]
        )
        
    # create methode render tags
    def render_tags(self):
        return [
            ft.Container(
                content=ft.Text(value=name, size=11, weight="w300"),
                bgcolor=bgcolor,
                padding=6,
                border_radius=4,
                animate= ft.Animation(duration=1000, curve="decelerate"),
                #on click
                on_click=lambda _, name=name, bgcolor=bgcolor: self.update_selected_tags(name, bgcolor),
            )
            for name, bgcolor in FormData.tags
        ]
    
    def update_selected_tags(self, name, bgcolor):
        if name in self.selected_tags:
            self.selected_tags.remove(name)
            self.update_tag_color(name, "white10")
        else:
            self.selected_tags.append(name)
            self.update_tag_color(name, ft.colors.with_opacity(opacity=0.61, color="green"))
        print("ini:", self.selected_tags)
        
    def update_tag_color(self, name, bgcolor):
    # Temukan kontainer tag yang sesuai dengan nama
        for tag_container in self.tags.controls:
            if tag_container.content.value == name:
                tag_container.bgcolor = bgcolor
                tag_container.update()
                break


def main(page: ft.Page):
    page.scroll= "auto"
    
    page.add(ft.SafeArea(
        ft.Stack(
            controls=[
                ft.Container(
                    content=ft.Column(
                        
                        controls=[
                        
                        ft.Container(
                            content=ft.ResponsiveRow(
                                controls=[
                                    # landing
                                    Landing(),
                                    ft.Container(
                                        # form
                                        content=Form(),
                                        padding=ft.padding.only(left=20,right=20, top=0),
                                        col={"xs":12,"sm":12,"md":12,"lg":6})
                                    
                                ],
                                vertical_alignment="center"
                            ),
                            border=ft.border.only(
                                top=ft.BorderSide(width=2, color="white10"),
                                bottom=ft.BorderSide(width=2, color="white10"),
                            ),
                            padding=ft.padding.only(top=20, bottom=20),
                        )
                        ]
                        
                    )
                )
            ],
            expand=True
        )
    )
    )


ft.app(
    target=main,
    assets_dir="assets",
    upload_dir="tmp",
    web_renderer=ft.WebRenderer.HTML,
    view=ft.AppView.WEB_BROWSER
)
