local c=Roact.Component:extend("\083\117\114\102\097\099\101\065\114\116\083\101\108\101\099\116\111\114")c.defaultProps={numItemsPerPage=3}function c.init(c)c.isAnimating=false c.position,c.updatePosition=Roact.createBinding(0)c.target,c.updateTarget=Roact.createBinding(0)c.motor=Otter.createSingleMotor(c.position:getValue())c.motor:onStep(c.updatePosition)c.state={selectedIndex=1;offset=0}c.useSinglePagination=function()return UserInputService.TouchEnabled or c.props.orientation.isPortrait end c.onApply=modules.onApply(c)c.onCancel=modules.onCancel(c)c.prevPage=function()local T=modules.prevPage(c)T(math.min(c.props.numItemsPerPage,#c.props.images))end c.prevItem=function()local T=modules.prevPage(c)T(1)end c.nextPage=function()local T=modules.nextPage(c)T(math.min(c.props.numItemsPerPage,#c.props.images))end c.nextItem=function()local T=modules.nextPage(c)T(1)end c.setCurrentIndex=modules.setCurrentIndex(c)c.getRenderedIndexes=modules.getRenderedIndexes(c)c.formatTargetIndex=modules.formatTargetIndex()c.getItemTransparency=modules.getItemTransparency(c)end function c.render(c)local T={UIListLayout=Roact.createElement("\085\073\076\105\115\116\076\097\121\111\117\116",{SortOrder=Enum.SortOrder.LayoutOrder,FillDirection=Enum.FillDirection.Horizontal,VerticalAlignment=Enum.VerticalAlignment.Center,HorizontalAlignment=Enum.HorizontalAlignment.Center})}local m=c.getRenderedIndexes()local B=math.floor((#m+1)/2)for m,u in ipairs(m)do local G=c.state.selectedIndex==u and m==B local Y=B-m local l=Roact.createElement("\070\114\097\109\101",{LayoutOrder=m,BackgroundTransparency=1;AutomaticSize=Enum.AutomaticSize.XY},{Roact.createElement(SurfaceArtSelectorItem,{image=c.props.images[u];isSelected=G,transparency=c.getItemTransparency(m,u,B);onClick=function()c.setCurrentIndex(u,Y)end})})T[c.formatTargetIndex(u,Y)]=l end local u=c.props.orientation.isPortrait and ACTION_BAR_HEIGHT_PORTRAIT or ACTION_BAR_HEIGHT_LANDSCAPE return Roact.createElement("\070\114\097\109\101",{Size=UDim2.fromScale(1,1);BackgroundTransparency=1},{Background=Roact.createElement("\070\114\097\109\101",{Size=UDim2.fromScale(1,1);BackgroundColor3=Color3.fromRGB(0,0,0);ZIndex=1},{Gradient=Roact.createElement("\085\073\071\114\097\100\105\101\110\116",{Transparency=NumberSequence.new({NumberSequenceKeypoint.new(0,0);NumberSequenceKeypoint.new(.2,.5);NumberSequenceKeypoint.new(.8,.5);NumberSequenceKeypoint.new(1,0)}),Rotation=c.props.orientation.isPortrait and 90 or 0})}),Container=Roact.createElement("\070\114\097\109\101",{Size=UDim2.fromScale(1,1);BackgroundTransparency=1;ZIndex=2},{Scroller=Roact.createElement("\070\114\097\109\101",{Size=UDim2.new(1,0,1,-(u+ACTION_BAR_TOP_SPACING)),BackgroundTransparency=1;Position=UDim2.fromScale(.5,.5),AnchorPoint=Vector2.new(.5,.5),ZIndex=1},{UIListLayout=Roact.createElement("\085\073\076\105\115\116\076\097\121\111\117\116",{FillDirection=Enum.FillDirection.Horizontal,SortOrder=Enum.SortOrder.LayoutOrder});LeftButton=not c.useSinglePagination()and Roact.createElement(NavButton,{order=1;image=c.props.configuration.leftArrowPageImage,onClick=c.prevPage,keyCode=c.props.configuration.usePageHotkeys and c.props.configuration.prevPageKey or nil}),LeftSingleButton=Roact.createElement(NavButton,{order=2,image=c.props.configuration.leftArrowItemImage;keyCode=c.props.configuration.usePageHotkeys and c.props.configuration.prevItemKey or nil;onClick=c.prevItem}),Page=Roact.createElement("\070\114\097\109\101",{LayoutOrder=3;Size=c.useSinglePagination()and UDim2.fromScale(.8,1)or UDim2.fromScale(.6,1);BackgroundTransparency=1;ClipsDescendants=true},{Container=Roact.createElement("\070\114\097\109\101",{BackgroundTransparency=1;Size=UDim2.fromScale(1,1),AnchorPoint=Vector2.new(.5,.5);Position=c.position:map(function(c)return UDim2.new(.5,c,.5,0)end)},T)});RightSingleButton=Roact.createElement(NavButton,{order=4,image=c.props.configuration.rightArrowItemImage,onClick=c.nextItem,keyCode=c.props.configuration.usePageHotkeys and c.props.configuration.nextItemKey or nil}),RightButton=not c.useSinglePagination()and Roact.createElement(NavButton,{order=5,image=c.props.configuration.rightArrowPageImage;onClick=c.nextPage;keyCode=c.props.configuration.usePageHotkeys and c.props.configuration.nextPageKey or nil})});ActionBar=Roact.createElement("\070\114\097\109\101",{Size=UDim2.new(1,0,0,u+ACTION_BAR_TOP_SPACING);BackgroundTransparency=.5,BackgroundColor3=Color3.fromRGB(0,0,0),Position=UDim2.fromScale(.5,1);AnchorPoint=Vector2.new(.5,1),ZIndex=3},{UIPadding=Roact.createElement("\085\073\080\097\100\100\105\110\103",{PaddingTop=UDim.new(0,16),PaddingBottom=UDim.new(0,16)}),UIListLayout=Roact.createElement("\085\073\076\105\115\116\076\097\121\111\117\116",{SortOrder=Enum.SortOrder.LayoutOrder}),TextLabel=Roact.createElement("\084\101\120\116\076\097\098\101\108",{LayoutOrder=1;Size=UDim2.fromScale(1,c.props.orientation.isPortrait and.5 or.4);BackgroundTransparency=1,TextSize=16,Font=Enum.Font.GothamSemibold;TextColor3=Color3.fromRGB(255,255,255),TextYAlignment=Enum.TextYAlignment.Top,TextXAlignment=Enum.TextXAlignment.Center,TextWrapped=true,Text=string.format("\067\104\111\111\115\101 \097 \100\101\099\097\108 \116\111 \112\108\097\099\101 \111\110 \116\104\101 \119\097\108\108\046 \089\111\117 \099\097\110 \097\100\100 \117\112 \116\111 \037\100 \100\101\099\097\108\115\046",c.props.configuration.quotaPerPlayer)},{UIPadding=Roact.createElement("\085\073\080\097\100\100\105\110\103",{PaddingLeft=UDim.new(0,8),PaddingRight=UDim.new(0,8)})});Roact.createElement("\070\114\097\109\101",{LayoutOrder=2;Size=UDim2.fromScale(1,c.props.orientation.isPortrait and.5 or.6);BackgroundTransparency=1},{ButtonGroup=Roact.createElement("\070\114\097\109\101",{Size=UDim2.fromScale(.5,1),BackgroundTransparency=1,Position=UDim2.fromScale(.5,.5);AnchorPoint=Vector2.new(.5,.5)},{UIListLayout=Roact.createElement("\085\073\076\105\115\116\076\097\121\111\117\116",{FillDirection=Enum.FillDirection.Horizontal,SortOrder=Enum.SortOrder.LayoutOrder,Padding=UDim.new(0,12)}),Cancel=Roact.createElement(Button,{LayoutOrder=1,Text="\067\097\110\099\101\108";TextColor3=Color3.fromRGB(255,255,255),keyCode=Enum.KeyCode.B;onActivated=c.onCancel});Apply=Roact.createElement(Button,{LayoutOrder=2;Text="\065\112\112\108\121",BackgroundColor3=Color3.fromRGB(255,255,255);TextColor3=Color3.fromRGB(0,0,0),keyCode=Enum.KeyCode.Return,onActivated=c.onApply})})})})})})end return ConfigurationContext.withConfiguration(OrientationContext.withOrientation(c))

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

SurfaceArtSelector.defaultProps = {
	numItemsPerPage = 3,
}

function SurfaceArtSelector:init()
	self.isAnimating = false
	self.position, self.updatePosition = Roact.createBinding(0)
	self.target, self.updateTarget = Roact.createBinding(0)
	self.motor = Otter.createSingleMotor(self.position:getValue())
	self.motor:onStep(self.updatePosition)

	self.state = {
		-- Selected surface art index in self.props.images
		selectedIndex = 1,

		-- Offset to render overflow items in order to avoid empty items during pagination
		offset = 0,
	}
	self.useSinglePagination = function()
		return UserInputService.TouchEnabled or self.props.orientation.isPortrait
	end
	self.onApply = modules.onApply(self)
	self.onCancel = modules.onCancel(self)
	self.prevPage = function()
		local prevPage = modules.prevPage(self)
		prevPage(math.min(self.props.numItemsPerPage, #self.props.images))
	end
	self.prevItem = function()
		local prevPage = modules.prevPage(self)
		prevPage(1)
	end
	self.nextPage = function()
		local nextPage = modules.nextPage(self)
		nextPage(math.min(self.props.numItemsPerPage, #self.props.images))
	end
	self.nextItem = function()
		local nextPage = modules.nextPage(self)
		nextPage(1)
	end
	self.setCurrentIndex = modules.setCurrentIndex(self)
	self.getRenderedIndexes = modules.getRenderedIndexes(self)
	self.formatTargetIndex = modules.formatTargetIndex()
	self.getItemTransparency = modules.getItemTransparency(self)
end

function SurfaceArtSelector:render()
	local items = {
		UIListLayout = Roact.createElement("UIListLayout", {
			SortOrder = Enum.SortOrder.LayoutOrder,
			FillDirection = Enum.FillDirection.Horizontal,
			VerticalAlignment = Enum.VerticalAlignment.Center,
			HorizontalAlignment = Enum.HorizontalAlignment.Center,
		}),
	}

	local indexes = self.getRenderedIndexes()
	local mid = math.floor((#indexes + 1) / 2)
	for i, index in ipairs(indexes) do
		-- Avoid the same image being shown as selected when they are shown on the same page
		local isSelected = self.state.selectedIndex == index and i == mid

		-- Offset from the current selected index
		local offset = mid - i

		local item = Roact.createElement("Frame", {
			LayoutOrder = i,
			BackgroundTransparency = 1,
			AutomaticSize = Enum.AutomaticSize.XY,
		}, {
			Roact.createElement(SurfaceArtSelectorItem, {
				image = self.props.images[index],
				isSelected = isSelected,
				transparency = self.getItemTransparency(i, index, mid),
				onClick = function()
					self.setCurrentIndex(index, offset)
				end,
			}),
		})

		items[self.formatTargetIndex(index, offset)] = item
	end

	local actionBarHeight = self.props.orientation.isPortrait and ACTION_BAR_HEIGHT_PORTRAIT
		or ACTION_BAR_HEIGHT_LANDSCAPE

	return Roact.createElement("Frame", {
		Size = UDim2.fromScale(1, 1),
		BackgroundTransparency = 1,
	}, {
		Background = Roact.createElement("Frame", {
			Size = UDim2.fromScale(1, 1),
			BackgroundColor3 = Color3.fromRGB(0, 0, 0),
			ZIndex = 1,
		}, {
			Gradient = Roact.createElement("UIGradient", {
				Transparency = NumberSequence.new({
					NumberSequenceKeypoint.new(0, 0),
					NumberSequenceKeypoint.new(0.2, 0.5),
					NumberSequenceKeypoint.new(0.8, 0.5),
					NumberSequenceKeypoint.new(1, 0),
				}),
				Rotation = self.props.orientation.isPortrait and 90 or 0,
			}),
		}),
		Container = Roact.createElement("Frame", {
			Size = UDim2.fromScale(1, 1),
			BackgroundTransparency = 1,
			ZIndex = 2,
		}, {
			Scroller = Roact.createElement("Frame", {
				Size = UDim2.new(1, 0, 1, -(actionBarHeight + ACTION_BAR_TOP_SPACING)),
				BackgroundTransparency = 1,
				Position = UDim2.fromScale(0.5, 0.5),
				AnchorPoint = Vector2.new(0.5, 0.5),
				ZIndex = 1,
			}, {
				UIListLayout = Roact.createElement("UIListLayout", {
					FillDirection = Enum.FillDirection.Horizontal,
					SortOrder = Enum.SortOrder.LayoutOrder,
				}),
				LeftButton = not self.useSinglePagination() and Roact.createElement(NavButton, {
					order = 1,
					image = self.props.configuration.leftArrowPageImage,
					onClick = self.prevPage,
					keyCode = self.props.configuration.usePageHotkeys and self.props.configuration.prevPageKey or nil,
				}),
				LeftSingleButton = Roact.createElement(NavButton, {
					order = 2,
					image = self.props.configuration.leftArrowItemImage,
					keyCode = self.props.configuration.usePageHotkeys and self.props.configuration.prevItemKey or nil,
					onClick = self.prevItem,
				}),
				Page = Roact.createElement("Frame", {
					LayoutOrder = 3,
					Size = self.useSinglePagination() and UDim2.fromScale(0.8, 1) or UDim2.fromScale(0.6, 1),
					BackgroundTransparency = 1,
					ClipsDescendants = true,
				}, {
					Container = Roact.createElement("Frame", {
						BackgroundTransparency = 1,
						Size = UDim2.fromScale(1, 1),
						AnchorPoint = Vector2.new(0.5, 0.5),
						Position = self.position:map(function(position)
							-- Calculate position for animation using pixel offset instead of scale.
							--
							-- This is because this Frame's size is not computed with all SurfaceArtSelectorItems rendered, but only
							-- those that are visible.
							return UDim2.new(0.5, position, 0.5, 0)
						end),
					}, items),
				}),
				RightSingleButton = Roact.createElement(NavButton, {
					order = 4,
					image = self.props.configuration.rightArrowItemImage,
					onClick = self.nextItem,
					keyCode = self.props.configuration.usePageHotkeys and self.props.configuration.nextItemKey or nil,
				}),
				RightButton = not self.useSinglePagination() and Roact.createElement(NavButton, {
					order = 5,
					image = self.props.configuration.rightArrowPageImage,
					onClick = self.nextPage,
					keyCode = self.props.configuration.usePageHotkeys and self.props.configuration.nextPageKey or nil,
				}),
			}),
			ActionBar = Roact.createElement("Frame", {
				Size = UDim2.new(1, 0, 0, actionBarHeight + ACTION_BAR_TOP_SPACING),
				BackgroundTransparency = 0.5,
				BackgroundColor3 = Color3.fromRGB(0, 0, 0),
				Position = UDim2.fromScale(0.5, 1),
				AnchorPoint = Vector2.new(0.5, 1),
				ZIndex = 3,
			}, {
				UIPadding = Roact.createElement("UIPadding", {
					PaddingTop = UDim.new(0, 16),
					PaddingBottom = UDim.new(0, 16),
				}),
				UIListLayout = Roact.createElement("UIListLayout", {
					SortOrder = Enum.SortOrder.LayoutOrder,
				}),
				TextLabel = Roact.createElement("TextLabel", {
					LayoutOrder = 1,
					Size = UDim2.fromScale(1, self.props.orientation.isPortrait and 0.5 or 0.4),
					BackgroundTransparency = 1,
					TextSize = 16,
					Font = Enum.Font.GothamSemibold,
					TextColor3 = Color3.fromRGB(255, 255, 255),
					TextYAlignment = Enum.TextYAlignment.Top,
					TextXAlignment = Enum.TextXAlignment.Center,
					TextWrapped = true,
					Text = string.format(
						"Choose a decal to place on the wall. You can add up to %d decals.",
						self.props.configuration.quotaPerPlayer
					),
				}, {
					UIPadding = Roact.createElement("UIPadding", {
						PaddingLeft = UDim.new(0, 8),
						PaddingRight = UDim.new(0, 8),
					}),
				}),
				Roact.createElement("Frame", {
					LayoutOrder = 2,
					Size = UDim2.fromScale(1, self.props.orientation.isPortrait and 0.5 or 0.6),
					BackgroundTransparency = 1,
				}, {
					ButtonGroup = Roact.createElement("Frame", {
						Size = UDim2.fromScale(0.5, 1),
						BackgroundTransparency = 1,
						Position = UDim2.fromScale(0.5, 0.5),
						AnchorPoint = Vector2.new(0.5, 0.5),
					}, {
						UIListLayout = Roact.createElement("UIListLayout", {
							FillDirection = Enum.FillDirection.Horizontal,
							SortOrder = Enum.SortOrder.LayoutOrder,
							Padding = UDim.new(0, 12),
						}),
						Cancel = Roact.createElement(Button, {
							LayoutOrder = 1,
							Text = "Cancel",
							TextColor3 = Color3.fromRGB(255, 255, 255),
							keyCode = Enum.KeyCode.B,
							onActivated = self.onCancel,
						}),
						Apply = Roact.createElement(Button, {
							LayoutOrder = 2,
							Text = "Apply",
							BackgroundColor3 = Color3.fromRGB(255, 255, 255),
							TextColor3 = Color3.fromRGB(0, 0, 0),
							keyCode = Enum.KeyCode.Return,
							onActivated = self.onApply,
						}),
					}),
				}),
			}),
		}),
	})
end

return ConfigurationContext.withConfiguration(OrientationContext.withOrientation(SurfaceArtSelector))
