--- Updates state and tracking resources for new instances.
function ScopeHierarchyItemButton:didUpdate(previousProps, previousState)
    if previousProps.Instance ~= self.props.Instance then
        self:UpdateInstanceState()
        self:StartTrackingInstance()
    end
end

function ScopeHierarchyItemButton:render()
    local ClassName = self.props.Instance.ClassName
    local IconPosition = ClassIconPositions[ClassName] or Vector2.new(1, 1)
    local ShouldDisplayArrow = (self.props.LayoutOrder ~= 2) or nil

    return new('ImageButton', {
        BackgroundTransparency = 1;
        ImageTransparency = 1;
        Size = self.ContainerSize;
        LayoutOrder = self.props.LayoutOrder;
        [Roact.Event.InputBegan] = self.OnInputBegin;
        [Roact.Event.InputEnded] = self.OnInputEnd;
        [Roact.Event.Activated] = self.OnClicked;
    },
    {
        Layout = new('UIListLayout', {
            [Roact.Ref] = self.LayoutRef;
            FillDirection = Enum.FillDirection.Horizontal;
            HorizontalAlignment = Enum.HorizontalAlignment.Left;
            VerticalAlignment = Enum.VerticalAlignment.Center;
            SortOrder = Enum.SortOrder.LayoutOrder;
            Padding = UDim.new(0, 5/2);
        });

        ArrowWrapper = ShouldDisplayArrow and new('Frame', {
            Size = UDim2.new(0, 38/2, 0, 38/2);
            BackgroundTransparency = 1;
            LayoutOrder = 0;
        },
        {
            Arrow = new('ImageLabel', {
                Size = UDim2.new(1, 0, 1, 0);
                BackgroundTransparency = 1;
                Image = 'rbxassetid://2244452978';
                ImageRectOffset = Vector2.new(14*3, 0) * 2;
                ImageRectSize = Vector2.new(14, 14) * 2;
                ImageTransparency = 0;
                Rotation = 90;
            });
        });

        InstanceInfo = new('Frame', {
            BackgroundTransparency = 1;
            Size = UDim2.new(0, self.state.InstanceNameLength + 28/2 + 10/2, 1, 0);
            LayoutOrder = 1;
        },
        {
            InstanceIcon = new('ImageLabel', {
                BackgroundTransparency = 1;
                Image = 'rbxassetid://2245672825';
                ImageRectOffset = (IconPosition - Vector2.new(1, 1)) * Vector2.new(16, 16);
                ImageRectSize = Vector2.new(16, 16);
                ImageTransparency = self.props.IsTarget and 0.5 or 0;
                AnchorPoint = Vector2.new(0, 0.5);
                Position = UDim2.new(0, 0, 0.5, 0);
                Size = UDim2.new(0, 28/2, 0, 28/2);
                LayoutOrder = 0;
            });
            InstanceName = new('TextLabel', {
                BackgroundTransparency = 1;
                Size = UDim2.new(0, self.state.InstanceNameLength, 0, 28/2);
                Position = UDim2.new(0, 28/2 + 10/2, 0.5, 0);
                AnchorPoint = Vector2.new(0, 0.5);
                Font = Enum.Font.SourceSans;
                TextSize = 33/2;
                Text = self.state.InstanceName;
                TextTransparency = self.props.IsTarget and 0.5 or 0;
                TextYAlignment = Enum.TextYAlignment.Center;
                TextColor3 = Color3.fromRGB(255, 255, 255);
                LayoutOrder = 1;
            },
            {
                TextShadow = new('TextLabel', {
                    BackgroundTransparency = 1;
                    Size = UDim2.new(1, 0, 1, 0);
                    Position = UDim2.new(0, 0, 0, 1);
                    Font = Enum.Font.SourceSans;
                    TextSize = 33/2;
                    Text = self.state.InstanceName;
                    TextYAlignment = Enum.TextYAlignment.Center;
                    TextColor3 = Color3.fromRGB(112, 112, 112);
                    TextStrokeColor3 = Color3.fromRGB(112, 112, 112);
                    TextTransparency = self.props.IsTarget and 1 or 0.77;
                    TextStrokeTransparency = 0.77;
                    ZIndex = 0;
                })
            });
        });

        Tooltip = new(HotkeyTooltip, {
            IsScopeParent = self.props.IsScopeParent;
            IsScope = self.props.IsScope;
            IsScopable = self.props.IsScopable;
            IsScopeLocked = self.props.IsScopeLocked;
            IsAltDown = self.props.IsAltDown;
        });
    })
end

return ScopeHierarchyItemButton