#:import get_color_from_hex kivy.utils.get_color_from_hex

<Payment>:
    name: "payment"
    BoxLayout:
        ScrollView:
            bar_width:0
            do_scroll_x: False
            #scroll_y:0

            BoxLayout:
                spacing: dp(8)
                padding: dp(5)
                size_hint_y: None
                height: self.minimum_height
                orientation: "vertical"

                ProductCategoryLayout:
                    category_text: "Monthly-Subscriptions"

                    ProductLayout:
                        heading_text: "Gas (Play Billing Codelab)"
                        price_text: "$0.99"
                        source: app.image_path + "/payment/buynew1.png"
                        description_text: "Buy gasoline to ride!"
                        product_id: "SKUGASBILLING"
                    
                    ProductLayout:
                        heading_text: "Upgrade your car (Play Billing Codelab)"
                        price_text: "$1.49"
                        source: app.image_path + "/payment/buynew1.png"
                        description_text: "Buy a premium outfit for your car!"
                        product_id: "SKUUPGRADECAR"
                    
                    ProductLayout:
                        heading_text: "Month in gold status (Play Billing Codelab)"
                        price_text: "$0.99"
                        source: app.image_path + "/payment/buynew1.png"
                        description_text: "Enjoy a gold status for a month!"
                        product_id: "SKUMONTHLYGOLD"
                
                ProductCategoryLayout:
                    category_text: "One-time payment"
                    
                    ProductLayout:
                        heading_text: "Gas (Play Billing Codelab)"
                        price_text: "$0.99"
                        source: app.image_path + "/payment/buynew1.png"
                        description_text: "Buy gasoline to ride!"
                        product_id: "SKUONETIMEGAS"
                    
                ProductCategoryLayout:
                    category_text: "Annual-Subscriptions"

                    ProductLayout:
                        heading_text: "Gas (Play Billing Codelab)"
                        price_text: "$0.99"
                        source: app.image_path + "/payment/buynew1.png"
                        description_text: "Buy gasoline to ride!"
                        product_id: "SKUANNUALGAS"
                    
                    ProductLayout:
                        heading_text: "Year in gold status (Play Billing Codelab)"
                        price_text: "$10.99"
                        source: app.image_path + "/payment/buynew1.png"
                        description_text: "Enjoy a gold status for a year!"
                        product_id: "SKUANNUALGOLD"

<ProductCategoryLayout@BoxLayout>:
    size_hint_y: None
    height: self.minimum_height
    category_text:""

    orientation: "vertical"
    spacing: 2

    #category area
    Category:
        text_: root.category_text

<Category>:
    canvas:
        Color:
            rgba: 1,1,1,1
        Rectangle:
            pos: self.pos
            size: self.size
    text_: ""
    size_hint_y: None
    height: dp(30)
    Widget:
        size_hint_x: None
        width: dp(20)
    MDLabel:
        text: root.text_
        font_size: sp(15) 

<ProductLayout>:
    heading_text: ""
    price_text: ""
    source: ""
    description_text: ""

    product_id: ""

    canvas:
        Color:
            rgba: 1,1,1,1
        Rectangle:
            pos: self.pos
            size: self.size

    size_hint_y: None
    height: dp(200)
    orientation: "vertical"

    #heading area
    BoxLayout:
        size_hint_y: 0.3
        
        #text heading
        BoxLayout:
            Widget:
                size_hint_x: None
                width: dp(20)
            MDLabel:
                text: root.heading_text
                bold: True

        #price text
        BoxLayout:
            size_hint_x:.3
            MDLabel:
                text: root.price_text
                bold: True
                halign: "right"
                theme_text_color: "Custom"
                text_color: 0,0,1,1
        Widget:
            size_hint_x: None
            width: dp(20)
    
    #details area
    BoxLayout:
        size_hint_y: 0.3
        Widget:
            size_hint_x: None
            width: dp(20)

        #image area
        AnchorLayout:
            size_hint_x: None
            width: self.height
            BoxLayout:
                canvas:
                    Color:
                        rgba: 1,1,1,1
                    Ellipse:
                        size: self.size
                        pos: self.pos
                        source: root.source
        Widget:
            size_hint_x: None
            width: dp(10)

        #description text
        BoxLayout:
            #size_hint_x: 1
            MDLabel:
                text: root.description_text
                font_size: sp(15)
    
    #Button Area
    BoxLayout:
        size_hint_y: 0.4
        Widget:

        AnchorLayout:
            anchor_x: "right"
            MDRaisedButton:
                elevation_normal: 5
                text: "BUY"
                on_release:
                    #print(app)
                    app.open_payment_layout(root.product_id)
        
        Widget:
            size_hint_x: None
            width: dp(20)

<ListItemWithLabel>:
    on_release: app.initiate_purchase(self.method_name)
    recent: False
    source: ""
    method_name: ""
    right_label_text: "Recent" if self.recent else ""

    ImageLeftWidget:
        source: root.source
    
    RightLabel:
        text: root.right_label_text
        theme_text_color: "Custom"
        text_color: 0,0,0,.4
        font_size: sp(12)

<PaymentMethodLayout>:
    orientation: "vertical"
    size_hint_y: None
    height: "200dp"

    BoxLayout:
        size_hint_y: None
        height: dp(40)

        Widget:
            size_hint_x: None
            width: dp(20)
        MDLabel:
            text: "Select Payment Method"
            font_size: sp(14)
            bold: True
            theme_text_color: "Custom"
            text_color: 0,0,0,.5


    ScrollView:

        GridLayout:
            cols: 1
            size_hint_y:None
            height:self.minimum_height

            ListItemWithLabel:
                source: app.image_path + "/payment/gplay.png"
                text: "Google Play"
                method_name: "gplay"
                recent: True

            ListItemWithLabel:
                source: app.image_path + "/payment/btc.png"
                text: "BTC"
                method_name: "btc"
            
            ListItemWithLabel:
                source: app.image_path + "/payment/paypal.png"
                text: "Paypal"
                method_name: "som"
            
            ListItemWithLabel:
                source: app.image_path + "/payment/buy.png"
                text: "One more method"
                method_name: "omm"