--[[
	Responsible for managing positions for art spots on a single surface.

	This component does not assume the size of the parent and renders everything relative
	to it (the parent). i.e. This is not a SurfaceGui component for testability purposes.
	We will adorn this to a SurfaceGui one level higher.
]]

local SurfaceCanvas = Roact.Component:extend("SurfaceCanvas")

SurfaceCanvas.defaultProps = {
	numRows = 2,
	numCols = 5,
	paddingLeft = UDim.new(0, 8),
	paddingRight = UDim.new(0, 8),
	paddingTop = UDim.new(0, 8),
	paddingBottom = UDim.new(0, 8),
}

function SurfaceCanvas:render()
	local artItems = self.props[Roact.Children]
	for i, artItem in ipairs(artItems) do
		artItems[i] = Roact.createElement("Frame", {
			LayoutOrder = i,
			BackgroundTransparency = 1,
			Size = UDim2.fromScale(1, 1),
		}, artItem)
	end

	return Roact.createElement(
		"Frame",
		{
			BackgroundTransparency = 1,
			Size = UDim2.fromScale(1, 1),
			[Roact.Ref] = self.frame,
		},
		Cryo.List.join({
			Roact.createElement("UIGridLayout", {
				SortOrder = Enum.SortOrder.LayoutOrder,
				CellPadding = UDim2.fromScale(0, 0),
				CellSize = UDim2.fromScale(1 / self.props.numCols, 1 / self.props.numRows),
			}),
			Roact.createElement("UIPadding", {
				PaddingLeft = self.props.paddingLeft,
				PaddingRight = self.props.paddingRight,
				PaddingTop = self.props.paddingTop,
				PaddingBottom = self.props.paddingBottom,
			}),
		}, artItems)
	)
end

return SurfaceCanvas
