import reflex as rx

from rxconfig import config


from  assets.db.db import db
import bcrypt

from myApp.includes.functions import *

from assets.lang.en.frontend import frontend 


class State(rx.State):
    """The app state."""
    email: str = ''
    name: str = ''
    validation: str = ''
    password: str = ''
    
    @rx.event
    def handle_submit(self):
        """Handle the form submit."""
        self.validation = ''
        if not validate_email(self.email):
            self.validation = frontend['email-validation-error-msg']
        elif len(self.password) < 8:
            self.validation = frontend['password-validation-error-msg']
        else:
            conn = db()
            cursor = conn.cursor()
            cursor.execute("SELECT id FROM py_users WHERE email = %s",(self.email,))
            eu = cursor.fetchone()
            #print(eu)
            if eu:
                self.validation = replace_attribute(frontend['used-error-msg'],self.email)
            else:
                hashed_password = bcrypt.hashpw(self.password.encode('utf-8'), bcrypt.gensalt())
                cursor.execute("INSERT INTO py_users (name,email,password,created_at) VALUES(%s,%s,%s,CURRENT_TIMESTAMP)",(self.name,self.email,hashed_password))
                self.name =  ''
                self.email = ''
                self.password = ''

@rx.page(route="/register")
def register() -> rx.Component:
    # Welcome Page (Index)
    return 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", class_name="img",align="center"),
                        class_name="vstack center frm_vstack",
                    ),
                    rx.vstack(
                        rx.vstack(
                            rx.text(
                                State.validation,
                                class_name='error'
                            )
                        ),
                    ),
                    rx.vstack(
                        rx.input(
                            placeholder=frontend['name_placeholder'],
                            name="name",
                            type="text",
                            required=True,
                            value= State.name,
                            on_change=State.set_name,
                            class_name="input full-width",
                        ),
                        class_name="vstack frm_vstack pt-1",
                    ),
                    rx.vstack(
                        rx.input(
                            placeholder=frontend['email_placeholder'],
                            name="email",
                            type="text",
                            required=True,
                            value= State.email,
                            on_change=State.set_email,
                            class_name="input full-width",
                        ),
                        class_name="vstack frm_vstack",
                    ),
                    rx.vstack(
                        rx.input(
                            placeholder=frontend['password_placeholder'],
                            name="password",
                            type="password",
                            required=True,
                            value=State.password,
                            on_change=State.set_password,
                            class_name="input full-width",
                        ),
                        class_name="vstack frm_vstack",
                    ),
                    rx.vstack(
                        rx.button(frontend['register'], 
                            class_name="btn full-width",
                            #on_click=State.handle_submit
                        ),
                        align="center",
                        class_name="vstack pd0 frm_vstack",
                    ),
                    rx.flex(
                        rx.link(
                            frontend['back-to-login'],
                            href="/login",
                            size="2",
                            class_name='full-width right',
                        ),
                        class_name='full-width',
                    ),
                    
                    
                on_submit=State.handle_submit,
                reset_on_submit=True,
            ),
            spacing="5",
            justify="center",
            min_height="95vh",
        ),
        #rx.logo(),
        size="1",
    )