use makepad_widgets::*;

live_design! {
    import makepad_draw::shader::std::*;
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*;

    import crate::shared::styles::*;
    import crate::shared::clickable_view::ClickableView

    CatalogItem = <ClickableView> {
        width: Fill
        height: Fit

        show_bg: false

        container = <RoundedView> {
            width: Fill
            height: Fit
            flow: Down
            align: {x: 0.5, y: 0.0}
            spacing: 2.0

            draw_bg: {
                color: #fff,
                radius: 8.
            }

            image = <Image> {
                width: Fill, height: 166
                source: (CATALOG_FLIP_FLOPS_IMG)

                // Override to have the upper corners rounded
                draw_bg: {
                    instance radius: 8.
                    fn pixel(self) -> vec4 {
                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
                        sdf.box(
                            1,
                            1,
                            self.rect_size.x - 2.0,
                            // This calculation is to make sure the bottom part is not rounded
                            self.rect_size.y + self.radius * 2.0,
                            max(1.0, self.radius)
                        )
                        sdf.fill_keep(self.get_color())
                        sdf.stroke(#fff, 1);
                        return sdf.result
                    }
                }
            }
            info = <View> {
                width: Fill
                height: Fit
                flow: Down
                padding: 5.
                spacing: 3.

                title = <Label> {
                    width: Fill
                    height: Fit

                    text: "男士人字拖 2023"
                    draw_text: {
                        color: #000
                        text_style: <REGULAR_TEXT> {font_size: 12.0},
                    }
                }

                subtitle = <Label> {
                    width: Fill
                    height: Fit

                    text: "500+人付费"
                    draw_text: {
                        color: #888
                        text_style: <REGULAR_TEXT> {font_size: 8.0},
                    }
                }

                <View> {
                    width: 160
                    height: 40
                    flow: Overlay

                    <Image> {
                        width: Fill
                        height: Fill
                        source: (BUY_IT_BANNER_IMG)
                    }

                    <View> {
                        width: Fill
                        height: Fill
                        padding: 5.
                        flow: Down
                        spacing: 2.

                        <View> {
                            width: Fit
                            height: Fit
                            flow: Right
                            spacing: 1.
                            align: {x: 0.0, y: 1.0}

                            <Label> {
                                width: Fit
                                height: Fit
                                margin: {bottom: 2.}

                                text: "¥"
                                draw_text: {
                                    color: #fff
                                    text_style: <REGULAR_TEXT> {font_size: 10.0},
                                }
                            }
                            <Label> {
                                width: Fit
                                height: Fit

                                text: "58"
                                draw_text: {
                                    color: #fff
                                    text_style: <REGULAR_TEXT> {font_size: 14.0},
                                }
                            }
                        }
                        <Label> {
                            width: Fit
                            height: Fit

                            text: "USD 8.11"
                            draw_text: {
                                color: #fff
                                text_style: <REGULAR_TEXT> {font_size: 8.0},
                            }
                        }
                    }
                }
            }
        }
    }
    
}