import reflex as rx

from rxconfig import config
from  assets.db.db import db
import bcrypt

from myApp.includes.functions import *
from myApp.auth.checklogin import *
from assets.lang.en.frontend import frontend 

class State(rx.State):
    """The app state."""


@rx.page(route="/login")
def login() -> rx.Component:
    # Welcome Page (Index)
    return rx.cond(
        AuthState.is_logged_in,
            rx.script("window.location.href = '/dashboard';"),  # Redirect via JavaScript pc.redirect("/dashboard"),
        rx.container(
            rx.color_mode.button(position="top-right"),
            rx.vstack(
                #rx.heading(frontend['my_app'], size="9"),
                #rx.heading(config, size="9"),
                rx.form.root(
                    #rx.hstack(
                    rx.vstack(
                        rx.image(
                            src="/images/logo.png", 
                            align="center"
                        ), 
                        class_name="vstack center frm_vstack",
                    ),
                    rx.vstack(
                        rx.vstack(
                            rx.text(
                                AuthState.user_id,
                                class_name='error'
                            )
                        ),
                    ),
                    rx.vstack(
                        rx.vstack(
                            rx.text(
                                AuthState.validation,
                                class_name='error'
                            )
                        ),
                    ),
                    rx.vstack(
                        rx.input(
                            placeholder=frontend['email_placeholder'],
                            name="email",
                            type="text",
                            required=True,
                            value= AuthState.email,
                            on_change=AuthState.set_email,
                            class_name="input full-width",
                        ),
                        class_name="vstack frm_vstack",
                    ),
                    rx.vstack(
                        rx.input(
                            placeholder=frontend['password_placeholder'],
                            name="password",
                            type="password",
                            value= AuthState.password,
                            on_change=AuthState.set_password,
                            required=True,
                            class_name="input full-width",
                        ),
                        class_name="vstack frm_vstack",
                    ),
                    rx.vstack(
                        rx.button(
                            frontend['login'],
                            type="submit",
                            class_name="btn full-width",
                        ),
                        align="center",
                        class_name="vstack pd0 frm_vstack",
                    ),
                    rx.flex(
                        rx.link(
                            frontend['forget-password'],
                            href="#",
                            size="2",
                            class_name='full-width',
                        ),
                        rx.link(
                            frontend['create-account'],
                            href="/register",
                            size="2",
                            class_name='full-width right',
                        ),
                        class_name='full-width',
                    ),
                    #),
                    on_submit=AuthState.login,
                    reset_on_submit=False,
                ),
            spacing="5",
            justify="center",
            min_height="95vh",
        ),
        #rx.logo(),
        size="1",
    )
)