import { Metrics } from "theme.slint";
import { Panel } from "widgets/panel.slint";

export component ObjectToolPanel inherits Rectangle {
    width: 280px;
    border-color: black;
    border-width: 1px;

    VerticalLayout {
        padding: Metrics.padding-md;
        spacing: Metrics.spacing-md;

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

        Panel {
            title: @tr("Favourites");

            Panel {
                title: "Group Name";
                title-alignment: center;
                content-padding: 0px;
                content-spacing: 0px;
                HorizontalLayout {
                    height: Metrics.size-md;
                    padding-left: Metrics.padding-md;
                    padding-right: Metrics.padding-md;
                    Text {
                        font-size: Metrics.font-md;
                        text: "Object Name";
                        vertical-alignment: center;
                    }
                }

                HorizontalLayout {
                    height: Metrics.size-md;
                    padding-left: Metrics.padding-md;
                    padding-right: Metrics.padding-md;
                    Text {
                        font-size: Metrics.font-md;
                        text: "Object Name";
                        vertical-alignment: center;
                    }
                }

                HorizontalLayout {
                    height: Metrics.size-md;
                    padding-left: Metrics.padding-md;
                    padding-right: Metrics.padding-md;
                    Text {
                        font-size: Metrics.font-md;
                        text: "Object Name";
                        vertical-alignment: center;
                    }
                }
            }

            Panel {
                title: "Group Name";
                title-alignment: center;
                content-padding: 0px;
                content-spacing: 0px;
                HorizontalLayout {
                    height: Metrics.size-md;
                    padding-left: Metrics.padding-md;
                    padding-right: Metrics.padding-md;
                    Text {
                        font-size: Metrics.font-md;
                        text: "Object Name";
                        vertical-alignment: center;
                    }
                }

                HorizontalLayout {
                    height: Metrics.size-md;
                    padding-left: Metrics.padding-md;
                    padding-right: Metrics.padding-md;
                    Text {
                        font-size: Metrics.font-md;
                        text: "Object Name";
                        vertical-alignment: center;
                    }
                }

                HorizontalLayout {
                    height: Metrics.size-md;
                    padding-left: Metrics.padding-md;
                    padding-right: Metrics.padding-md;
                    Text {
                        font-size: Metrics.font-md;
                        text: "Object Name";
                        vertical-alignment: center;
                    }
                }
            }
        }

        Panel {
            title: @tr("Hierarchy");
            HorizontalLayout {
                spacing: Metrics.spacing-md;
                height: Metrics.size-md;
                Text {
                    font-size: Metrics.font-md;
                    vertical-alignment: center;
                    text: @tr("Name:");
                }

                Rectangle {
                    border-color: black;
                    border-width: 1px;
                    border-radius: Metrics.radius-md;

                    Text {
                        font-size: Metrics.font-md;
                        vertical-alignment: center;
                        horizontal-alignment: left;
                        text: "VicHutch (-514)";
                    }
                }

                Rectangle {
                    border-color: black;
                    border-width: 1px;
                    border-radius: Metrics.radius-md;

                    width: Metrics.size-md;
                }

                Rectangle {
                    border-color: black;
                    border-width: 1px;
                    border-radius: Metrics.radius-md;

                    width: Metrics.size-md;
                }
            }

            Rectangle {
                border-color: black;
                border-width: 1px;
                border-radius: Metrics.radius-md;
                clip: true;

                Text {
                    font-size: Metrics.font-lg;
                    text: "INSERT TREE VIEW HERE";
                    vertical-alignment: center;
                    horizontal-alignment: center;
                }
            }
        }
    }
}