local C=script.Parent.Parent.Parent.Parent local U=C.Parent local Z=require(C.Theme)local b=Z.WithTheme local p=require(U.Sift)local w=require(U.t)local m=require(U.Roact)local O=m.createElement local M=script.Parent local r=require(M.Button)local W=m.PureComponent:extend(script.Name)W.defaultProps={ButtonHeight=UDim.new(0,30);Padding=UDim.new(0,8);ButtonAlignment=Enum.HorizontalAlignment.Left,HorizontalAlignment=Enum.HorizontalAlignment.Right,VerticalAlignment=Enum.VerticalAlignment.Center;MinSlack=50,StackWidth=UDim.new(1,0),PaddingLeft=UDim.new();PaddingRight=UDim.new(),PaddingTop=UDim.new()}W.validateProps=w.strictInterface({AnchorPoint=w.optional(w.Vector2),LayoutOrder=w.optional(w.number);Position=w.optional(w.UDim2);FillWidth=w.optional(w.boolean);Padding=w.optional(w.UDim),PaddingLeft=w.optional(w.UDim),PaddingRight=w.optional(w.UDim),PaddingTop=w.optional(w.UDim);PaddingBottom=w.optional(w.UDim);Size=w.optional(w.UDim2);StackWidth=w.optional(w.UDim),Buttons=w.table,ButtonHeight=w.optional(w.UDim);ButtonAlignment=w.optional(w.enum(Enum.HorizontalAlignment));HorizontalAlignment=w.optional(w.enum(Enum.HorizontalAlignment)),VerticalAlignment=w.optional(w.enum(Enum.VerticalAlignment));MinSlack=w.optional(w.number),[m.Children]=w.optional(w.table);Native=w.optional(w.table)})function W.init(C)C:setState({Width=0})end function W.render(C)local U=C.props local Z=C.state return b(function(Z)local b={}local w=UDim2.new(1/#U.Buttons)local M=true for C,Z in pairs(U.Buttons)do b["\066\117\116\116\111\110"..C]=O(r,p.Dictionary.join(Z,{LayoutOrder=U.ButtonAlignment==Enum.HorizontalAlignment.Right and-C or C;Size=UDim2.new(w.X.Scale,w.X.Offset-(M and 0 or U.Padding.Offset),U.ButtonHeight.Scale,U.ButtonHeight.Offset)}))M=false end local W=O("\070\114\097\109\101",{BackgroundTransparency=1,Size=UDim2.new(U.StackWidth.Scale,U.StackWidth.Offset,1,0)},{Buttons=m.createFragment(b);Layout=O("\085\073\076\105\115\116\076\097\121\111\117\116",{FillDirection=Enum.FillDirection.Horizontal;HorizontalAlignment=U.HorizontalAlignment;SortOrder=Enum.SortOrder.LayoutOrder;VerticalAlignment=U.VerticalAlignment;Padding=U.Padding})})return O("\070\114\097\109\101",p.Dictionary.join({AnchorPoint=U.AnchorPoint,BackgroundTransparency=1,LayoutOrder=U.LayoutOrder;Position=U.Position;Size=U.Size;[m.Change.AbsoluteSize]=function(U)C:setState({Width=U.AbsoluteSize.X})end},U.Native),{ButtonContainer=W;PropChildren=m.createFragment(U[m.Children]or{});Layout=O("\085\073\076\105\115\116\076\097\121\111\117\116",{FillDirection=Enum.FillDirection.Horizontal,HorizontalAlignment=U.HorizontalAlignment,SortOrder=Enum.SortOrder.LayoutOrder,VerticalAlignment=U.VerticalAlignment});Padding=O("\085\073\080\097\100\100\105\110\103",{PaddingLeft=U.PaddingLeft;PaddingRight=U.PaddingRight})})end)end return W
-- ButtonStack: A button list

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

local Theme = require(Winro.Theme)
local WithTheme = Theme.WithTheme

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

local ButtonRoot = script.Parent
local Button = require(ButtonRoot.Button)

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

ButtonStack.defaultProps = {
	ButtonHeight = UDim.new(0, 30), --- @defaultProp,
	Padding = UDim.new(0, 8), --- @defaultProp
	ButtonAlignment = Enum.HorizontalAlignment.Left, --- @defaultProp
	HorizontalAlignment = Enum.HorizontalAlignment.Right, --- @defaultProp
	VerticalAlignment = Enum.VerticalAlignment.Center, --- @defaultProp
	MinSlack = 50, --- @defaultProp
	StackWidth = UDim.new(1, 0), --- @defaultProp
	PaddingLeft = UDim.new(), --- @defaultProp
	PaddingRight = UDim.new(), --- @defaultProp
	PaddingTop = UDim.new(), --- @defaultProp
}

ButtonStack.validateProps = t.strictInterface({

	--- @prop @optional AnchorPoint Vector2 The Stack's anchor point
	AnchorPoint = t.optional(t.Vector2),

	--- @prop @optional LayoutOrder number THe Stack's layout order
	LayoutOrder = t.optional(t.number),

	--- @prop @optional Position UDim2 The Stack's position
	Position = t.optional(t.UDim2),

	--- @prop @optional FillWidth boolean Determines if buttons fill the entire Stack
	FillWidth = t.optional(t.boolean),

	--- @prop @optional Padding UDim The padding between each button
	Padding = t.optional(t.UDim),

	--- @prop @optional PaddingLeft UDim The left padding
	PaddingLeft = t.optional(t.UDim),

	--- @prop @optional PaddingRight UDim The right padding
	PaddingRight = t.optional(t.UDim),

	--- @prop @optional PaddingTop UDim The top padding
	PaddingTop = t.optional(t.UDim),

	--- @prop @optional PaddingBottom UDim The bottom padding
	PaddingBottom = t.optional(t.UDim),

	--- @prop @optional Size UDim2 The Stack's size
	Size = t.optional(t.UDim2),

	--- @prop @optional StackWidth UDim The space to fill
	StackWidth = t.optional(t.UDim),

	--- @prop Buttons table The props for the buttons to display
	Buttons = t.table,

	--- @prop @optional ButtonHeight UDim Each Button's height
	ButtonHeight = t.optional(t.UDim),

	--- @prop @optional ButtonAlignment Enum.HorizontalAlignment The aligmnent of buttons
	ButtonAlignment = t.optional(t.enum(Enum.HorizontalAlignment)),

	--- @prop @optional HorizontalAlignment Enum.HorizontalAlignment The Horizontal alignment of the buttons
	HorizontalAlignment = t.optional(t.enum(Enum.HorizontalAlignment)),

	--- @prop @optional VerticalAlignment Enum.VerticalAlignment The Vertical alignment of the buttons
	VerticalAlignment = t.optional(t.enum(Enum.VerticalAlignment)),

	--- @prop @optional MinSlack number The MinSlack width between the end of the buttons to the end of the stack before buttons fill the entire Stack
	MinSlack = t.optional(t.number),

	--- @prop @optional [Roact.Children] table Roact.Children
	[Roact.Children] = t.optional(t.table),

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

function ButtonStack:init()
	
	-- Initial state
	self:setState({
		Width = 0
	})
end

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

	return WithTheme(function(Theme)
		
		-- ////////// Buttons
		local Buttons = {}

		-- Get the divided size for each button
		local FullWidthSize = UDim2.new(1 / #props.Buttons)

		local IsFirstButton = true
		for ButtonIndex, ButtonProps in pairs(props.Buttons) do
			
			Buttons['Button' .. ButtonIndex] = new(Button, Sift.Dictionary.join(ButtonProps, {
				LayoutOrder = props.ButtonAlignment == Enum.HorizontalAlignment.Right and -ButtonIndex or ButtonIndex,
				Size = UDim2.new(FullWidthSize.X.Scale, FullWidthSize.X.Offset - (IsFirstButton and 0 or props.Padding.Offset), props.ButtonHeight.Scale, props.ButtonHeight.Offset),
			}))

			-- Register first button
			IsFirstButton = false
		end

		-- ////////// Button Container

		local ButtonContainer = new('Frame', {
			BackgroundTransparency = 1,
			Size = UDim2.new(props.StackWidth.Scale, props.StackWidth.Offset, 1, 0),
		}, {
			Buttons = Roact.createFragment(Buttons),
			
			Layout = new('UIListLayout', {
				FillDirection = Enum.FillDirection.Horizontal,
				HorizontalAlignment = props.HorizontalAlignment,
				SortOrder = Enum.SortOrder.LayoutOrder,
				VerticalAlignment = props.VerticalAlignment,
				Padding = props.Padding,
			}),
		})

		-- ////////// Button Stack
		return new('Frame', Sift.Dictionary.join({
			AnchorPoint = props.AnchorPoint,
			BackgroundTransparency = 1,
			LayoutOrder = props.LayoutOrder,
			Position = props.Position,
			Size = props.Size,

			[Roact.Change.AbsoluteSize] = function (rbx)
				self:setState({
					Width = rbx.AbsoluteSize.X
				})
			end,
		}, props.Native), {
			ButtonContainer = ButtonContainer,
			PropChildren = Roact.createFragment(props[Roact.Children] or {}),

			Layout = new('UIListLayout', {
				FillDirection = Enum.FillDirection.Horizontal,
				HorizontalAlignment = props.HorizontalAlignment,
				SortOrder = Enum.SortOrder.LayoutOrder,
				VerticalAlignment = props.VerticalAlignment,
			}),
			Padding = new('UIPadding', {
				PaddingLeft = props.PaddingLeft,
				PaddingRight = props.PaddingRight,
			}),
		})
	end)
end

return ButtonStack
