import { Metrics, DarkPalette } from "theme.slint";
import { Box, HorizontalBox, VerticalBox, Panel } from "widgets/components.slint";

export component ObjectToolPanel inherits VerticalBox {
    width: 280px;

    Text {
        height: Metrics.size-md;
        color: DarkPalette.text[4];
        font-size: Metrics.font-lg;
        text: @tr("Object Tool");
        vertical-alignment: center;
    }

    Panel {
        p-alignment: start;
        p-title: @tr("Favourites");
        p-elevation: 2;

        Panel {
            p-title: "Group Name";
            p-title-alignment: center;
            p-spacing: 0px;

            Text {
                height: Metrics.size-md;
                color: DarkPalette.text[4];
                font-size: Metrics.font-md;
                text: "Object Name";
                vertical-alignment: center;
            }

            Text {
                height: Metrics.size-md;
                color: DarkPalette.text[4];
                font-size: Metrics.font-md;
                text: "Object Name";
                vertical-alignment: center;
            }

            Text {
                height: Metrics.size-md;
                color: DarkPalette.text[4];
                font-size: Metrics.font-md;
                text: "Object Name";
                vertical-alignment: center;
            }
        }

        Panel {
            p-title: "Group Name";
            p-title-alignment: center;
            p-spacing: 0px;

            Text {
                height: Metrics.size-md;
                color: DarkPalette.text[4];
                font-size: Metrics.font-md;
                text: "Object Name";
                vertical-alignment: center;
            }

            Text {
                height: Metrics.size-md;
                color: DarkPalette.text[4];
                font-size: Metrics.font-md;
                text: "Object Name";
                vertical-alignment: center;
            }

            Text {
                height: Metrics.size-md;
                color: DarkPalette.text[4];
                font-size: Metrics.font-md;
                text: "Object Name";
                vertical-alignment: center;
            }
        }
    }

    Panel {
        p-title: @tr("Hierarchy");
        p-elevation: 2;
        vertical-stretch: 1;

        HorizontalBox {
            p-elevation: 2;
            p-padding: 0px;
            p-spacing: Metrics.spacing-md;
            height: Metrics.size-md;

            Text {
                color: DarkPalette.text[4];
                font-size: Metrics.font-md;
                vertical-alignment: center;
                text: @tr("Name:");
            }

            Box {
                p-padding: 0px;

                Text {
                    color: DarkPalette.text[4];
                    font-size: Metrics.font-md;
                    vertical-alignment: center;
                    horizontal-alignment: center;
                    text: "VicHutch (-514)";
                }
            }

            Box {
                width: Metrics.size-md;
                p-elevation: 3;

                Rectangle { }
            }

            Box {
                width: Metrics.size-md;
                p-elevation: 3;

                Rectangle { }
            }
        }

        Box {
            Text {
                color: DarkPalette.text[4];
                font-size: Metrics.font-lg;
                text: "INSERT TREE VIEW HERE";
                vertical-alignment: center;
                horizontal-alignment: center;
            }
        }
    }
}