local A=Roact.PureComponent:extend(script.Name)function A.init(A)A.Size,A.SetSize=Roact.createBinding(Vector2.new())A:setState({AreOptionsVisible=false})end function A.BuildButtonList(A)local O={}for V,p in ipairs(A.props.Options)do table.insert(O,new("\084\101\120\116\066\117\116\116\111\110",{BackgroundTransparency=A.props.CurrentOption==p and.1 or 1;BackgroundColor3=Color3.fromRGB(0,145,255);BorderSizePixel=0;Font=Enum.Font.GothamBold;Text=p;TextColor3=Color3.fromRGB(255,255,255);TextSize=10,TextXAlignment=Enum.TextXAlignment.Left,TextYAlignment=Enum.TextYAlignment.Center;ZIndex=3;[Roact.Event.MouseEnter]=function(A)A.BackgroundTransparency=.2 end;[Roact.Event.InputEnded]=function(O)O.BackgroundTransparency=A.props.CurrentOption==p and.1 or 1 end,[Roact.Event.Activated]=function(O)A:setState({AreOptionsVisible=false})A.props.OnOptionSelected(p)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 O end function A.render(A)return new("\073\109\097\103\101\066\117\116\116\111\110",{BackgroundColor3=Color3.fromRGB(0,0,0);BackgroundTransparency=.3,BorderSizePixel=0;Position=A.props.Position,Size=A.props.Size,Image="";[Roact.Change.AbsoluteSize]=function(O)A.SetSize(O.AbsoluteSize)end;[Roact.Event.Activated]=function(O)A:setState({AreOptionsVisible=not A.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=A.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=A.state.AreOptionsVisible,BackgroundColor3=Color3.fromRGB(0,0,0);BackgroundTransparency=.3;BorderSizePixel=0;Position=UDim2.new(0,0,1,1),Size=UDim2.new(math.ceil(#A.props.Options/A.props.MaxRows),0,#A.props.Options>A.props.MaxRows and A.props.MaxRows or#A.props.Options,0),ZIndex=2},Cryo.Dictionary.join(A: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=A.Size:map(function(A)return UDim2.fromOffset(A.X,A.Y)end),FillDirection=Enum.FillDirection.Vertical;FillDirectionMaxCells=A.props.MaxRows;HorizontalAlignment=Enum.HorizontalAlignment.Left;VerticalAlignment=Enum.VerticalAlignment.Top;SortOrder=Enum.SortOrder.LayoutOrder,StartCorner=Enum.StartCorner.TopLeft})}))})end return A
-- Create component
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
