-- Compiled with roblox-ts v3.0.0
local TS = _G[script]
local React = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).React
local _style = TS.import(script, TS.getModule(script, "@lattice-ui", "style").out)
local mergeGuiProps = _style.mergeGuiProps
local resolveSx = _style.resolveSx
local useTheme = _style.useTheme
local _gridMath = TS.import(script, script.Parent, "gridMath")
local resolveGridCellWidth = _gridMath.resolveGridCellWidth
local resolveGridColumns = _gridMath.resolveGridColumns
local _space = TS.import(script, script.Parent, "space")
local resolvePadding = _space.resolvePadding
local resolveSpace = _space.resolveSpace
local function Grid(props)
	local _condition = props.gap
	if _condition == nil then
		_condition = 0
	end
	local gap = _condition
	local _condition_1 = props.rowGap
	if _condition_1 == nil then
		_condition_1 = gap
	end
	local rowGap = _condition_1
	local _condition_2 = props.columnGap
	if _condition_2 == nil then
		_condition_2 = gap
	end
	local columnGap = _condition_2
	local _condition_3 = props.autoSize
	if _condition_3 == nil then
		_condition_3 = false
	end
	local autoSize = _condition_3
	local columns = props.columns
	local minColumnWidth = props.minColumnWidth
	local _condition_4 = props.cellHeight
	if _condition_4 == nil then
		_condition_4 = 32
	end
	local cellHeight = _condition_4
	local children = props.children
	local sx = props.sx
	local asChild = props.asChild
	if asChild ~= nil then
		error("[Grid] `asChild` is not supported in M3.")
	end
	local restProps = {}
	for rawKey, value in pairs(props) do
		if not (type(rawKey) == "string") then
			continue
		end
		if rawKey == "gap" or rawKey == "rowGap" or rawKey == "columnGap" or rawKey == "columns" or rawKey == "minColumnWidth" or rawKey == "cellHeight" or rawKey == "autoSize" or rawKey == "sx" or rawKey == "asChild" or rawKey == "padding" or rawKey == "paddingX" or rawKey == "paddingY" or rawKey == "paddingTop" or rawKey == "paddingRight" or rawKey == "paddingBottom" or rawKey == "paddingLeft" or rawKey == "children" then
			continue
		end
		restProps[rawKey] = value
	end
	local _binding = useTheme()
	local theme = _binding.theme
	local resolvedRowGap = resolveSpace(theme, rowGap)
	local resolvedColumnGap = resolveSpace(theme, columnGap)
	local resolvedMinColumnWidth = if minColumnWidth ~= nil then resolveSpace(theme, minColumnWidth) else nil
	local resolvedCellHeight = resolveSpace(theme, cellHeight)
	local padding = resolvePadding(theme, props)
	local hasPadding = padding.top > 0 or padding.right > 0 or padding.bottom > 0 or padding.left > 0
	local layoutState, setLayoutState = React.useState(function()
		local _object = {
			columns = resolveGridColumns(0, {
				columns = columns,
				minColumnWidth = resolvedMinColumnWidth,
				columnGap = resolvedColumnGap,
			}),
		}
		local _left = "cellWidth"
		local _condition_5 = resolvedMinColumnWidth
		if _condition_5 == nil then
			_condition_5 = 120
		end
		_object[_left] = math.max(1, _condition_5)
		return _object
	end)
	local frameRef = React.useRef()
	local setFrameRef = React.useCallback(function(instance)
		local _result = instance
		if _result ~= nil then
			_result = _result:IsA("Frame")
		end
		if not _result then
			frameRef.current = nil
			return nil
		end
		frameRef.current = instance
	end, {})
	local updateLayout = React.useCallback(function()
		local frame = frameRef.current
		if not frame then
			return nil
		end
		local containerWidth = frame.AbsoluteSize.X - padding.left - padding.right
		local nextColumns = resolveGridColumns(containerWidth, {
			columns = columns,
			minColumnWidth = resolvedMinColumnWidth,
			columnGap = resolvedColumnGap,
		})
		local nextCellWidth = resolveGridCellWidth(containerWidth, nextColumns, resolvedColumnGap)
		setLayoutState(function(current)
			if current.columns == nextColumns and current.cellWidth == nextCellWidth then
				return current
			end
			return {
				columns = nextColumns,
				cellWidth = nextCellWidth,
			}
		end)
	end, { columns, padding.left, padding.right, resolvedColumnGap, resolvedMinColumnWidth })
	React.useEffect(function()
		updateLayout()
		local frame = frameRef.current
		if not frame then
			return nil
		end
		local sizeConnection = frame:GetPropertyChangedSignal("AbsoluteSize"):Connect(updateLayout)
		return function()
			sizeConnection:Disconnect()
		end
	end, { updateLayout })
	local sxProps = resolveSx(sx, theme)
	local baseProps = {
		BackgroundTransparency = 1,
		BorderSizePixel = 0,
		AutomaticSize = if autoSize == true then Enum.AutomaticSize.Y elseif autoSize == "x" then Enum.AutomaticSize.X elseif autoSize == "y" then Enum.AutomaticSize.Y elseif autoSize == "xy" then Enum.AutomaticSize.XY else Enum.AutomaticSize.None,
	}
	local mergedProps = mergeGuiProps(baseProps, sxProps, restProps)
	local _attributes = table.clone(mergedProps)
	setmetatable(_attributes, nil)
	_attributes.ref = setFrameRef
	return React.createElement("frame", _attributes, React.createElement("uigridlayout", {
		CellPadding = UDim2.fromOffset(resolvedColumnGap, resolvedRowGap),
		CellSize = UDim2.fromOffset(layoutState.cellWidth, resolvedCellHeight),
		FillDirectionMaxCells = layoutState.columns,
		SortOrder = Enum.SortOrder.LayoutOrder,
	}), if hasPadding then (React.createElement("uipadding", {
		PaddingBottom = UDim.new(0, padding.bottom),
		PaddingLeft = UDim.new(0, padding.left),
		PaddingRight = UDim.new(0, padding.right),
		PaddingTop = UDim.new(0, padding.top),
	})) else nil, children)
end
return {
	Grid = Grid,
}