use crate::makepad_widgets::*;

live_design! {
    use link::widgets::*
    use link::theme::*
    use link::shaders::*

    use makepad_example_ironfish::sequencer::Sequencer;
    use makepad_audio_widgets::display_audio::DisplayAudio;
    use makepad_audio_widgets::piano::Piano;

    SPACING_OS = 40.0;
    SPACING_CONTROLS = 7.5;
    SPACING_BASE_PADDING = 6.0;

    SSPACING_0 = 0.0
    SSPACING_1 = 4.0
    SSPACING_2 = (SSPACING_1 * 2)
    SSPACING_3 = (SSPACING_1 * 3)
    SSPACING_4 = (SSPACING_1 * 4)

    SPACING_0 = {top: (SSPACING_0), right: (SSPACING_0), bottom: (SSPACING_0), left: (SSPACING_0)}
    SPACING_1 = {top: (SSPACING_1), right: (SSPACING_1), bottom: (SSPACING_1), left: (SSPACING_1)}
    SPACING_2 = {top: (SSPACING_2), right: (SSPACING_2), bottom: (SSPACING_2), left: (SSPACING_2)}
    SPACING_3 = {top: (SSPACING_3), right: (SSPACING_3), bottom: (SSPACING_3), left: (SSPACING_3)}
    SPACING_4 = {top: (SSPACING_4), right: (SSPACING_4), bottom: (SSPACING_4), left: (SSPACING_4)}

    COLOR_CLEAR = #x3;

    COLOR_PLAYARROW_INNER = #xFFFDDDFF;

    COLOR_DOWN_OFF = #x00000000;
    COLOR_DOWN_1 = #x00000022;
    COLOR_DOWN_2 = #x00000044;
    COLOR_DOWN_3 = #x00000066;
    COLOR_DOWN_4 = #x00000088;
    COLOR_DOWN_5 = #x000000AA;
    COLOR_DOWN_FULL = #x000000FF;

    COLOR_UP_OFF = #xFFFFFF00;
    COLOR_UP_2 = #xFFFFFF11;
    COLOR_UP_3 = #xFFFFFF22;
    COLOR_UP_4 = #xFFFFFF33;
    COLOR_UP_5 = #xFFFFFF44;
    COLOR_UP_6 = #xFFFFFF66;
    COLOR_UP_7 = #xFFFFFF88;
    COLOR_UP_8 = #xFFFFFFCC;
    COLOR_UP_FULL = #xFFFFFFFF;

    GRADIENT_A = #x08221D;
    GRADIENT_B = #x3F3769;

    FONT_SIZE_H1 = 15.0;
    FONT_SIZE_H2 = 12.0;
    FONT_SIZE_H3 = 9.0;

    H2_TEXT_BOLD = {
        font_size: (FONT_SIZE_H2),
        font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-SemiBold.ttf")}
    }

    H2_TEXT_REGULAR = {
        font_size: (FONT_SIZE_H2),
        font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-Text.ttf")}
    }

    H3_TEXT_REGULAR = {
        font_size: (FONT_SIZE_H3),
        font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-Text.ttf")}
    }

    ICO_ARP = dep("crate://self/resources/icons/Icon_Arp.svg")
    ICO_BROWSE = dep("crate://self/resources/icons/Icon_Browse.svg")
    ICO_DOWN = dep("crate://self/resources/icons/Icon_Down.svg")
    ICO_FAV = dep("crate://self/resources/icons/Icon_Favorite.svg")
    ICO_FILTER_BP = dep("crate://self/resources/icons/Icon_Filters_BP.svg")
    ICO_FILTER_BR = dep("crate://self/resources/icons/Icon_Filters_BR.svg")
    ICO_FILTER_HP = dep("crate://self/resources/icons/Icon_Filters_HP.svg")
    ICO_LIVEPLAY = dep("crate://self/resources/icons/Icon_LivePlaying.svg")
    ICO_NEXT = dep("crate://self/resources/icons/Icon_Next.svg")
    ICO_OSC_HARMONIC = dep("crate://self/resources/icons/Icon_OSC_Harmonic.svg")
    ICO_OSC_SAW = dep("crate://self/resources/icons/Icon_OSC_Saw.svg")
    ICO_OSC_SINE = dep("crate://self/resources/icons/Icon_OSC_Sine.svg")
    ICO_OSC_SUPERSAW = dep("crate://self/resources/icons/Icon_OSC_Supersaw.svg")
    ICO_OSC_TRI = dep("crate://self/resources/icons/Icon_OSC_Tri.svg")
    ICO_PANIC = dep("crate://self/resources/icons/Icon_Panic.svg")
    ICO_PLAT_MOBILE = dep("crate://self/resources/icons/Icon_Platform_Mobile.svg")
    ICO_PLAT_DESKTOP = dep("crate://self/resources/icons/Icon_Platform_Desktop.svg")
    ICO_PLAY = dep("crate://self/resources/icons/Icon_Play.svg")
    ICO_PRESET = dep("crate://self/resources/icons/Icon_Presets.svg")
    ICO_PREV = dep("crate://self/resources/icons/Icon_Prev.svg")
    ICO_REDO = dep("crate://self/resources/icons/Icon_Redo.svg")
    ICO_SAVE = dep("crate://self/resources/icons/Icon_Save.svg")
    ICO_SEARCH = dep("crate://self/resources/icons/Icon_Search.svg")
    ICO_SEQ_SWEEP = dep("crate://self/resources/icons/Icon_Seq_Sweep.svg")
    ICO_SEQ = dep("crate://self/resources/icons/Icon_Seq.svg")
    ICO_SETTINGS = dep("crate://self/resources/icons/Icon_Settings.svg")
    ICO_SHARE = dep("crate://self/resources/icons/Icon_Share.svg")
    ICO_UP = dep("crate://self/resources/icons/Icon_Up.svg")


    // WIDGETS

    DividerX = <View> {
        width: Fit, height: Fill, margin: {top: 2.5, right: 1.0, bottom: 2.5, left: 1.0}
        flow: Right
        <RoundedView> {
            width: 4.0, height: Fill
            draw_bg: {color: (COLOR_UP_2)}
        }
    }

    DividerY = <View> {
        width: Fill, height: Fit, margin: {top: (SPACING_BASE_PADDING), right: (SPACING_BASE_PADDING), bottom: (SPACING_BASE_PADDING), left: (SPACING_BASE_PADDING)}
        flow: Down
        <RoundedView> {
            width: Fill, height: 1.0
            draw_bg: {color: (COLOR_DOWN_5)}
        }
    }

    FillerX = <View> {
        width: Fill, height: Fit
    }

    FillerY = <RoundedView> {
        width: Fit, height: 10
        draw_bg: {color: #f00}
    }

    ElementBox = <View> {
        width: Fill, height: Fit
        flow: Down, padding: {left: (SPACING_CONTROLS), top: (SPACING_CONTROLS), bottom: (SPACING_CONTROLS), right: (SPACING_CONTROLS)}
        spacing: (SPACING_CONTROLS)
    }

    FishPanelContainer = <View> {
        flow: Down
        width: Fill, height: Fit
    }

    FishTab = <RadioButton> {
        height: Fill, width: Fit
        align: {x: 0.0, y: 0.5}
        draw_radio: {
            radio_type: Tab,
            color_inactive: (COLOR_UP_OFF),
        }
        draw_text: {
            color: (COLOR_UP_6),
            color_active: (COLOR_UP_FULL),
            color_hover: (COLOR_UP_6),
            text_style: <H3_TEXT_REGULAR> {}
        }
    }

    FishDropDown = <DropDown> {
        width: Fit
        padding: {top: (SPACING_BASE_PADDING), right: 18.0, bottom: (SPACING_BASE_PADDING), left: (SPACING_BASE_PADDING)}

        draw_text: {
            text_style: <H2_TEXT_BOLD> {},
            fn get_color(self) -> vec4 {
                return mix(
                    mix(
                        (COLOR_UP_6),
                        (COLOR_UP_6),
                        self.focus
                    ),
                    (COLOR_UP_6),
                    self.pressed
                )
            }
        }

        popup_menu: {
            menu_item: {
                indent_width: 10.0
                width: Fit, height: Fit

                    padding: {left: 15, top: 5, bottom: 5, right: 15
                }
            }
        }
        draw_bg: {
            fn get_bg(self, inout sdf: Sdf2d) {
                sdf.box(
                    1,
                    1,
                    self.rect_size.x - 2,
                    self.rect_size.y - 2,
                    3
                )
                sdf.stroke_keep(
                    mix((COLOR_UP_OFF), (COLOR_UP_OFF), pow(self.pos.y, .25)),
                    1.
                );
                sdf.fill((COLOR_UP_OFF));
            }
        }
    }

    FishButton = <Button> {

            align: {x: 0.5, y: 0.5
            padding: 10
        }

        draw_text: {
            text_style: <H2_TEXT_BOLD> {}
            fn get_color(self) -> vec4 {
                return mix((COLOR_UP_6), (COLOR_UP_6), self.pressed)
            }
        }

        draw_bg: {
            // instance pressed: 0.0

            fn pixel(self) -> vec4 {
                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
                sdf.box(
                    1.,
                    1.,
                    self.rect_size.x - 2.0,
                    self.rect_size.y - 2.0,
                    2.0
                )

                sdf.fill(
                    mix(
                        (COLOR_UP_OFF),
                        (COLOR_UP_3),
                        self.pressed
                    )
                );

                return sdf.result
            }
        }

    }

    IconLabelButton = <Button> {
        draw_icon: {
            svg_file: (ICO_REDO)
            fn get_color(self) -> vec4 {
                return mix(
                    mix(
                        (COLOR_UP_6),
                        (COLOR_UP_7),
                        self.hover
                    ),
                    (COLOR_UP_3),
                    self.pressed
                )
            }
        }
         align: {x: 0.5, y: 0.5 }
        icon_walk:{margin:{left:10}, width:16,height:Fit}
        text: "Click"
        draw_bg: {
            fn pixel(self) -> vec4 {
                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
                sdf.box(
                    1.,
                    1.,
                    self.rect_size.x - 2.0,
                    self.rect_size.y - 2.0,
                    2.0
                )

                sdf.fill((COLOR_UP_OFF));

                return sdf.result
            }
        }
    }

    //     draw_icon:{
    //         // instance hover: 0.0
    //         // instance pressed: 0.0
    //         path:"M7399.39,1614.16C7357.53,1615.77 7324.04,1650.26 7324.04,1692.51C7324.04,1702.28 7316.11,1710.22 7306.33,1710.22C7296.56,1710.22 7288.62,1702.28 7288.62,1692.51C7288.62,1630.8 7337.85,1580.49 7399.14,1578.74L7389.04,1569.44C7381,1562.04 7380.49,1549.51 7387.88,1541.47C7395.28,1533.44 7407.81,1532.92 7415.85,1540.32L7461.76,1582.58C7465.88,1586.37 7468.2,1591.73 7468.15,1597.32C7468.1,1602.91 7465.68,1608.23 7461.5,1611.94L7415.59,1652.71C7407.42,1659.97 7394.9,1659.23 7387.65,1651.06C7380.39,1642.89 7381.14,1630.37 7389.3,1623.12L7399.39,1614.16Z",
    //         // fn get_color(self) -> vec4 {
    //         //     return mix( #ff0, #ff0, self.pressed)
    //         // }
    //         // fn get_color(self) -> vec4 {
    //         //     return mix(#f00, #00f, self.pressed)
    //         // }
    //     }
    // }

    IconButton = <Button> {
        draw_icon: {
            svg_file: (ICO_REDO)
            fn get_color(self) -> vec4 {
                return mix(
                    mix(
                        (COLOR_UP_6),
                        (COLOR_UP_7),
                        self.hover
                    ),
                    (COLOR_UP_3),
                    self.pressed
                )
            }
        }
        icon_walk: {margin: {left: 0.0}, width: 16, height: Fit}
        text: ""
        draw_bg: {
            fn pixel(self) -> vec4 {
                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
                sdf.box(
                    1.,
                    1.,
                    self.rect_size.x - 2.0,
                    self.rect_size.y - 2.0,
                    2.0
                )

                sdf.fill((COLOR_UP_OFF));

                return sdf.result
            }
        }
    }


    FishSlider = <Slider> {

            height: 36,

        text: "Change Me"
        label_text: {text_style: <H2_TEXT_BOLD> {}, color: (COLOR_UP_6)}
        text_input: {
            // cursor_margin_bottom: 3.0,
            // cursor_margin_top: 4.0,
            // select_pad_edges: 3.0
            // cursor_size: 2.0,
            empty_message: "0",
            input_mode: Decimal,
            draw_bg: {
                shape: None
                color: (COLOR_UP_OFF);
                radius: 2.0
            },
        }
        draw_bg: {
            instance line_color: (COLOR_UP_4)
            instance bipolar: 0.0
            fn pixel(self) -> vec4 {
                let sdf = Sdf2d::viewport(self.pos * self.rect_size)
                let top = 25.0;

                let in_side = 5.0;
                let x_offset = 5.0

                sdf.move_to(mix(in_side + x_offset, self.rect_size.x, self.bipolar), top);

                sdf.box(in_side, top - 5, self.rect_size.x - 2 - 2 * in_side, 10, 2) // ridge
                sdf.fill(mix((COLOR_DOWN_1), (COLOR_DOWN_2), self.drag)); // ridge color

                let fill_x = self.slide_pos * (self.rect_size.x - in_side * 2 - 9) + x_offset;
                sdf.line_to(fill_x + in_side, top);

                sdf.stroke_keep(mix((COLOR_UP_OFF), self.line_color, self.drag), 3.0);
                sdf.stroke(mix(self.line_color, (COLOR_UP_4), self.drag), 2.0)

                return sdf.result
            }
        }
    }

    TextSlider = <ElementBox> {
        slider = <FishSlider> {
            draw_bg: {
                instance line_color: (COLOR_UP_4)
                instance bipolar: 0.0
                fn pixel(self) -> vec4 {
                    let nub_size = 3

                    let sdf = Sdf2d::viewport(self.pos * self.rect_size)
                    let top = 25.0;

                    let in_side = 5.0;
                    let x_offset = 5.0

                    sdf.move_to(mix(in_side + x_offset, self.rect_size.x, self.bipolar), top);

                    return sdf.result
                }
            }
        }
    }

    InstrumentSlider = <ElementBox> {
        slider = <FishSlider> {
            draw_bg: {bipolar: 0.0}
        }
    }

    InstrumentBipolarSlider = <ElementBox> {
        slider = <FishSlider> {
            draw_bg: {bipolar: 1.0}
        }
    }

    InstrumentCheckbox = <ElementBox> {
        checkbox = <CheckBox> {
            padding: {top: (SPACING_CONTROLS), right: (SPACING_CONTROLS), bottom: (SPACING_CONTROLS), left: (SPACING_CONTROLS)}
            text: "CutOff1"
            draw_bg: {
                fn pixel(self) -> vec4 {
                    let sdf = Sdf2d::viewport(self.pos * self.rect_size)
                    let left = 3;
                    let sz = 7.0;
                    let c = vec2(left + sz, self.rect_size.y * 0.5);
                    sdf.box(left, c.y - sz, sz * 2.0, sz * 2.2, 1.5); // rounding = 3rd value
                    sdf.fill_keep(#f00)
                    sdf.stroke(mix((COLOR_DOWN_3), (COLOR_UP_FULL), pow(self.pos.y, 3.0)), 1.0) // outline

                    let szs = sz * 0.5;
                    let dx = 1.0;
                    sdf.move_to(left + 4.0, c.y);
                    sdf.line_to(c.x, c.y + szs);
                    sdf.line_to(c.x + szs, c.y - szs);
                    sdf.stroke(mix((COLOR_UP_OFF), (COLOR_UP_6), self.active), 1.25); // CHECKMARK
                    return sdf.result
                }
            }
            draw_text: {
                text_style: <H2_TEXT_BOLD> {},
                color: (COLOR_UP_6)
            }
        }
    }

    InstrumentDropdown = <ElementBox> {
        align: {y: 0.5 padding: 0, flow: Right}
        label = <Label> {
            width: Fit
            draw_text: {
                color: (COLOR_UP_6)
                text_style: <H2_TEXT_BOLD> {},
            }
        }
        dropdown = <FishDropDown> {
            margin: {left: (SPACING_CONTROLS), right: (SPACING_CONTROLS)}
        }
    }

    PlayPause = <InstrumentCheckbox> {
        width: Fit, height: Fit, margin: {top: 10, right: 0, bottom: 0, left: 0}
        align: {x: 0.0, y: 0.5}
        draw_bg: {color: (COLOR_UP_OFF)}
        checkbox = {
            width: 20, height: 20
            text: ""
            draw_bg: {
                fn pixel(self) -> vec4 {
                    let sdf = Sdf2d::viewport(self.pos * self.rect_size)
                    let left = 3;
                    let sz = 15.0;
                    let c = vec2(left + sz, sz);
                    // let c = vec2(left + sz, self.rect_size.y);

                    sdf.move_to(0.0, 0.0);
                    sdf.line_to(c.x * 0.75, c.y * 0.5);
                    sdf.line_to(0.0, c.y);
                    sdf.close_path();
                    sdf.fill_keep(mix((COLOR_UP_5), (COLOR_UP_FULL), self.active))
                    sdf.stroke_keep(
                        mix(
                            mix((COLOR_UP_6), (COLOR_UP_2), pow(self.pos.y, 0.5)),
                            (COLOR_UP_7),
                            self.active
                        ),
                        1.
                    )
                    return sdf.result
                }
            }
        }
    }

    FishToggle = <ElementBox> {
        padding: <SPACING_0> {}
        checkbox = <CheckBox> {
            padding: {top: (SSPACING_0), right: (SSPACING_2), bottom: (SSPACING_0), left: 23}
            text: "CutOff1"
            label_walk: {margin: {left: 45.0, top: 8, bottom: 8, right: 10}}
            animator: {
                active = {
                    default: off
                    off = {
                        from: {all: Forward {duration: 0.1}}
                        apply: {draw_bg: {active: 0.0}}
                    }
                    on = {
                        cursor: Arrow,
                        from: {all: Forward {duration: 0.1}}
                        apply: {draw_bg: {active: 1.0}}
                    }
                }
            }
            draw_bg: {
                instance border_width: 1.0
                instance border_color: #x06
                instance border_color2: #xFFFFFF0A
                size: 8.5;
                fn pixel(self) -> vec4 {
                    let sdf = Sdf2d::viewport(self.pos * self.rect_size)
                    let sz = self.size;
                    let left = sz + 1.;
                    let c = vec2(left + sz, self.rect_size.y * 0.5);
                    sdf.box(left, c.y - sz, sz * 3.0, sz * 2.0, 0.5 * sz);

                    sdf.stroke_keep((COLOR_UP_3), 1.25)

                    sdf.fill((COLOR_UP_OFF))
                    let isz = sz * 0.65;
                    sdf.circle(left + sz + self.active * sz, c.y - 0.5, isz);
                    sdf.circle(left + sz + self.active * sz, c.y - 0.5, 0.425 * isz);
                    sdf.subtract();
                    sdf.circle(left + sz + self.active * sz, c.y - 0.5, isz);
                    sdf.blend(self.active)
                    sdf.fill(#xFFF8);
                    return sdf.result
                }
            }
            draw_text: {
                text_style: <H2_TEXT_BOLD> {},
                color: (COLOR_UP_5)
            }
        }
    }

    PresetFavorite = <CheckBox> {
        draw_bg: {
            fn pixel(self) -> vec4 {
                let sdf = Sdf2d::viewport(self.pos * self.rect_size)

                let left = 1;
                let sz = self.rect_size.x / 2;
                let c = vec2(sz, sz);

                let csz = 4.0;
                sdf.circle(csz, csz, csz);
                sdf.circle(csz * 3, csz, csz);
                sdf.union();

                let squeeze = sz * 0.025;
                let top_offset = 0.6;
                // let top_offset = 0.6;
                sdf.move_to(c.x - sz + squeeze + 1.0, c.y - (sz * top_offset));
                sdf.line_to(c.x - sz * 0.5, c.y - (sz * 0.8));
                sdf.line_to(c.x - squeeze, c.y - (sz * top_offset));
                sdf.line_to(c.x * 0.5, c.y);
                sdf.close_path();

                sdf.fill_keep(mix(#141414, #888, self.active))

                return sdf.result
            }
        }
        draw_text: {
            text_style: <H2_TEXT_BOLD> {},
            color: (COLOR_UP_6)
        }
    }

    SequencerControls = <View> {
        flow: Down, padding: 0, spacing: 0.0, align: {x: 0.0, y: 0.5}
        width: Fill, height: Fit, margin: {top: 0.0, right: (SPACING_OS), bottom: 0.0, left: (SPACING_OS)}

        <View> {
            width: Fill, height: Fit, margin: 0.0
            align: {x: 0.0, y: 0.5}
            spacing: (SPACING_CONTROLS),
            padding: 0.0

            playpause = <PlayPause> {}

            speed = <TextSlider> {
                width: 110, height: 35, margin: 0.0
                draw_bg: {color: (COLOR_UP_OFF)}
                slider = {
                    min: 0.0
                    max: 240.0
                    text: "BPM"
                }
            }

            <FillerX> {}

            <Image> {
                source: dep("crate://self/resources/tinrs_mobile.png"),
                width: (178 * 0.175), height: (121 * 0.175), margin: { top: 0.0, right: 0.0, bottom: 0.0, left: 10.0  }
            }

            share = <IconButton> {
                draw_icon: {
                    svg_file: (ICO_SHARE),
                }
                icon_walk: { height: 14.0, width: Fit }
                margin: {top: 5.0, right: -7.5, bottom: 5.0, left: 0.0 }
                padding: 10.0
            }
            platformtoggle = <IconButton> {
                draw_icon: { svg_file: (ICO_PLAT_DESKTOP) }
                margin: { top: 0.0, right: -5, bottom: 0, left: 0 }
                padding: 10.0
            }

        }

        <View> {
            width: Fill, height: Fit, margin: 0.0
            align: {x: 0.0, y: 0.5}
            spacing: 0.0,
            padding: 0.0

            arp = <FishToggle> {
                margin: 0.0
                padding: <SPACING_0> {}
                checkbox = {
                    text: "Arp"
                    padding: {top: (SSPACING_0), right: (SSPACING_1), bottom: (SSPACING_0), left: (SSPACING_0)}
                    margin: <SPACING_0> {}
                }
                width: Fit, height: Fit, margin: <SPACING_0> {}
            }

            rootnote = <InstrumentDropdown> {
                height: Fit, width: Fit, margin: 0
                align: {x: 0.0, y: 0.5 padding: 0}
                draw_bg: {color: (COLOR_UP_OFF)}
                dropdown = {
                    margin: 5
                    labels: ["A", "A#", "B", "C", "C#", "D", "D#", "E", "F", "F#", "G", "G#"]
                    values: [A, Asharp, B, C, Csharp, D, Dsharp, E, F, Fsharp, G, Gsharp]
                }
            }

            scaletype = <InstrumentDropdown> {
                height: Fit, width: 90.0
                align: {x: 0.0, y: 0.5}
                draw_bg: {color: (COLOR_UP_OFF)}
                dropdown = {
                    margin: 5
                    labels: ["Minor", "Major", "Dorian", "Pentatonic"]
                    values: [Minor, Major, Dorian, Pentatonic]
                }
            }

            <FillerX> {}

            grid_up = <IconButton> { draw_icon: { svg_file: (ICO_UP) }, icon_walk: {height: 7.5, width: Fit},  margin: 0.0  padding: 10.0 }
            grid_down = <IconButton> { draw_icon: { svg_file: (ICO_DOWN) }, icon_walk: {height: 7.5, width: Fit},  margin: 0.0  padding: 10.0 }
            clear_grid = <IconButton> { draw_icon: { svg_file: (ICO_SEQ_SWEEP) },  margin: { top: 0.0, right: -5, bottom: 0.0, left: 0.0  }, padding: 10.0  }

        }

    }

    SequencerPanel = <View> {
        width: Fill, height: Fill, margin: 0.0
        flow: Down, spacing: 0.0

        sequencer = <Sequencer> {
            width: Fill, height: Fill, margin: {top: 0, right: 0, bottom: 10, left: 0}
            //padding: 0.0

            button: {
                draw_button: {
                    fn pixel(self) -> vec4 {
                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
                        sdf.box(1, 1, self.rect_size.x - 5, self.rect_size.y - 5, 2);
                        sdf.glow_keep(
                            mix(
                                (COLOR_UP_OFF),
                                (COLOR_UP_5),
                                self.active
                            ),
                            1.5
                        );
                        // sdf.glow_keep(
                        //     mix(
                        //         (COLOR_UP_OFF),
                        //         (COLOR_UP_3),
                        //         self.active
                        //     ),
                        //     1.5
                        // );
                        // sdf.glow_keep(
                        //     mix(
                        //         (COLOR_UP_OFF),
                        //         (COLOR_UP_2),
                        //         self.active
                        //     ),
                        //     2.0
                        // );
                        sdf.fill(
                            mix(
                                (COLOR_UP_2),
                                (COLOR_UP_5),
                                self.active
                            )
                        )
                        return sdf.result
                    }

                }
            }
        }
    }

    ModeSequencer = <View> {
        width: Fill, height: Fill, margin: {top: (SPACING_OS / 2), right: (SPACING_OS), bottom: (SPACING_OS / 2), left: (SPACING_OS)}
        flow: Down

        <SequencerPanel> {height: Fill, width: Fill}

        PresetNavigation = <View> {
            width: Fill, height: Fit
            flow: Right, align: {x: 0.0, y: 0.5}

            <IconButton> {
                draw_icon: {svg_file: (ICO_PREV)}
                icon_walk: {width: 10, height: Fit}
            }

            <View> {}

            <View> {
                width: Fit, height: Fit
                flow: Right, align: {x: 0.0, y: 0.5}

                label = <Label> {
                    draw_text: {
                        text_style: {font_size: (FONT_SIZE_H1)},
                        color: (COLOR_UP_6)
                    }
                    text: "Preset Name"
                }
            }

            <View> {}

            <IconButton> {
                draw_icon: {svg_file: (ICO_NEXT)}
                icon_walk: {width: 10, height: Fit}
            }
        }
    }

    ChordButtonA = <Button> {
        width: Fill, height: Fill, margin: 2.5
        align: {x: 0.5, y: 0.5}
        padding: 0.0

        draw_text: {
            text_style: <H2_TEXT_BOLD> {}
            fn get_color(self) -> vec4 {
                return mix((COLOR_UP_6), (COLOR_UP_6), self.pressed)
            }
        }

        draw_bg: {
            instance pressed: 0.0
            instance color_default: 0.0
            instance COLOR_UP_3: 0.0

            fn pixel(self) -> vec4 {
                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
                sdf.box(
                    1.,
                    1.,
                    self.rect_size.x - 2.0,
                    self.rect_size.y - 2.0,
                    2.0
                )

                sdf.fill(
                    mix(
                        self.color_default,
                        self.COLOR_UP_3,
                        self.pressed
                    )
                );

                return sdf.result
            }

            color_default: (COLOR_UP_2),
            COLOR_UP_3: (COLOR_UP_3);
        }

    }

    ChordButtonB = <Button> {
        width: Fill, height: Fill, margin: {top: 2.5, right: 0.0, bottom: 2.5, left: 0}
        align: {x: 0.5, y: 0.5 }
        padding: 0.0
        draw_text: {
            text_style: <H2_TEXT_BOLD> {}
            fn get_color(self) -> vec4 {
                return mix((COLOR_UP_6), (COLOR_UP_6), self.pressed)
            }
        }

        draw_bg: {
            instance pressed: 0.0
            instance color_default: 0.0
            instance COLOR_UP_3: 0.0

            fn pixel(self) -> vec4 {
                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
                sdf.box(
                    1.,
                    1.,
                    self.rect_size.x - 2.0,
                    self.rect_size.y - 2.0,
                    2.0
                )

                sdf.fill(
                    mix(
                        self.color_default,
                        (COLOR_UP_2),
                        self.pressed
                    )
                );

                return sdf.result
            }

            color_default: (COLOR_UP_OFF),
            COLOR_UP_3: (COLOR_UP_3);
        }

    }

    ChordStrip = <RoundedView> {
        width: Fill, height: Fill
        flow: Right, spacing: 0.0, padding: {top: 0.0, left: 0.0, bottom: 0.0, right: 5}
        align: {x: 0.5, y: 0.5}
        draw_bg: {
            color: (COLOR_UP_2),
            radius: 2.5
        }


        label = <Label> {
            width: 40, height: Fill, margin: 5.0
            draw_text: {
                text_style: <H3_TEXT_REGULAR> {},
                color: (COLOR_UP_6)
            }
            text: "change me"
        }

        <ChordButtonA> {}
        <ChordButtonA> {}
        <ChordButtonA> {}
        <ChordButtonA> {margin: {top: 2.5, right: 5, bottom: 2.5, left: 2.5}}
        <ChordButtonB> {}
        <DividerX> {}
        <ChordButtonB> {}
        <DividerX> {}
        <ChordButtonB> {}
        <DividerX> {}
        <ChordButtonB> {}

    }

    ChordPiano = <View> {
        flow: Down, spacing: (SPACING_CONTROLS), padding: {left: (SPACING_OS), right: (SPACING_OS)}

        <ChordStrip> {label = {text: "Em"}}
        <ChordStrip> {label = {text: "Am"}}
        <ChordStrip> {label = {text: "Dm"}}
        <ChordStrip> {label = {text: "G"}}
        <ChordStrip> {label = {text: "C"}}
        <ChordStrip> {label = {text: "F"}}
        <ChordStrip> {label = {text: "Bb"}}
        <ChordStrip> {label = {text: "Bdim"}}
    }

    ModePlay = <View> {
        flow: Down, spacing: (SPACING_CONTROLS)
        width: Fill, height: Fill, margin: {top: 20}

        <ChordPiano> {}

        <View> {
            flow: Right, padding: {top: (SPACING_CONTROLS), right: (SPACING_OS), bottom: (SPACING_OS), left: (SPACING_OS)}
            spacing: 10
            width: Fill, height: Fit

            <RoundedView> {
                flow: Down
                width: Fill, height: 200
                draw_bg: {
                    color: (COLOR_UP_2),
                    radius: 5.0
                }

            }

            <View> {
                flow: Down
                width: Fill, height: Fill
                draw_bg: {color: #f00}

                crushamount = <FishSlider> {
                    text: "Crush"
                    slider = {
                        min: 0.0
                        max: 1.0
                        text: "Amount"

                    }
                }

                <FillerY> {}

                chorusmix = <FishSlider> {
                    text: "Chorus"
                    slider = {
                        min: 0.0
                        max: 1.0
                        text: "Mix"
                    }
                }

                <FillerY> {}

                delaysend = <FishSlider> {
                    text: "Delay",
                    slider = {
                        min: 0.0
                        max: 1.0
                        text: "Delay Send"
                    }
                }

                <FillerY> {}

                porta = <FishSlider> {
                    text: "Portamento",
                    slider = {
                        min: 0.0
                        max: 1.0
                        text: "Portamento"
                    }
                }

            }
        }

    }

    FishCheckbox = <CheckBox> {
        draw_bg: {
            fn pixel(self) -> vec4 {
                let sdf = Sdf2d::viewport(self.pos * self.rect_size)

                let left = 1;
                let sz = 8.0;

                let c = vec2(left + sz, self.rect_size.y * 0.5 - 2.0);

                sdf.box(left, c.y - sz, sz * 2.5, sz * 2.5, 2.0); // 3rd parameter == corner radius
                sdf.fill_keep(mix((COLOR_UP_2), (COLOR_UP_7), self.active))
                sdf.stroke(#x888, 0.0) // outline

                let szs = sz * 0.5;
                let dx = 1.0;

                let offset = 1.5;

                sdf.move_to(left + 4.0 + offset, c.y + offset);
                sdf.line_to(c.x + offset, c.y + szs + offset);
                sdf.line_to(c.x + szs + offset, c.y - szs + offset);

                sdf.stroke_keep(mix(#fff0, (COLOR_DOWN_FULL), self.active), 1.75);


                return sdf.result
            }
        }
        draw_text: {
            text_style: <H2_TEXT_BOLD> {},
            color: (COLOR_UP_6)
        }
    }
    /*
    PresetListEntry = <SwipeListEntry> {
        flow: Down, padding: {top: 0, right: 5, bottom: 2.5, left: 5 align: {x: 0.5, y: 0.5}}
         width: Fill, height: Fit, margin: 0

        center: <View> {
            flow: Down, align: {x: 0.5, y: 0.0 padding: {top: 0, right: 0, bottom: 0, left: 0}}
            width: Fill, height: Fit, margin: 0.0
            <View> {
                flow: Right, align: {x: 0.5, y: 0.0 padding: 0.0}
                 width: Fill, height: Fit, margin: {top: 2.5, right: 0, bottom: 7.5, left: 0}

                label = <Button> {
                     width: Fill, height: Fill, margin: {top: 5 }
                    align: {x: 0.0, y: 0.5 padding: { left: 5 }}
                    draw_text: {
                        fn get_color(self) -> vec4 {
                            return mix( (COLOR_UP_5), (COLOR_UP_3), self.pressed )
                        }
                        text_style: <H2_TEXT_REGULAR>{},
                    }
                    text: "Preset Name"
                    draw_bg: {
                        fn pixel(self) -> vec4 {
                            let sdf = Sdf2d::viewport(self.pos * self.rect_size);
                            return sdf.result
                        }
                    }
                }

                <RoundedView> {
                    width: Fit, height: Fit

                    align: {x: 0.0, y: 0.5}
                    // presetfavorite = <PresetFavorite> {
                    //     width: 30, height: 30, margin: {top: 15 }
                    //     text: " "
                    // }

                <IconButton> {
                    draw_icon: {
                        svg_file: (ICO_FAV),
                        fn get_color(self) -> vec4 {
                            return mix(
                                mix(
                                    (COLOR_UP_4),
                                    (COLOR_UP_6),
                                    self.hover
                                ),
                                (COLOR_UP_3),
                                self.pressed
                            )
                        }
                    },
                    icon_walk: {height: 11.0, width: Fit}
            }

                share = <IconButton> {
                    draw_icon: {
                        svg_file: (ICO_SHARE),
                        fn get_color(self) -> vec4 {
                            return mix(
                                mix(
                                    (COLOR_UP_4),
                                    (COLOR_UP_6),
                                    self.hover
                                ),
                                (COLOR_UP_3),
                                self.pressed
                            )
                        }
                    },
                    icon_walk: {height: 12.5, width: Fit}
                }

                }
            }
            <DividerY> { margin: 0.0 padding: 0.0}
        }
    }*/

    PaginationButton = <FishButton> {
        text: "1"
        width: 40, height: 40, margin: {top: 20}
        draw_text: {text_style: {font_size: (FONT_SIZE_H2)}}

        draw_bg: {
            // instance pressed: 0.0

            fn pixel(self) -> vec4 {
                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
                sdf.box(
                    1.,
                    1.,
                    self.rect_size.x - 2.0,
                    self.rect_size.y - 2.0,
                    2.0
                )

                sdf.fill(mix((COLOR_UP_2), (COLOR_UP_3), self.pressed));

                return sdf.result;
            }
        }
    }

    Pagination = <View> {
        width: Fill, height: Fit, margin: {bottom: (SPACING_OS)}
        flow: Right, align: {x: 0.5, y: 0.0 spacing: 10}

        <PaginationButton> {text: "…"}
        <PaginationButton> {text: "3"}
        <PaginationButton> {text: "4"}
        <PaginationButton> {text: "5"}
        <PaginationButton> {text: "6"}
        <PaginationButton> {text: "7"}
        <PaginationButton> {text: "…"}
    }
    /*
    PresetList = <SwipeList> {
        height: Fill
        Entry = <PresetListEntry> {}
    }
    */
    PresetListFavs = <ScrollYView> {

        width: Fill, height: Fill, margin: {top: 5.0, bottom: 5.0}
        flow: Down, align: {x: 0.5, y: 0.0}
    }

    ModePresetmanager = <RoundedView> {
        width: Fill, height: Fill
        flow: Down

        <GradientYView> {
            draw_bg: {color: (COLOR_DOWN_OFF), color2: (COLOR_DOWN_2)}
            width: Fill, height: 50
            flow: Right

            <View> {
                width: Fill, margin: {top: 0, right: (SPACING_OS), bottom: 0, left: (SPACING_OS)}
                align: {x: 0.0, y: 1.0}

                <TextInput> {
                    width: Fill, height: 50
                    align: {x: 0.0, y: 0.5}
                    text: "Search"
                    draw_text: {
                        text_style: <H2_TEXT_BOLD> {font_size: (FONT_SIZE_H1)}
                    }
                }
                filter_modes = <View> {
                    width: Fit
                    spacing: 10, align: {x: 0.0, y: 1.0}

                    tab1 = <FishTab> {
                        text: "All",
                        height: Fit, margin: 10
                        animator: {active = {default: on}},
                        draw_text: {color_active: (COLOR_UP_8)}
                    }
                    tab2 = <FishTab> {
                        text: "Favorites",
                        height: Fit, margin: 10
                        draw_text: {color_active: (COLOR_UP_8)}
                    }
                }
            }

        }
        preset_pages = <View> {
            /*preset_list = <PresetList> {}*/
            tab2_frame = <PresetListFavs> {visible: false}
        }

        // <Pagination> {}
    }

    pub AppMobile = <View> {
        design_mode: false,
        width: Fill, height: Fill
        padding: 0, align: {x: 0.0, y: 0.0}
        spacing: 0.,
        flow: Down

        <GradientYView> {
            draw_bg: {color: (GRADIENT_A), color2: (GRADIENT_B)}
            flow: Down, spacing: (SPACING_BASE_PADDING)

            os_header_placeholder = <RoundedView> {
                width: Fill, height: 50, margin: 0
                flow: Right, spacing: (SPACING_BASE_PADDING), padding: 0
                draw_bg: {color: (COLOR_DOWN_1)}
            }

            <SequencerControls> {}

            application_pages = <View> {
                margin: 0.0
                padding: 0.0

                tab1_frame = <ModeSequencer> {}
                tab2_frame = <ModePlay> {visible: false} // TODO: enable again
                tab3_frame = <ModePresetmanager> {visible: false} // TODO: enable again
            }

            mobile_menu = <RoundedView> {
                width: Fill, height: 120
                flow: Right, spacing: (SPACING_BASE_PADDING), padding: 20
                draw_bg: {color: (COLOR_DOWN_2)}

                mobile_modes = <View> {
                    tab1 = <FishTab> {
                        animator: {active = {default: on}},
                        text: "Sequencer"
                        draw_icon: {
                            svg_file: (ICO_SEQ),
                            fn get_color(self) -> vec4 {
                                return mix(
                                    (COLOR_UP_6),
                                    (COLOR_UP_FULL),
                                    self.active
                                )
                            }
                        }
                        width: Fill
                        icon_walk: {width: 27.5, height: Fit}
                        flow: Down, spacing: 5.0, align: {x: 0.5, y: 0.5}
                    }
                    tab2 = <FishTab> {
                        text: "Play",
                        draw_icon: {
                            svg_file: (ICO_LIVEPLAY),
                            fn get_color(self) -> vec4 {
                                return mix(
                                    (COLOR_UP_6),
                                    (COLOR_UP_FULL),
                                    self.active
                                )
                            }
                        }
                        width: Fill
                        icon_walk: {width: 34, height: Fit, margin: {top: 0.0, right: 0.0, bottom: 5.0, left: 0.0}}
                        flow: Down, spacing: 3.0, align: {x: 0.5, y: 0.5}
                    }
                    tab3 = <FishTab> {
                        text: "Presets",
                        draw_icon: {
                            svg_file: (ICO_PRESET),
                            fn get_color(self) -> vec4 {
                                return mix(
                                    (COLOR_UP_6),
                                    (COLOR_UP_FULL),
                                    self.active
                                )
                            }
                        }
                        width: Fill
                        icon_walk: {width: 30, height: Fit}
                        flow: Down, spacing: 5.0, align: {x: 0.5, y: 0.5}
                    }
                }
            }
        }
    }
}