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=script.Parent local Y=s:WaitForChild("\108\105\098")local j=s:WaitForChild("\099\111\109\109\111\110")local m=j:WaitForChild("\117\116\105\108")local b=require(j:WaitForChild("\083\101\108\101\099\116\111\114\115"))local h=require(j:WaitForChild("\083\104\111\112\080\114\111\100\117\099\116\115"))local O=require(m:WaitForChild("\103\101\116\065\115\115\101\116\077\111\100\101\108"))local V=require(m:WaitForChild("\098\101\097\117\116\105\102\121\078\117\109\098\101\114"))local c=require(Y:WaitForChild("\082\111\097\099\116"))local v=require(Y:WaitForChild("\082\111\097\099\116\082\111\100\117\120"))local N=require(w:WaitForChild("\077\111\100\101\108\086\105\101\119\070\114\097\109\101"))local i=require(w:WaitForChild("\083\104\097\100\111\119\101\100\084\101\120\116\076\097\098\101\108"))local M=c.Component:extend("\080\114\111\100\117\099\116\066\117\116\116\111\110")function M.init(D,s)D:setState(function()return{hovered=false}end)end function M.render(s)local D=s.state.hovered local G=s.props.owned local w={}local Y local j=s.props.asset local m="\036"if not j then error("\065\115\115\101\116 \110\111\116 \115\117\112\112\108\105\101\100 \116\111 \065\115\115\101\116\066\117\116\116\111\110 \101\108\101\109\101\110\116\033")end local b=h.byId[j.id]if b.currency=="\099\097\110\100\121"then m="\240\159\141\172"end local v=O(j.id)if not v then warn(("\065\115\115\101\116 \091\037\115\093 \104\097\115 \110\111 \109\111\100\101\108\046"):format(s.props.asset.id))end if G then Y=c.createElement("\073\109\097\103\101\076\097\098\101\108",{Size=UDim2.new(0,24,0,24);AnchorPoint=Vector2.new(1,1),Position=UDim2.new(1,-4,1,-4),Image="\114\098\120\097\115\115\101\116\105\100\058\047\047\050\054\051\055\055\049\055\054\048\048";ImageColor3=Color3.fromRGB(2,183,87);BackgroundColor3=Color3.fromRGB(255,255,255),BorderSizePixel=0,ZIndex=3})end local M if j.thumbnailImage then M=c.createElement("\073\109\097\103\101\076\097\098\101\108",{Image=j.thumbnailImage,Size=UDim2.new(1,0,1,0),BackgroundTransparency=1})end local x={}x.listLayout=c.createElement("\085\073\076\105\115\116\076\097\121\111\117\116",{FillDirection=Enum.FillDirection.Horizontal,HorizontalAlignment=Enum.HorizontalAlignment.Right;Padding=UDim.new(0,4)})if(j.metadata or{}).isRainbow then x.rainbow=c.createElement("\073\109\097\103\101\076\097\098\101\108",{BackgroundTransparency=1;Image="\114\098\120\097\115\115\101\116\105\100\058\047\047\051\050\049\051\054\054\057\050\050\051",Size=UDim2.new(0,16,0,16)})end local I=c.createElement("\070\114\097\109\101",{BackgroundTransparency=1,Size=UDim2.new(1,-8,0,16);Position=UDim2.new(1,-4,0,4),AnchorPoint=Vector2.new(1,0)},x)w.layout=c.createElement("\085\073\076\105\115\116\076\097\121\111\117\116",{SortOrder=Enum.SortOrder.LayoutOrder;FillDirection=Enum.FillDirection.Vertical;VerticalAlignment=Enum.VerticalAlignment.Top})w.padding=c.createElement("\085\073\080\097\100\100\105\110\103",{PaddingLeft=UDim.new(0,8);PaddingTop=UDim.new(0,8);PaddingRight=UDim.new(0,8);PaddingBottom=UDim.new(0,8)})w.buyLabel=c.createElement("\084\101\120\116\076\097\098\101\108",{Font=Enum.Font.GothamBlack;BackgroundColor3=G and Color3.fromRGB(95,95,95)or D and Color3.fromRGB(0,131,43)or Color3.fromRGB(2,183,87),BorderSizePixel=0,Size=UDim2.new(1,0,0,32);Text=G and"\079\119\110\101\100"or"\066\117\121";TextColor3=Color3.new(1,1,1),TextSize=24,LayoutOrder=2})w.gamutGrid=c.createElement("\073\109\097\103\101\076\097\098\101\108",{Size=UDim2.new(1,0,1,0),Image="\114\098\120\097\115\115\101\116\105\100\058\047\047\055\049\049\056\050\049\053\048\057";ScaleType=Enum.ScaleType.Tile;TileSize=UDim2.new(0,256,0,256);BorderColor3=D and Color3.fromRGB(204,204,204)or Color3.fromRGB(230,230,230),BorderSizePixel=0,ImageColor3=Color3.fromRGB(223,223,223);BackgroundColor3=Color3.fromRGB(255,255,255);LayoutOrder=1},{aspectRatioConstraint=c.createElement("\085\073\065\115\112\101\099\116\082\097\116\105\111\067\111\110\115\116\114\097\105\110\116",{AspectRatio=1,DominantAxis=Enum.DominantAxis.Width;AspectType=Enum.AspectType.FitWithinMaxSize});viewport=c.createElement(N,{model=v,Size=UDim2.new(1,0,1,0);ImageColor3=s.props.blackout and Color3.new(0,0,0)or Color3.new(1,1,1)},{thumbnailImage=M});isEquipped=Y,modifiers=I,price=c.createElement(i,{Font=Enum.Font.GothamBlack,Text=m..V(b.price);TextSize=24;TextStrokeTransparency=0;BackgroundTransparency=1,AnchorPoint=Vector2.new(0,1);Position=UDim2.new(0,0,1,0),Size=UDim2.new(1,0,0,24),TextXAlignment=Enum.TextXAlignment.Left,TextYAlignment=Enum.TextYAlignment.Bottom})})return c.createElement("\084\101\120\116\066\117\116\116\111\110",{BackgroundColor3=D and Color3.fromRGB(223,223,223)or Color3.fromRGB(255,255,255);BorderColor3=D and Color3.fromRGB(204,204,204)or Color3.fromRGB(230,230,230);AutoButtonColor=false,LayoutOrder=s.props.LayoutOrder or 0,Text="";[c.Event.MouseButton1Click]=function()s.props.onClick(s.props.asset.id,s.props.equipped)end;[c.Event.MouseEnter]=function()s:setState(function()return{hovered=true}end)end;[c.Event.MouseLeave]=function()s:setState(function()return{hovered=false}end)end},w)end local function x(s,D)return{owned=b.isOwned(s,G,D.asset.id)}end M=(v.connect(x,nil))(M)return M
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")
local LocalPlayer = Players.LocalPlayer

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

