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("\083\104\111\112\080\114\111\100\117\099\116\115"))local h=require(Y:WaitForChild("\083\104\111\112\067\097\116\097\103\111\114\105\101\115"))local O=require(Y:WaitForChild("\065\099\116\105\111\110\115"))local V=require(Y:WaitForChild("\083\101\108\101\099\116\111\114\115"))local c=require(w:WaitForChild("\082\111\097\099\116"))local v=require(w:WaitForChild("\082\111\097\099\116\082\111\100\117\120"))local N=require(j:WaitForChild("\065\115\115\101\116\071\114\105\100"))local i=require(j:WaitForChild("\080\114\111\100\117\099\116\066\117\116\116\111\110"))local M=require(j:WaitForChild("\086\101\114\116\105\099\097\108\078\097\118\098\097\114"))local x=600 local I=.75 local q=c.Component:extend("\083\104\111\112\086\105\101\119")function q.setCatagory(D,s)D:setState({catagory=s})end function q.init(s)s:setState({catagory=h.byId.halloween})end function q.render(s)local D=h.all local G={}for D,w in ipairs(b.all)do local Y=m.byId[w.id]if Y then if Y.shopCatagory==s.state.catagory.id then table.insert(G,w.id)end end end local w={}w.padding=c.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)})w.assetScrollFrame=c.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(#G/5)*168+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=c.createElement(N,{containerProps={Size=UDim2.new(1,0,1,0),BorderSizePixel=0;BackgroundTransparency=1},layoutProps={CellSize=UDim2.new(0,128,0,160),CellPadding=UDim2.new(0,8,0,8)},paddingProps={PaddingLeft=UDim.new(0,16);PaddingTop=UDim.new(0,16)};assets=G or{};assetElementType=i;assetElementProps={onClick=function(D)if not s.props.isOwned(D)then s.props.clientApi:buyAsset(D)end end}})})return c.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=="\115\104\111\112"},{scale=c.createElement("\085\073\083\099\097\108\101",{Scale=math.min(1,(s.props.viewportSize.Y*I)/x)}),layout=c.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=c.createElement(M,{BackgroundColor3=Color3.fromRGB(255,94,14);hoveredColor3=Color3.fromRGB(255,122,5);width=64;catagories=D,ZIndex=2,selectedCatagory=s.state.catagory;onCatagorySelect=function(D)s:setCatagory(D)end});contentframe=c.createElement("\070\114\097\109\101",{BackgroundColor3=Color3.fromRGB(255,255,255),BorderSizePixel=0;Size=UDim2.new(1,-64,1,0)},w)})end local function d(s)return{close=function()s(O.UI_VIEW_SET(nil))end}end local function J(s,D)local function w(D)return V.isOwned(s,G,D)end return{inventory=V.getInventory(s,G),isOwned=w,view=V.getUIView(s)}end q=(v.connect(J,d))(q)return q
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 ShopProducts = require(common:WaitForChild("ShopProducts"))
local ShopCatagories = require(common:WaitForChild("ShopCatagories"))
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 ProductButton = require(component:WaitForChild("ProductButton"))
local VerticalNavbar = require(component:WaitForChild("VerticalNavbar"))

local PIXEL_SIZE = 600
local TARGET_AXIS_SCALE = 3/4

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

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

function ShopView:init()
    self:setState({
        catagory = ShopCatagories.byId["halloween"],
    })
end

function ShopView:render()

    local cataButtons = ShopCatagories.all

    local catagoryProducts = {}

    for _, product in ipairs(ShopProducts.all) do
        local productAsset = Assets.byId[product.id]
        if productAsset then
            if productAsset.shopCatagory == self.state.catagory.id then
                table.insert(catagoryProducts, product.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(#catagoryProducts/5)*(160+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,160),
                CellPadding = UDim2.new(0,8,0,8),
            },
            paddingProps = {
                PaddingLeft = UDim.new(0,16),
                PaddingTop = UDim.new(0,16),
            },
            assets = catagoryProducts or {},
            assetElementType = ProductButton,
            assetElementProps = {
                onClick = function(assetId)
                    if not self.props.isOwned(assetId) then
                        self.props.clientApi:buyAsset(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 == "shop"
    }, {
        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(255, 94, 14),
            hoveredColor3 = Color3.fromRGB(255, 122, 5),
            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

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

return ShopView