local T=Roact.PureComponent:extend(script.Name)function T.init(T)T.Size,T.SetSize=Roact.createBinding(Vector2.new())T:setState({AreOptionsVisible=false})end function T.BuildButtonList(T)local Y={}for J,I in ipairs(T.props.Options)do table.insert(Y,new("\084\101\120\116\066\117\116\116\111\110",{BackgroundTransparency=T.props.CurrentOption==I and.1 or 1;BackgroundColor3=Color3.fromRGB(0,145,255);BorderSizePixel=0,Font=Enum.Font.GothamBold,Text=I,TextColor3=Color3.fromRGB(255,255,255),TextSize=10,TextXAlignment=Enum.TextXAlignment.Left,TextYAlignment=Enum.TextYAlignment.Center,ZIndex=3,[Roact.Event.MouseEnter]=function(T)T.BackgroundTransparency=.2 end,[Roact.Event.InputEnded]=function(Y)Y.BackgroundTransparency=T.props.CurrentOption==I and.1 or 1 end;[Roact.Event.Activated]=function(Y)T:setState({AreOptionsVisible=false})T.props.OnOptionSelected(I)end},{Padding=new("\085\073\080\097\100\100\105\110\103",{PaddingLeft=UDim.new(0,6),PaddingRight=UDim.new(0,6)});Corners=new("\085\073\067\111\114\110\101\114",{CornerRadius=UDim.new(0,4)})}))end return Y end function T.render(T)return new("\073\109\097\103\101\066\117\116\116\111\110",{BackgroundColor3=Color3.fromRGB(0,0,0);BackgroundTransparency=.3;BorderSizePixel=0,Position=T.props.Position,Size=T.props.Size,Image="",[Roact.Change.AbsoluteSize]=function(Y)T.SetSize(Y.AbsoluteSize)end;[Roact.Event.Activated]=function(Y)T:setState({AreOptionsVisible=not T.state.AreOptionsVisible})end},{Corners=new("\085\073\067\111\114\110\101\114",{CornerRadius=UDim.new(0,4)});CurrentOption=new("\084\101\120\116\076\097\098\101\108",{BackgroundTransparency=1,Font=Enum.Font.GothamBold,Text=T.props.CurrentOption or"\042";TextColor3=Color3.fromRGB(255,255,255);TextSize=10,TextXAlignment=Enum.TextXAlignment.Left,TextYAlignment=Enum.TextYAlignment.Center,Position=UDim2.new(0,6,0,0),Size=UDim2.new(1,-32,1,0)}),Arrow=new("\073\109\097\103\101\076\097\098\101\108",{BackgroundTransparency=1;AnchorPoint=Vector2.new(1,.5);Position=UDim2.new(1,-3,.5,0),Size=UDim2.new(0,20,0,20),Image="\114\098\120\097\115\115\101\116\105\100\058\047\047\049\051\052\051\054\055\051\056\050"});Options=new("\070\114\097\109\101",{Visible=T.state.AreOptionsVisible;BackgroundColor3=Color3.fromRGB(0,0,0);BackgroundTransparency=.3,BorderSizePixel=0,Position=UDim2.new(0,0,1,1);Size=UDim2.new(math.ceil(#T.props.Options/T.props.MaxRows),0,#T.props.Options>T.props.MaxRows and T.props.MaxRows or#T.props.Options,0);ZIndex=2},Cryo.Dictionary.join(T:BuildButtonList(),{Corners=new("\085\073\067\111\114\110\101\114",{CornerRadius=UDim.new(0,4)});Layout=new("\085\073\071\114\105\100\076\097\121\111\117\116",{CellPadding=UDim2.new();CellSize=T.Size:map(function(T)return UDim2.fromOffset(T.X,T.Y)end),FillDirection=Enum.FillDirection.Vertical;FillDirectionMaxCells=T.props.MaxRows,HorizontalAlignment=Enum.HorizontalAlignment.Left;VerticalAlignment=Enum.VerticalAlignment.Top;SortOrder=Enum.SortOrder.LayoutOrder;StartCorner=Enum.StartCorner.TopLeft})}))})end return T

local Dropdown = Roact.PureComponent:extend(script.Name)

function Dropdown:init()
    self.Size, self.SetSize = Roact.createBinding(Vector2.new())
    self:setState({
        AreOptionsVisible = false;
    })
end

function Dropdown:BuildButtonList()
    local List = {}
    for _, Option in ipairs(self.props.Options) do
        table.insert(List, new('TextButton', {
            BackgroundTransparency = (self.props.CurrentOption == Option) and 0.1 or 1;
            BackgroundColor3 = Color3.fromRGB(0, 145, 255);
            BorderSizePixel = 0;
            Font = Enum.Font.GothamBold;
            Text = Option;
            TextColor3 = Color3.fromRGB(255, 255, 255);
            TextSize = 10;
            TextXAlignment = Enum.TextXAlignment.Left;
            TextYAlignment = Enum.TextYAlignment.Center;
            ZIndex = 3;
            [Roact.Event.MouseEnter] = function (rbx)
                rbx.BackgroundTransparency = 0.2
            end;
            [Roact.Event.InputEnded] = function (rbx)
                rbx.BackgroundTransparency = (self.props.CurrentOption == Option) and 0.1 or 1
            end;
            [Roact.Event.Activated] = function (rbx)
                self:setState({
                    AreOptionsVisible = false;
                })
                self.props.OnOptionSelected(Option)
            end;
        }, {
            Padding = new('UIPadding', {
                PaddingLeft = UDim.new(0, 6);
                PaddingRight = UDim.new(0, 6);
            });
            Corners = new('UICorner', {
                CornerRadius = UDim.new(0, 4);
            });
        }))
    end
    return List
end

function Dropdown:render()
    return new('ImageButton', {
        BackgroundColor3 = Color3.fromRGB(0, 0, 0);
        BackgroundTransparency = 0.3;
        BorderSizePixel = 0;
        Position = self.props.Position;
        Size = self.props.Size;
        Image = '';
        [Roact.Change.AbsoluteSize] = function (rbx)
            self.SetSize(rbx.AbsoluteSize)
        end;
        [Roact.Event.Activated] = function (rbx)
            self:setState({
                AreOptionsVisible = not self.state.AreOptionsVisible;
            })
        end;
    }, {
        Corners = new('UICorner', {
            CornerRadius = UDim.new(0, 4);
        });
        CurrentOption = new('TextLabel', {
            BackgroundTransparency = 1;
            Font = Enum.Font.GothamBold;
            Text = self.props.CurrentOption or '*';
            TextColor3 = Color3.fromRGB(255, 255, 255);
            TextSize = 10;
            TextXAlignment = Enum.TextXAlignment.Left;
            TextYAlignment = Enum.TextYAlignment.Center;
            Position = UDim2.new(0, 6, 0, 0);
            Size = UDim2.new(1, -32, 1, 0);
        });
        Arrow = new('ImageLabel', {
            BackgroundTransparency = 1;
            AnchorPoint = Vector2.new(1, 0.5);
            Position = UDim2.new(1, -3, 0.5, 0);
            Size = UDim2.new(0, 20, 0, 20);
            Image = 'rbxassetid://134367382';
        });
        Options = new('Frame', {
            Visible = self.state.AreOptionsVisible;
            BackgroundColor3 = Color3.fromRGB(0, 0, 0);
            BackgroundTransparency = 0.3;
            BorderSizePixel = 0;
            Position = UDim2.new(0, 0, 1, 1);
            Size = UDim2.new(
                math.ceil(#self.props.Options / self.props.MaxRows), 0,
                (#self.props.Options > self.props.MaxRows) and self.props.MaxRows or #self.props.Options, 0
            );
            ZIndex = 2;
        }, Cryo.Dictionary.join(self:BuildButtonList(), {
            Corners = new('UICorner', {
                CornerRadius = UDim.new(0, 4);
            });
            Layout = new('UIGridLayout', {
                CellPadding = UDim2.new();
                CellSize = self.Size:map(function (Size)
                    return UDim2.fromOffset(Size.X, Size.Y)
                end);
                FillDirection = Enum.FillDirection.Vertical;
                FillDirectionMaxCells = self.props.MaxRows;
                HorizontalAlignment = Enum.HorizontalAlignment.Left;
                VerticalAlignment = Enum.VerticalAlignment.Top;
                SortOrder = Enum.SortOrder.LayoutOrder;
                StartCorner = Enum.StartCorner.TopLeft;
            });
        }));
    })
end

return Dropdown
