local s=game:GetService("\082\101\112\108\105\099\097\116\101\100\083\116\111\114\097\103\101")local D=game:GetService("\080\108\097\121\101\114\115")local G=D.LocalPlayer local w=s:WaitForChild("\108\105\098")local Y=s:WaitForChild("\099\111\109\109\111\110")local j=script.Parent local m=require(Y:WaitForChild("\065\115\115\101\116\115"))local b=require(Y:WaitForChild("\065\115\115\101\116\067\097\116\097\103\111\114\105\101\115"))local h=require(Y:WaitForChild("\065\099\116\105\111\110\115"))local O=require(Y:WaitForChild("\083\101\108\101\099\116\111\114\115"))local V=require(w:WaitForChild("\082\111\097\099\116"))local c=require(w:WaitForChild("\082\111\097\099\116\082\111\100\117\120"))local v=require(j:WaitForChild("\065\115\115\101\116\071\114\105\100"))local N=require(j:WaitForChild("\086\101\114\116\105\099\097\108\078\097\118\098\097\114"))local i=600 local M=.75 local x=V.Component:extend("\086\101\114\115\105\111\110\076\097\098\101\108")function x.setCatagory(D,s)D:setState({catagory=s})end function x.init(s)s:setState({catagory=b.byId.hat})end function x.render(s)local D=b.all local G=s.props.inventory local w={}for D,Y in pairs(m.all)do if G[Y.id]then if Y.type==s.state.catagory.id then table.insert(w,Y.id)end end end local Y={}Y.padding=V.createElement("\085\073\080\097\100\100\105\110\103",{PaddingLeft=UDim.new(0,16),PaddingTop=UDim.new(0,16),PaddingRight=UDim.new(0,16);PaddingBottom=UDim.new(0,16)})Y.assetScrollFrame=V.createElement("\083\099\114\111\108\108\105\110\103\070\114\097\109\101",{BorderSizePixel=0,Size=UDim2.new(1,0,1,0),CanvasSize=UDim2.new(0,0,0,math.ceil(#w/5)*136+24),ScrollingDirection=Enum.ScrollingDirection.Y,BackgroundColor3=Color3.fromRGB(245,245,245),TopImage="\114\098\120\097\115\115\101\116\105\100\058\047\047\051\056\048\053\050\057\053\056";BottomImage="\114\098\120\097\115\115\101\116\105\100\058\047\047\051\056\048\053\050\057\053\056",MidImage="\114\098\120\097\115\115\101\116\105\100\058\047\047\051\056\048\053\050\057\053\056"},{assetGrid=V.createElement(v,{containerProps={Size=UDim2.new(1,0,1,0),BorderSizePixel=0;BackgroundTransparency=1},layoutProps={CellSize=UDim2.new(0,128,0,128),CellPadding=UDim2.new(0,8,0,8)},paddingProps={PaddingLeft=UDim.new(0,16);PaddingTop=UDim.new(0,16)};assets=w or{};assetElementProps={onClick=function(D,G)if G then s.props.clientApi:unequipAsset(D)else s.props.clientApi:equipAsset(D)end end}})})return V.createElement("\070\114\097\109\101",{Size=UDim2.new(0,800,0,600),Position=UDim2.new(.5,0,.5,0);AnchorPoint=Vector2.new(.5,.5),BorderSizePixel=0,BackgroundColor3=Color3.fromRGB(255,255,255);Visible=s.props.view=="\105\110\118\101\110\116\111\114\121"},{scale=V.createElement("\085\073\083\099\097\108\101",{Scale=math.min(1,(s.props.viewportSize.Y*M)/i)}),layout=V.createElement("\085\073\076\105\115\116\076\097\121\111\117\116",{SortOrder=Enum.SortOrder.LayoutOrder,FillDirection=Enum.FillDirection.Horizontal;HorizontalAlignment=Enum.HorizontalAlignment.Left;VerticalAlignment=Enum.VerticalAlignment.Top});catagoriesNavbar=V.createElement(N,{BackgroundColor3=Color3.fromRGB(0,145,255),width=64;catagories=D;ZIndex=2;selectedCatagory=s.state.catagory,onCatagorySelect=function(D)s:setCatagory(D)end}),contentframe=V.createElement("\070\114\097\109\101",{BackgroundColor3=Color3.fromRGB(255,255,255);BorderSizePixel=0,Size=UDim2.new(1,-64,1,0)},Y)})end local function I(s)return{close=function()s(h.UI_VIEW_SET(nil))end}end local function q(s,D)local function w(D)return O.isOwned(s,G,D)end return{inventory=O.getInventory(s,G);isOwned=w;view=O.getUIView(s)}end x=(c.connect(q,I))(x)return x
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")
local LocalPlayer = Players.LocalPlayer

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

local Assets = require(common:WaitForChild("Assets"))
local AssetCatagories = require(common:WaitForChild("AssetCatagories"))
local Actions = require(common:WaitForChild("Actions"))
local Selectors = require(common:WaitForChild("Selectors"))
local Roact = require(lib:WaitForChild("Roact"))
local RoactRodux = require(lib:WaitForChild("RoactRodux"))

local AssetGrid = require(component:WaitForChild("AssetGrid"))
local VerticalNavbar = require(component:WaitForChild("VerticalNavbar"))

local PIXEL_SIZE = 600
local TARGET_AXIS_SCALE = 3/4

local InventoryView = Roact.Component:extend("VersionLabel")

function InventoryView:setCatagory(newCatagory)
    self:setState({
        catagory = newCatagory,
    })
end

function InventoryView:init()
    self:setState({
        catagory = AssetCatagories.byId["hat"],
    })
end

function InventoryView:render()

    local cataButtons = AssetCatagories.all

    local inventory = self.props.inventory

    local catagoryAssets = {}

    for _, asset in pairs(Assets.all) do
        if inventory[asset.id] then
            if asset.type == self.state.catagory.id then
                table.insert(catagoryAssets, asset.id)
            end
        end
    end

    local content = {}
    content.padding = Roact.createElement("UIPadding", {
        PaddingLeft = UDim.new(0,16),
        PaddingTop = UDim.new(0,16),
        PaddingRight = UDim.new(0,16),
        PaddingBottom = UDim.new(0,16),
    })

    content.assetScrollFrame = Roact.createElement("ScrollingFrame", {
        BorderSizePixel = 0,
        Size = UDim2.new(1,0,1,0),
        CanvasSize = UDim2.new(0,0,0,math.ceil(#catagoryAssets/5)*(128+8) + 24),
        ScrollingDirection = Enum.ScrollingDirection.Y,
        BackgroundColor3 = Color3.fromRGB(245,245,245),
        TopImage = "rbxassetid://38052958",
        BottomImage = "rbxassetid://38052958",
        MidImage = "rbxassetid://38052958",
    }, {
        assetGrid = Roact.createElement(AssetGrid, {
            containerProps = {
                Size = UDim2.new(1,0,1,0),
                BorderSizePixel = 0,
                BackgroundTransparency = 1,
            },
            layoutProps = {
                CellSize = UDim2.new(0,128,0,128),
                CellPadding = UDim2.new(0,8,0,8),
            },
            paddingProps = {
                PaddingLeft = UDim.new(0,16),
                PaddingTop = UDim.new(0,16),
            },
            assets = catagoryAssets or {},
            assetElementProps = {
                onClick = function(assetId,isEquipped)
                    if isEquipped then
                        self.props.clientApi:unequipAsset(assetId)
                    else
                        self.props.clientApi:equipAsset(assetId)
                    end
                end
            }
        })
    })

    return Roact.createElement("Frame", {
        Size = UDim2.new(0,800,0,600),
        Position = UDim2.new(0.5,0,0.5,0),
        AnchorPoint = Vector2.new(0.5,0.5),

        BorderSizePixel = 0,
        BackgroundColor3 = Color3.fromRGB(255,255,255),

        Visible = self.props.view == "inventory"
    }, {
        scale = Roact.createElement("UIScale", {
            Scale = math.min(1,(self.props.viewportSize.Y * TARGET_AXIS_SCALE)/PIXEL_SIZE)
        }),
        layout = Roact.createElement("UIListLayout", {
            SortOrder = Enum.SortOrder.LayoutOrder,
            FillDirection = Enum.FillDirection.Horizontal,
            HorizontalAlignment = Enum.HorizontalAlignment.Left,
            VerticalAlignment = Enum.VerticalAlignment.Top,
        }),
        catagoriesNavbar = Roact.createElement(VerticalNavbar, {
            BackgroundColor3 = Color3.fromRGB(0, 145, 255),
            width = 64,
            catagories = cataButtons,
            ZIndex = 2,
            selectedCatagory = self.state.catagory,
            onCatagorySelect = function(catagory)
                self:setCatagory(catagory)
            end,
        }),
        contentframe = Roact.createElement("Frame", {
            BackgroundColor3 = Color3.fromRGB(255,255,255),
            BorderSizePixel = 0,
            Size = UDim2.new(1, -64, 1, 0),
        }, content)
    })
end

local function mapDispatchToProps(dispatch)
    return {
        close = function()
            dispatch(Actions.UI_VIEW_SET(nil))
        end
    }
end

local function mapStateToProps(state,props)
    local function isOwned(assetId)
        return Selectors.isOwned(state,LocalPlayer,assetId)
    end
    return {
        inventory = Selectors.getInventory(state,LocalPlayer),
        isOwned = isOwned,
        view = Selectors.getUIView(state)
    }
end

InventoryView = RoactRodux.connect(mapStateToProps,mapDispatchToProps)(InventoryView)

return InventoryView