local n=script:FindFirstAncestor("\077\097\122\101\071\101\110\101\114\097\116\111\114\080\108\117\103\105\110")local Z=n.Plugin local w=require(n:WaitForChild("\082\111\097\099\116"))local i=require(n.M)local X=require(Z.Components.FitScrollingFrame)local G=require(Z.Components.RoundButton)local K=require(Z.Components.DropdownMenuItem)local V=w.Component:extend("\068\114\111\112\100\111\119\110\077\101\110\117")local F=w.createElement local function y() end function V.init(n)local Z=n.props.value local w=n.props.options if Z then n:setState({selectedIndex=i.findIndex(w,function(n)return n.value==Z end);expanded=false})else n:setState({selectedIndex=1;expanded=false})end end function V.toggle(n)n:setState(function(n)return{expanded=not n.expanded}end)end function V.render(n)local Z=n.props.options local w=n.props.color local i=n.props.defaultText local V=n.state.expanded local J=n.state.selectedIndex local v=n.props.onSelect or y local m={}for Z,i in ipairs(Z)do m[i]=F(K,{option=i,index=Z;color=w;onActivated=function()n:setState({selectedIndex=Z})n:toggle()v(i.value)end})end local s=F(X,{fitAxes="\089",containerProps={Size=UDim2.new(1,0,0,400);Position=UDim2.new(0,0,1,4);color=w,Visible=V},layoutProps={Padding=UDim.new(0,4)},paddingProps={PaddingTop=UDim.new(0,16),PaddingBottom=UDim.new(0,16);PaddingLeft=UDim.new(0,0),PaddingRight=UDim.new(0,0)}},m)local e=i or"\078\047\065"local g=""if Z[J]then e=Z[J].name g=Z[J].image end local f=F("\073\109\097\103\101\066\117\116\116\111\110",{LayoutOrder=1;Image=g,Size=UDim2.new(0,40,0,40),Position=UDim2.new(1,45,0,0);AnchorPoint=Vector2.new(1,0)})local t=F(G,{Size=UDim2.new(1,0,0,40);Text=e,onClicked=function()n:toggle()end})local T={Size=n.props.Size,Position=n.props.Position,AnchorPoint=n.props.AnchorPoint,LayoutOrder=n.props.LayoutOrder;BackgroundTransparency=1}return F("\070\114\097\109\101",T,{button=t;img=f,menu=s})end return V
local Root = script:FindFirstAncestor('MazeGeneratorPlugin')
local Plugin = Root.Plugin

local Roact = require(Root:WaitForChild('Roact'))
local M = require(Root.M)
local FitScrollingFrame = require(Plugin.Components.FitScrollingFrame)

local RoundButton = require(Plugin.Components.RoundButton)
local DropdownItem = require(Plugin.Components.DropdownMenuItem)

local DropdownMenu = Roact.Component:extend('DropdownMenu')

local e = Roact.createElement

local function noop()
end

function DropdownMenu:init()
	local value = self.props.value
	local options = self.props.options

	if value then
		self:setState({
			selectedIndex = M.findIndex(options, function(v)
				return v.value == value
			end),
			expanded = false,
		})
	else
		self:setState({
			selectedIndex = 1,
			expanded = false,
		})
	end
end

function DropdownMenu:toggle()
	self:setState(function(state)
		return { expanded = not state.expanded }
	end)
end

function DropdownMenu:render()
	local options = self.props.options
	local color = self.props.color
	local defaultText = self.props.defaultText
	local expanded = self.state.expanded
	local selectedIndex = self.state.selectedIndex
	local onSelect = self.props.onSelect or noop

	local menuOptions = {}

	for index, option in ipairs(options) do
		menuOptions[option] = e(DropdownItem, {
			option = option,
			index = index,
			color = color,
			onActivated = function()
				self:setState({ selectedIndex = index })
				self:toggle()
				onSelect(option.value)
			end,
		})
	end

	local menu = e(
		FitScrollingFrame,
		{
			fitAxes = 'Y',
			containerProps = {
				Size = UDim2.new(1, 0, 0, 400),
				Position = UDim2.new(0, 0, 1, 4),
				color = color,
				Visible = expanded,
			},
			layoutProps = { Padding = UDim.new(0, 4) },
			paddingProps = {
				PaddingTop = UDim.new(0, 16),
				PaddingBottom = UDim.new(0, 16),
				PaddingLeft = UDim.new(0, 0),
				PaddingRight = UDim.new(0, 0),
			},
		},
		menuOptions
	)

	local text = defaultText or 'N/A'

	local image = ''

	if options[selectedIndex] then
		text = options[selectedIndex].name
		image = options[selectedIndex].image
	end

	local img = e('ImageButton', {
		LayoutOrder = 1,
		Image = image,
		Size = UDim2.new(0, 40, 0, 40),
		Position = UDim2.new(1, 45, 0, 0),
		AnchorPoint = Vector2.new(1, 0),
	})

	local button = e(RoundButton, {
		Size = UDim2.new(1, 0, 0, 40),
		Text = text,
		onClicked = function()
			self:toggle()
		end,
	})

	local frameProps = {
		Size = self.props.Size,
		Position = self.props.Position,
		AnchorPoint = self.props.AnchorPoint,
		LayoutOrder = self.props.LayoutOrder,
		BackgroundTransparency = 1,
	}

	return e('Frame', frameProps, {
		button = button,
		img = img,
		menu = menu,
	})
end

return DropdownMenu