local Selectors = require(common:WaitForChild("Selectors"))
local ShopProducts = require(common:WaitForChild("ShopProducts"))

local getAssetModel = require(util:WaitForChild("getAssetModel"))
local beautifyNumber = require(util:WaitForChild("beautifyNumber"))
local Roact = require(lib:WaitForChild("Roact"))
local RoactRodux = require(lib:WaitForChild("RoactRodux"))

local ModelViewFrame = require(component:WaitForChild("ModelViewFrame"))
local ShadowedTextLabel = require(component:WaitForChild("ShadowedTextLabel"))
local ProductButton = Roact.Component:extend("ProductButton")

function ProductButton:init(initialProps)
    self:setState( function() return {
        hovered = false,
    } end)
end

function ProductButton:render()
    local hovered = self.state.hovered
    local owned = self.props.owned
    local children = {}
    local checkmark
    local asset = self.props.asset
    local currencyCharacter = "$"
    if not asset then error("Asset not supplied to AssetButton element!") end

    local product = ShopProducts.byId[asset.id]
    if product.currency == "candy" then currencyCharacter = "🍬" end
    local assetModel = getAssetModel(asset.id)
    if not assetModel then warn(("Asset [%s] has no model."):format(self.props.asset.id)) end

    if owned then
        checkmark = Roact.createElement("ImageLabel", {
            Size = UDim2.new(0,24,0,24),

            AnchorPoint = Vector2.new(1,1),
            Position = UDim2.new(1,-4,1,-4),

            Image = "rbxassetid://2637717600",
            ImageColor3 = Color3.fromRGB(2, 183, 87),

            BackgroundColor3 = Color3.fromRGB(255,255,255),
            BorderSizePixel = 0,
            ZIndex = 3,
        })
    end

    local thumbnailImage
    if asset.thumbnailImage then
        thumbnailImage = Roact.createElement("ImageLabel", {
            Image = asset.thumbnailImage,
            Size = UDim2.new(1,0,1,0),
            BackgroundTransparency = 1,
        })
    end

    local modifiers = {}

    modifiers.listLayout = Roact.createElement("UIListLayout", {
        FillDirection = Enum.FillDirection.Horizontal,
        HorizontalAlignment = Enum.HorizontalAlignment.Right,
        Padding = UDim.new(0,4),
    })

    if (asset.metadata or {}).isRainbow then
        modifiers.rainbow = Roact.createElement("ImageLabel", {
            BackgroundTransparency = 1,
            Image = "rbxassetid://3213669223",
            Size = UDim2.new(0,16,0,16),
        })
    end

    local modifiersFrame = Roact.createElement("Frame",{
        BackgroundTransparency = 1,
        Size = UDim2.new(1,-8,0,16),
        Position = UDim2.new(1,-4,0,4),
        AnchorPoint = Vector2.new(1,0),
    }, modifiers)

    children.layout = Roact.createElement("UIListLayout", {
        SortOrder = Enum.SortOrder.LayoutOrder,
        FillDirection = Enum.FillDirection.Vertical,
        VerticalAlignment = Enum.VerticalAlignment.Top,
    })

    children.padding = Roact.createElement("UIPadding", {
        PaddingLeft = UDim.new(0,8),
        PaddingTop = UDim.new(0,8),
        PaddingRight = UDim.new(0,8),
        PaddingBottom = UDim.new(0,8),
    })

    children.buyLabel = Roact.createElement("TextLabel", {
        Font = Enum.Font.GothamBlack,
        BackgroundColor3 = (owned and Color3.fromRGB(95, 95, 95)) or (hovered and Color3.fromRGB(0, 131, 43) or Color3.fromRGB(2, 183, 87)),
        BorderSizePixel = 0,
        Size = UDim2.new(1,0,0,32),
        Text = owned and "Owned" or "Buy",
        TextColor3 = Color3.new(1,1,1),
        TextSize = 24,
        LayoutOrder = 2
    })

    children.gamutGrid = Roact.createElement("ImageLabel", {
        Size = UDim2.new(1,0,1,0),
        Image = "rbxassetid://711821509",
        ScaleType = Enum.ScaleType.Tile,
        TileSize = UDim2.new(0,256,0,256),
        BorderColor3 = hovered and Color3.fromRGB(204, 204, 204) or Color3.fromRGB(230, 230, 230),
        BorderSizePixel = 0,
        ImageColor3 = Color3.fromRGB(223, 223, 223),
        BackgroundColor3 = Color3.fromRGB(255,255,255),
        LayoutOrder = 1
    }, {
        aspectRatioConstraint = Roact.createElement("UIAspectRatioConstraint", {
            AspectRatio = 1,
            DominantAxis = Enum.DominantAxis.Width,
            AspectType = Enum.AspectType.FitWithinMaxSize,
        }),
        viewport = Roact.createElement(ModelViewFrame, {
            model = assetModel,
            Size = UDim2.new(1,0,1,0),
            ImageColor3 = self.props.blackout and Color3.new(0,0,0) or Color3.new(1,1,1)
        }, {
            thumbnailImage = thumbnailImage,
        }),
        isEquipped = checkmark,
        modifiers = modifiersFrame,
        price = Roact.createElement(ShadowedTextLabel, {
            Font = Enum.Font.GothamBlack,
            Text = currencyCharacter..beautifyNumber(product.price),
            TextSize = 24,
            TextStrokeTransparency = 0,
            BackgroundTransparency = 1,
            AnchorPoint = Vector2.new(0,1),
            Position = UDim2.new(0,0,1,0),
            Size = UDim2.new(1,0,0,24),
            TextXAlignment = Enum.TextXAlignment.Left,
            TextYAlignment = Enum.TextYAlignment.Bottom,
        }),
    })
    return Roact.createElement("TextButton", {
        BackgroundColor3 = hovered and Color3.fromRGB(223, 223, 223) or Color3.fromRGB(255,255,255),
        BorderColor3 = hovered and Color3.fromRGB(204, 204, 204) or Color3.fromRGB(230, 230, 230),
        AutoButtonColor = false,
        LayoutOrder = self.props.LayoutOrder or 0,
        Text = "",
        [Roact.Event.MouseButton1Click] = function()
            self.props.onClick(self.props.asset.id,self.props.equipped)
        end,

        [Roact.Event.MouseEnter] = function()
            self:setState( function() return {
                hovered = true,
            } end)
        end,

        [Roact.Event.MouseLeave] = function()
            self:setState( function() return {
                hovered = false,
            } end)
        end,
    }, children)
end

local function mapStateToProps(state, props)
    return {
        owned = Selectors.isOwned(state, LocalPlayer, props.asset.id)
    }
end

ProductButton = RoactRodux.connect(mapStateToProps,nil)(ProductButton)
return ProductButton