import { Metrics, DarkPalette } from "theme.slint";
import { Panel } from "widgets/panel.slint";
import { HorizontalBox, VerticalBox } from "widgets/layout.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 {
        j-alignment: start;
        title: @tr("Favourites");
        j-elevation: 2;

        Panel {
            title: "Group Name";
            title-alignment: center;
            j-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 {
            title: "Group Name";
            title-alignment: center;
            j-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 {
        title: @tr("Hierarchy");
        j-elevation: 2;
        vertical-stretch: 1;

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

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

            HorizontalBox {
                j-padding: 0px;

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

            HorizontalBox {
                width: Metrics.size-md;
                j-elevation: 3;

                Rectangle { }
            }

            HorizontalBox {
                width: Metrics.size-md;
                j-elevation: 3;

                Rectangle { }
            }
        }

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