local s=game:GetService("\082\101\112\108\105\099\097\116\101\100\083\116\111\114\097\103\101")local D=script.Parent local G=s:WaitForChild("\099\111\109\109\111\110")local w=s:WaitForChild("\108\105\098")local Y=require(G:WaitForChild("\065\115\115\101\116\115"))local j=require(G:WaitForChild("\068\105\099\116\105\111\110\097\114\121"))local m=require(w:WaitForChild("\082\111\097\099\116"))local b=require(D:WaitForChild("\065\115\115\101\116\066\117\116\116\111\110"))local h=m.Component:extend("\065\115\115\101\116\071\114\105\100")function h.shouldUpdate(D,s)local G=s.assets if#G==0 then return true end local function w(s)for D,G in pairs(D.props.assets)do if G==s then return true end end return false end for s,D in pairs(G)do if not w(D)then return true end end return false end function h.render(s)local D=s.props.containerType or"\070\114\097\109\101"local G=s.props.containerProps local w=s.props.layoutProps local h=s.props.paddingProps local O=s.props.assets or{}local V=s.props.assetElementType or b local c=s.props.assetElementProps local v if h then v=m.createElement("\085\073\080\097\100\100\105\110\103",h)end local N={}for s,D in pairs(O)do local G=Y.byId[D]or Y.byId.fedora N[D]=m.createElement(V,j.merge({asset=G;LayoutOrder=s},c))end local i=j.merge(s.props[m.Children],{layout=m.createElement("\085\073\071\114\105\100\076\097\121\111\117\116",j.merge({SortOrder=Enum.SortOrder.LayoutOrder},w)),padding=v},N)return m.createElement(D,G,i)end return h
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local component = script.Parent
local common = ReplicatedStorage:WaitForChild("common")
local lib = ReplicatedStorage:WaitForChild("lib")

local Assets = require(common:WaitForChild("Assets"))
local Dictionary = require(common:WaitForChild("Dictionary"))
local Roact = require(lib:WaitForChild("Roact"))

local AssetButton = require(component:WaitForChild("AssetButton"))
local AssetGrid = Roact.Component:extend("AssetGrid")

function AssetGrid:shouldUpdate(nextProps)
    local newAssets = nextProps.assets
    if #newAssets == 0 then
        return true
    end

    local function find(assetId)
        for _,v in pairs(self.props.assets) do
            if v == assetId then
                return true
            end
        end
        return false
    end

    for _,assetId in pairs(newAssets) do
        if not find(assetId) then return true end
    end

    return false
end

function AssetGrid:render()
    local containerType = self.props.containerType or "Frame"
    local containerProps = self.props.containerProps
    local layoutProps = self.props.layoutProps
    local paddingProps = self.props.paddingProps
    local assets = self.props.assets or {}
    local assetElementType = self.props.assetElementType or AssetButton
    local assetElementProps = self.props.assetElementProps

    local padding
    if paddingProps then
        padding = Roact.createElement("UIPadding", paddingProps)
    end

    local assetElements = {}

    for idx,assetId in pairs(assets) do
        local asset = Assets.byId[assetId] or Assets.byId["fedora"]
        assetElements[assetId] = Roact.createElement(assetElementType, Dictionary.merge({
            asset = asset,
            LayoutOrder = idx,
        }, assetElementProps))
    end

    local children = Dictionary.merge(self.props[Roact.Children], {
        layout = Roact.createElement("UIGridLayout", Dictionary.merge({
            SortOrder = Enum.SortOrder.LayoutOrder,
        }, layoutProps)),

        padding = padding,
    }, assetElements)

    return Roact.createElement(containerType, containerProps, children)
end

return AssetGrid