#:import LoginScreen screens.login.login.LoginScreen
#:import LoginBoxLayout screens.login.login.LoginBoxLayout
#:import UsernameField screens.login.login.UsernameField
#:import PasswordField screens.login.login.PasswordField
#:import LoginButtonLayout screens.login.login.LoginButtonLayout
#:import LoginButton screens.login.login.LoginButton
#:import RegisterButton screens.login.login.RegisterButton
#:import LoginStatus screens.login.login.LoginStatus
#:import rgb main.rgb
#:import COLOR_TEXT main.COLOR_TEXT
#:import COLOR_CARD main.COLOR_CARD
#:import COLOR_CARD_BORDER main.COLOR_CARD_BORDER
#:import COLOR_ACCENT main.COLOR_ACCENT
#:import images_path kivymd.images_path

<LoginBoxLayout>:
    id: loginbox
    orientation:'vertical'
    cols:1
    size_hint:None,None
    width: '333sp'
    pos_hint: {'center_x':0.5,'center_y':0.5}
    md_bg_color: rgb(*COLOR_CARD)
    radius:[20,] 
    border_radius:20
    spacing:'10dp'
    padding:'25dp'
    adaptive_height: True
    # canvas:
    #     Color:
    #         rgba: rgb(*COLOR_CARD_BORDER)
    #     Line:
    #         width: 1
    #         rounded_rectangle: (self.x, self.y, self.width, self.height, 20, 20, 20, 20)

 

<UsernameLayout>:
    cols:2
    orientation:'horizontal'
    adaptive_height: True
    size_hint:1,None
    # pos_hint:{'right':0.9}
    # spacing:'100sp'
    # md_bg_color:1,1,0,1

<WelcomeLabel>:
    # text: 'Enter, Comrad'
    halign: 'center'
    size_hint_x: 1
    theme_text_color: 'Custom'
    color: rgb(*COLOR_ACCENT)
    adaptive_width: True
    # size_hint:0.333,None
    # md_bg_color:rgb(*COLOR_TEXT)
    # pos_hint: {'y':1}
    halign:'center'
    
    
<UsernameLabel>:
    theme_text_color: 'Custom'
    text_color: rgb(*COLOR_TEXT)
    width:'150sp'
    # adaptive_width: True
    size_hint:None,None
    # md_bg_color:rgb(*COLOR_TEXT)
    # pos_hint: {'y':1}
    halign:'center'

    


# <UsernameField>:
    id: username
    text: ""
    hint_text: "username"
    required: True
    write_tab: False
    multiline: False
    helper_text_mode: "on_error"
    color_mode: 'custom'
    line_color_focus: rgb(*COLOR_TEXT,a=0)
    line_color_normal: rgb(*COLOR_TEXT,a=0)
    current_hint_text_color: rgb(*COLOR_TEXT)
    error_color:rgb(*COLOR_TEXT)
    # pos_hint: {'center_x':0.5,'y':0.2}
    size_hint:1,None
    # font_size:'2dp'

