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.Checkbox)local W=m.PureComponent:extend(script.Name)W.defaultProps={HeaderFont="\102\111\110\116\115\047\066\111\100\121";HeaderTextColor="\099\111\108\111\114\115\047\070\105\108\108\095\067\111\108\111\114\047\084\101\120\116\047\080\114\105\109\097\114\121";HeaderHeight=21,FitContents=false,Size=UDim2.new(1,0,1,0)}W.validateProps=w.strictInterface({HeaderText=w.string,Checkboxes=w.table,Size=w.optional(w.UDim2);FitContents=w.optional(w.boolean),HeaderTextColor=w.optional(w.string),HeaderFont=w.optional(w.string),HeaderHeight=w.optional(w.numberPositive);Native=w.optional(w.table)})function W.init(C)C.ContainerHeight,C.SetContainerHeight=m.createBinding(0)end function W.GetCheckboxes(C)local U=C.props local Z={}for C,U in pairs(U.Checkboxes)do Z[C]=O(r,U)end return Z end function W.render(C)local U=C.props return b(function(Z)local b=Z[U.HeaderTextColor]local w=Z[U.HeaderFont]local M=O("\084\101\120\116\076\097\098\101\108",{BackgroundTransparency=1;FontFace=w.Font,Position=UDim2.fromOffset(3,1),Size=UDim2.new(1,-3,1,-1),Text=U.HeaderText;TextColor3=b.Color;TextSize=w.Size;TextTransparency=b.Transparency,TextXAlignment="\076\101\102\116"})local r=O("\070\114\097\109\101",{BackgroundTransparency=1;Size=UDim2.new(1,0,0,U.HeaderHeight)},{Label=M})local W=O("\070\114\097\109\101",{AutomaticSize=U.FitContents and"\089"or"\078\111\110\101";BackgroundTransparency=1,Position=UDim2.fromOffset(0,U.HeaderHeight);[m.Change.AbsoluteSize]=function(U)C.SetContainerHeight(U.AbsoluteSize.Y)end;Size=C.ContainerHeight:map(function(C)if not U.FitContents then return U.Size end return UDim2.new(1,0,0,C)end)},{Checkboxes=m.createFragment(C:GetCheckboxes());InitialPadding=O("\070\114\097\109\101",{BackgroundTransparency=1,LayoutOrder=-1;Size=UDim2.new(1,0,0,8)});Layout=O("\085\073\076\105\115\116\076\097\121\111\117\116",{FillDirection=Enum.FillDirection.Vertical;Padding=UDim.new(0,8);SortOrder=Enum.SortOrder.LayoutOrder})})return O("\070\114\097\109\101",p.Dictionary.join({BackgroundTransparency=1;Size=C.ContainerHeight:map(function(C)if not U.FitContents then return U.Size end return UDim2.new(U.Size.X.Scale,U.Size.X.Offset,0,C+U.HeaderHeight)end)},U.Native),{Header=r,CheckboxContainer=W})end)end return W
-- CheckboxGroup: A grouped collection of CheckBox elements
-- https://www.figma.com/file/uNmIxgdbUT44MZjQCTIMe3/Windows-UI-3-(Community)?node-id=25616%3A1593

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 CheckboxRoot = script.Parent
local Checkbox = require(CheckboxRoot.Checkbox)

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

CheckboxGroup.defaultProps = {
	HeaderFont = 'fonts/Body', --- @defaultProp
	HeaderTextColor = 'colors/Fill_Color/Text/Primary', --- @defaultProp
	HeaderHeight = 21, --- @defaultProp
	FitContents = false, --- @defaultProp
	Size = UDim2.new(1, 0, 1, 0), --- @defaultProp
}

CheckboxGroup.validateProps = t.strictInterface({
	
	--- @prop @optional HeaderText string The CheckboxGroup's header text
	HeaderText = t.string,

	--- @prop Checkboxes table {CheckboxProps} The checkboxes to display
	Checkboxes = t.table,

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

	--- @prop @optional FitContents boolean Determines if the CheckboxGroup will resize to fit its contents
	FitContents = t.optional(t.boolean),

	--- @prop @optional @style HeaderTextColor string The color of the header's text
	HeaderTextColor = t.optional(t.string),

	--- @prop @optional @style HeaderFont string The font of the header
	HeaderFont = t.optional(t.string),

	--- @prop @optional HeaderHeight number The height, in pixels of the header
	HeaderHeight = t.optional(t.numberPositive),

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

function CheckboxGroup:init()

	-- CheckboxGroup Checkbox Container height
	self.ContainerHeight, self.SetContainerHeight = Roact.createBinding(0)
end

function CheckboxGroup:GetCheckboxes()
	local props = self.props

	local Checkboxes = {}

	for Index, props in pairs(props.Checkboxes) do
		Checkboxes[Index] = new(Checkbox, props)
	end

	return Checkboxes
end

function CheckboxGroup:render()
	local props = self.props

	return WithTheme(function(Theme)
		
		-- ////////// CheckboxGroup Header Label
		
		local HeaderTextColor = Theme[props.HeaderTextColor]
		local HeaderFont = Theme[props.HeaderFont]

		local Label = new('TextLabel', {
			BackgroundTransparency = 1,
			FontFace = HeaderFont.Font,
			Position = UDim2.fromOffset(3, 1),
			Size = UDim2.new(1, -3, 1, -1),
			Text = props.HeaderText,
			TextColor3 = HeaderTextColor.Color,
			TextSize = HeaderFont.Size,
			TextTransparency = HeaderTextColor.Transparency,
			TextXAlignment = 'Left',
		})

		-- ////////// CheckboxGroup Header

		local Header = new('Frame', {
			BackgroundTransparency = 1,
			Size = UDim2.new(1, 0, 0, props.HeaderHeight),
		}, {
			Label = Label,
		})

		-- ////////// CheckboxGroup Container

		local CheckboxContainer = new('Frame', {
			AutomaticSize = props.FitContents and 'Y' or 'None',
			BackgroundTransparency = 1,
			Position = UDim2.fromOffset(0, props.HeaderHeight),
			
			[Roact.Change.AbsoluteSize] = function(rbx)
				self.SetContainerHeight(rbx.AbsoluteSize.Y)
			end,

			Size = self.ContainerHeight:map(function(Height)

				-- Do not auto-size if FitContents is not set
				if not props.FitContents then
					return props.Size
				end

				return UDim2.new(1, 0, 0, Height)
			end),
		}, {
			Checkboxes = Roact.createFragment(self:GetCheckboxes()),

			InitialPadding = new('Frame', {
				BackgroundTransparency = 1,
				LayoutOrder = -1,
				Size = UDim2.new(1, 0, 0, 8)
			}),
			Layout = new('UIListLayout', {
				FillDirection = Enum.FillDirection.Vertical,
				Padding = UDim.new(0, 8),
				SortOrder = Enum.SortOrder.LayoutOrder
			}),
		})

		-- ////////// CheckboxGroup
		return new('Frame', Sift.Dictionary.join({
			BackgroundTransparency = 1,
			Size = self.ContainerHeight:map(function(Height)

				-- Do not auto-size if FitContents is not set
				if not props.FitContents then
					return props.Size
				end

				return UDim2.new(props.Size.X.Scale, props.Size.X.Offset, 0, Height + props.HeaderHeight)
			end)
		}, props.Native), {
			Header = Header,
			CheckboxContainer = CheckboxContainer
		})
	end)
end

return CheckboxGroup
