local C=script.Parent.Parent.Parent.Parent local U=C.Parent local Z=require(U.Sift)local b=require(U.t)local p=require(U.Roact)local w=p.createElement local m=require(C.App.Menu.ContextMenu)local O=require(C.App.Effect.FocusFrame)local M=script.Parent local r=require(M.DropdownButton)local W=p.PureComponent:extend(script.Name)W.defaultProps={Size=UDim2.fromOffset(120,32)}W.validateProps=b.strictInterface({AnchorPoint=b.optional(b.Vector2);LayoutOrder=b.optional(b.number),Size=b.optional(b.UDim2),Position=b.optional(b.UDim2);DropdownButtonProps=b.optional(b.table),Options=b.table,SelectedOption=b.optional(b.string);OnOptionSelected=b.optional(b.callback),Native=b.optional(b.table)})function W.render(C)local U=C.props local b=C.state local M={}for Z,p in pairs(U.Options)do M[Z]={Text=p,Selected=p==U.SelectedOption;OnClicked=function()C:setState({ContextMenuVisible=not b.ContextMenuVisible})U.OnOptionSelected(p)end}end local W=b.ContextMenuVisible and w(O,{RelativeToParent=true,Reason="\067\079\077\066\079\066\079\088\095\068\082\079\080\068\079\087\078\095\067\079\078\084\069\088\084\095\077\069\078\085",[p.Event.FocusLost]=function()C:setState({ContextMenuVisible=not b.ContextMenuVisible})end},{ContextMenu=w(m,{BackgroundTransparency=0;Options=M,Size=UDim2.new(1,0,0,U.Size)})})local V=w(r,Z.Dictionary.join({AnchorPoint=Vector2.new(.5,.5);Position=UDim2.fromScale(.5,.5);Size=UDim2.fromScale(1,1),Text=U.SelectedOption or"\042";[p.Event.Activated]=function()if U.DropdownButtonProps and U.DropdownButtonProps.Disabled then return end C:setState({ContextMenuVisible=not b.ContextMenuVisible})end},U.DropdownButtonProps))return w("\070\114\097\109\101",Z.Dictionary.join({AnchorPoint=U.AnchorPoint;BackgroundTransparency=1;LayoutOrder=U.LayoutOrder;Position=U.Position,Size=U.Size},U.Native),{Button=V;ContextMenu=W})end return W
-- ComboBox: A drop down option selector

local Winro = script.Parent.Parent.Parent.Parent
local Packages = Winro.Parent

local Sift = require(Packages.Sift)
local t = require(Packages.t)
local Roact = require(Packages.Roact)
local new = Roact.createElement

local ContextMenu = require(Winro.App.Menu.ContextMenu)
local FocusFrame = require(Winro.App.Effect.FocusFrame)

local DropdownRoot = script.Parent
local DropdownButton = require(DropdownRoot.DropdownButton)

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

ComboBox.defaultProps = {
	Size = UDim2.fromOffset(120, 32), --- @defaultProp
}

ComboBox.validateProps = t.strictInterface({

	--- @prop @optional AnchorPoint Vector2 Anchorpoint
	AnchorPoint = t.optional(t.Vector2),

	--- @prop @optional LayoutOrder number Layout order
	LayoutOrder = t.optional(t.number),

	--- @prop @optional Size UDim2 Size
	Size = t.optional(t.UDim2),

	--- @prop @optional Position UDim2 Position
	Position = t.optional(t.UDim2),

	--- @prop @optional DropdownButtonProps table The props for the dropdown button
	DropdownButtonProps = t.optional(t.table),

	--- @prop Options table The options to display
	Options = t.table,

	--- @prop @optional SelectedOption string The currently selected option
	SelectedOption = t.optional(t.string),

	--- @prop @optional OnOptionSelected function The callback to call when an option is selected
	OnOptionSelected = t.optional(t.callback),

	--- @prop @optional Native table Native props
	Native = t.optional(t.table),
})

function ComboBox:render()
	local props = self.props
	local state = self.state

	-- ////////// Context Menu

	local Options = {}

	for Index, Option in pairs(props.Options) do
		Options[Index] = {
			Text = Option,
			Selected = (Option == props.SelectedOption),
			OnClicked = function()

				self:setState({
					ContextMenuVisible = not state.ContextMenuVisible,
				})

				props.OnOptionSelected(Option)
			end
		}
	end

	local ContextMenu = state.ContextMenuVisible and new(FocusFrame, {
		RelativeToParent = true,
		Reason = 'COMBOBOX_DROPDOWN_CONTEXT_MENU',
		[Roact.Event.FocusLost] = function()
			self:setState({
				ContextMenuVisible = not state.ContextMenuVisible,
			})
		end,
	}, {

		ContextMenu = new(ContextMenu, {
			BackgroundTransparency = 0,
			Options = Options,
			Size = UDim2.new(1, 0, 0, props.Size),
		}),
	})

	-- ////////// Dropdown Button

	local Button = new(DropdownButton, Sift.Dictionary.join({
		AnchorPoint = Vector2.new(0.5, 0.5),
		Position = UDim2.fromScale(0.5, 0.5),
		Size = UDim2.fromScale(1, 1),
		Text = props.SelectedOption or '*',

		[Roact.Event.Activated] = function ()

			if props.DropdownButtonProps and props.DropdownButtonProps.Disabled then
				return
			end

			self:setState({
				ContextMenuVisible = not state.ContextMenuVisible
			})
		end,
	}, props.DropdownButtonProps))

	-- ////////// ComboBox wrapper
	return new('Frame', Sift.Dictionary.join({
		AnchorPoint = props.AnchorPoint,
		BackgroundTransparency = 1,
		LayoutOrder = props.LayoutOrder,
		Position = props.Position,
		Size = props.Size,
	}, props.Native), {
		Button = Button,
		ContextMenu = ContextMenu,
	})
end

return ComboBox