<UsernameField>:
    id: username
    text: ""
    hint_text: "username"
    required: True
    write_tab: False
    multiline: False
    helper_text_mode: "on_error"
    color_mode: 'custom'
    line_color_focus: rgb(*COLOR_TEXT,a=0)
    line_color_normal: rgb(*COLOR_TEXT,a=0)
    current_hint_text_color: rgb(*COLOR_TEXT)
    error_color:rgb(*COLOR_TEXT)
    # pos_hint: {'center_x':0.5,'y':0.2}
    size_hint:1,None
    # font_size:'2dp'

    canvas.before:
        Clear
        # Disabled line.
        Color:
            rgba: self.line_color_normal if root.mode == "line" else (0, 0, 0, 0)
            # rgba: (0,0,0,0) #self.line_color_normal if root.mode == "line" else (0, 0, 0, 0)
        Line:
            points: self.x, self.y + dp(16), self.x + self.width, self.y + dp(16)
            width: 1
            dash_length: dp(3)
            dash_offset: 2 if self.disabled else 0
        # Active line.
        Color:
            rgba: (0,0,0,0) 
            # rgba: self.line_color_normal if root.mode == "line" else (0, 0, 0, 0)
        Line:
            points: self.x, self.y + dp(16), self.x + self.width, self.y + dp(16)
            width: 1
            dash_length: dp(3)
            dash_offset: 2 if self.disabled else 0
        # Color:
        #     rgba: self._current_line_color if root.mode in ("line", "fill") and root.active_line else (0, 0, 0, 0)
        # Rectangle:
        #     size: self._line_width, dp(2)
        #     pos: self.center_x - (self._line_width / 2), self.y + (dp(16) if root.mode != "fill" else 0)
        # Helper text.
        Color:
            rgba: self._current_error_color
        Rectangle:
            texture: self._msg_lbl.texture
            size:
                self._msg_lbl.texture_size[0] - (dp(3) if root.mode in ("fill", "rectangle") else 0), \
                self._msg_lbl.texture_size[1] - (dp(3) if root.mode in ("fill", "rectangle") else 0)
            pos: self.x + (dp(8) if root.mode == "fill" else 0), self.y + (dp(3) if root.mode in ("fill", "rectangle") else 0)
        # Texture of right Icon.
        Color:
            rgba: self.icon_right_color
        Rectangle:
            texture: self._lbl_icon_right.texture
            size: self._lbl_icon_right.texture_size if self.icon_right else (0, 0)
            pos:
                (self.width + self.x) - (self._lbl_icon_right.texture_size[1]) - dp(8), \
                self.center[1] - self._lbl_icon_right.texture_size[1] / 2 + (dp(8) if root.mode != "fill" else 0) \
                if root.mode != "rectangle" else \
                self.center[1] - self._lbl_icon_right.texture_size[1] / 2 - dp(4)
        Color:
            rgba: self._current_right_lbl_color
        Rectangle:
            texture: self._right_msg_lbl.texture
            size: self._right_msg_lbl.texture_size
            pos: self.x + self.width - self._right_msg_lbl.texture_size[0] - dp(16), self.y
        Color:
            rgba:
                (self._current_line_color if self.focus and not \
                self._cursor_blink else (0, 0, 0, 0))
        Rectangle:
            pos: (int(x) for x in self.cursor_pos)
            size: 1, -self.line_height
        # Hint text.
        Color:
            rgba: self._current_hint_text_color if not self.current_hint_text_color else self.current_hint_text_color
        Rectangle:
            texture: self._hint_lbl.texture
            size: self._hint_lbl.texture_size
            pos: self.x + (dp(8) if root.mode == "fill" else 0), self.y + self.height - self._hint_y
        Color:
            rgba:
                self.disabled_foreground_color if self.disabled else\
                (self.hint_text_color if not self.text and not\
                self.focus else self.foreground_color)
        # "rectangle" mode
        Color:
            rgba: self._current_line_color
        Line:
            width: dp(1) if root.mode == "rectangle" else dp(0.00001)
            points:
                (
                self.x + root._line_blank_space_right_point, self.top - self._hint_lbl.texture_size[1] // 2,
                self.right + dp(12), self.top - self._hint_lbl.texture_size[1] // 2,
                self.right + dp(12), self.y,
                self.x - dp(12), self.y,
                self.x - dp(12), self.top - self._hint_lbl.texture_size[1] // 2,
                self.x + root._line_blank_space_left_point, self.top - self._hint_lbl.texture_size[1] // 2
                )
    # "fill" mode.
    canvas.after:
        Color:
            rgba: root.fill_color if root.mode == "fill" else (0, 0, 0, 0)
        RoundedRectangle:
            pos: self.x, self.y
            size: self.width, self.height + dp(8)
            radius: (10, 10, 0, 0, 0)
    font_name: "Roboto" if not root.font_name else root.font_name
    foreground_color: app.theme_cls.text_color
    font_size: "16sp"
    bold: False
    padding:
        0 if root.mode != "fill" else "8dp", \
        "16dp" if root.mode != "fill" else "24dp", \
        0 if root.mode != "fill" and not root.icon_right else ("14dp" if not root.icon_right else self._lbl_icon_right.texture_size[1] + dp(20)), \
        "16dp" if root.mode == "fill" else "10dp"
    multiline: False
    size_hint_y: None
    height: self.minimum_height + (dp(8) if root.mode != "fill" else 0)






<PasswordField>:
    id: password
    text: ""
    password: True
    hint_text: "password"
    required: True
    write_tab: False
    multiline: False
    helper_text_mode: "on_error"
    color_mode: 'custom'
    line_color_focus: rgb(*COLOR_TEXT)
    line_color_normal: rgb(*COLOR_TEXT)
    current_hint_text_color: rgb(*COLOR_TEXT)
    text_color: rgb(*COLOR_TEXT)
    pos_hint: {'center_x':0.5,'y':0.2}
    size_hint:0.666,None

<LoginButtonLayout>:
    id: buttonbox
    orientation:'horizontal'
    cols: 2
    # size_hint_y: None
    adaptive_width: True
    height: '56dp'
    spacing: '25dp'
    padding: '10dp'
    # md_bg_color:1,1,0,1
    size_hint:None,None
    pos_hint: {'center_x': .5}#, 'bottom':1}

