use makepad_widgets::*;
live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*;
    import crate::widgets::area::Area;
    import crate::widgets::renderer::IRenderer;

    import makepad_draw::shader::std::*;
    import crate::widgets::selector_modal::SelectorItem;

    HELLO = "Hello, World!";

    Group = <RoundedView> {
        flow: Down
        spacing: 10.
        padding: 15.
        height: Fit
        width: Fill
        draw_bg: {
            instance border_width: 1.0
            instance border_color: (THEME_COLOR_U_2)
        }
    }

    Alert = <View> {
        flow:Down,
        padding: 10.
        height: Fit
        width: Fit
        draw_bg: {
            fn pixel(self) -> vec4 {
                return mix(#7,#4,self.pos.y);
            }
        }
    }

    MainView = <View> {
        width: Fill,
        height: Fill
        dock = <Dock> {
            height: Fill, width: Fill

            root = Splitter {
                axis: Horizontal,
                align: FromB(300.0),
                a: renderer_panel,
                b: controller_panel,
            }

            renderer_panel = Tab {
                name: "",
                kind: Renderer
            }

            Renderer = <RectView>{
                height: Fill,
                width: Fill,
                flow: Down,
                align: {
                    x: 0.5,
                    y: 0.5
                },
                quad = <Area> {
                    id: "Primary"
                }

            }

            controller_panel = Tab {
                name: ""
                template: StandardTab,
                kind: Controller
            }

            Controller = <RectView> {
                draw_bg: { color: (THEME_COLOR_U_1) }
                height: Fill, width: Fill
                padding: 10.,
                flow: Down,
                spacing: 15.,

                scroll_bars: <ScrollBars> {show_scroll_x: false, show_scroll_y: true}

                <H4>{ text: "Controller"}

                <Group> {
                    <Slider> {
                        width: Fill,
                        height: 30,
                        draw_slider:{
                            slider_type: Horizontal
                        },
                    }
                    <Slider> {
                        width: Fill,
                        height: 30,
                        draw_slider:{
                            slider_type: Horizontal
                        },
                    }
                    <Slider> {
                        width: Fill,
                        height: 30,
                        draw_slider:{
                            slider_type: Horizontal
                        },
                    }
                    open_modal = <Button> {
                        text: "Click me"
                        width: Fill
                    }
                    <CheckBox> {text: "Check me"}
                    <DropDown>{
                        height: 24,
                        width: Fill,
                        labels: ["ValueOne", "ValueTwo","Thrice","FourthValue","OptionE","Hexagons"],
                        values: [ ValueOne,ValueTwo,Thrice,FourthValue,OptionE,Hexagons]
                    }
                    <Slider> {
                        width: Fill,
                        height: 30,
                        draw_slider:{
                            slider_type: Horizontal
                        },
                    }

                    }

                <H4>{ text: "Input"}

                <SelectorItem> {
                    text: "Selector Item"
                }

                <Group> {

                    <ButtonGroup> {
                        spacing: 10.,
                        <Button> {text: "One"}
                        <Button> {text: "Two"}
                        <Button> {text: "Three"}
                    }
                    <TextInput> {
                        width: Fill,
                        height: Fit,
                        text: "Text Input"
                    }
                    <TextFlowBase> {
                        width: Fill,
                        height: Fit,
                        <Text> {text: "Text Flow"}
                    }



                }


            }

        }

    };

}