<PasswordPopup>:
    id: passpopup
    type: "custom"
    size: ('300dp','300dp')

    MDBoxLayout:
        id: msg_popup_box_layout
        size_hint:(None,None)
        orientation: 'vertical'
        cols:1
        md_bg_color: rgb(*COLOR_CARD)
        spacing:'0dp'
        padding:'0dp'
        pos_hint: {'center_x':0.5, 'center_y':0.5}
        radius:[20,] 
        border_radius:20
        canvas:
            Color:
                rgba: rgb(*COLOR_CARD_BORDER,a=0.5)
            Line:
                width: 1
                rounded_rectangle: (self.x, self.y, self.width, self.height, 20, 20, 20, 20)

    
    

<RegisterButton>:
    text: ""
    on_release: self.enter()
    theme_text_color: "Custom"
    text_color: rgb(*COLOR_TEXT)
    md_bg_color: 0,0,0,1
    # font_size:'24sp'
    # size_hint:1,None

<LoginButton>:
    text: ""
    on_release: self.login()
    theme_text_color: "Custom"
    text_color: rgb(*COLOR_TEXT)
    md_bg_color: 0,0,0,1
    # font_size:'24sp'
    # size_hint:1,None

<LoginStatus>:
    id: login_status
    text:""
    theme_text_color: 'Error'
    size_hint:1,1
    halign:'center'
    pos_hint:{'center_x':.5, 'center_y':0.5}
    


<LoginScreen>:
    name: "login"
    id: login_screen

    # LoginBoxLayout:
    #     UsernameField:
    #     PasswordField:
    #     LoginButtonLayout:
    #         LoginButton:
    #         RegisterButton:
    #     LoginStatus:















<TextfieldLabel>
    size_hint_x: None
    width: self.texture_size[0]
    shorten: True
    shorten_from: "right"
<MDTextFieldRect>
    on_focus:
        root.anim_rect((root.x, root.y, root.right, root.y, root.right, \
        root.top, root.x, root.top, root.x, root.y), 1) if root.focus \
        else root.anim_rect((root.x - dp(60), root.y - dp(60), \
        root.right + dp(60), root.y - dp(60),
        root.right + dp(60), root.top + dp(60), \
        root.x - dp(60), root.top + dp(60), \
        root.x - dp(60), root.y - dp(60)), 0)
    canvas.after:
        Color:
            rgba: root._primary_color
        Line:
            width: dp(1.5)
            points:
                (
                self.x - dp(60), self.y - dp(60),
                self.right + dp(60), self.y - dp(60),
                self.right + dp(60), self.top + dp(60),
                self.x - dp(60), self.top + dp(60),
                self.x - dp(60), self.y - dp(60)
                )
<MDTextFieldRound>:
    multiline: False
    size_hint: 1, None
    height: self.line_height + dp(10)
    background_active: f'{images_path}transparent.png'
    background_normal: f'{images_path}transparent.png'
    padding:
        self._lbl_icon_left.texture_size[1] + dp(10) if self.icon_left else dp(15), \
        (self.height / 2) - (self.line_height / 2), \
        self._lbl_icon_right.texture_size[1] + dp(20) if self.icon_right else dp(15), \
        0
    canvas.before:
        Color:
            rgba: self.normal_color if not self.focus else self._color_active
        Ellipse:
            angle_start: 180
            angle_end: 360
            pos: self.pos[0] - self.size[1] / 2, self.pos[1]
            size: self.size[1], self.size[1]
        Ellipse:
            angle_start: 360
            angle_end: 540
            pos: self.size[0] + self.pos[0] - self.size[1]/2.0, self.pos[1]
            size: self.size[1], self.size[1]
        Rectangle:
            pos: self.pos
            size: self.size
        Color:
            rgba: self.line_color
        Line:
            points: self.pos[0] , self.pos[1], self.pos[0] + self.size[0], self.pos[1]
        Line:
            points: self.pos[0], self.pos[1] + self.size[1], self.pos[0] + self.size[0], self.pos[1] + self.size[1]
        Line:
            ellipse: self.pos[0] - self.size[1] / 2, self.pos[1], self.size[1], self.size[1], 180, 360
        Line:
            ellipse: self.size[0] + self.pos[0] - self.size[1] / 2.0, self.pos[1], self.size[1], self.size[1], 360, 540
        # Texture of left Icon.
        Color:
            rgba: self.icon_left_color
        Rectangle:
            texture: self._lbl_icon_left.texture
            size:
                self._lbl_icon_left.texture_size if self.icon_left \
                else (0, 0)
            pos:
                self.x, \
                self.center[1] - self._lbl_icon_right.texture_size[1] / 2
        # Texture of right Icon.
        Color:
            rgba: self.icon_right_color
        Rectangle:
            texture: self._lbl_icon_right.texture
            size:
                self._lbl_icon_right.texture_size if self.icon_right \
                else (0, 0)
            pos:
                (self.width + self.x) - (self._lbl_icon_right.texture_size[1]), \
                self.center[1] - self._lbl_icon_right.texture_size[1] / 2
        Color:
            rgba:
                root.theme_cls.disabled_hint_text_color if not self.focus \
                else root.foreground_color