local h=script.Parent.Parent.Parent local z=require(h.Vendor.Roact)local r=require(h.Vendor.StudioComponents)local k=r.withTheme local P=z.Component:extend("\073\116\101\109")function P.init(h)h:setState({Active=true,Hover=false,Visible=h.props.Layer.Properties.Visible,Locked=h.props.Layer.Properties.Locked})h.onInputBegan=function(z,r)if h.props.Disabled then return end if r.UserInputType==Enum.UserInputType.MouseMovement then h:setState({Hover=true})end end h.onInputEnded=function(z,r)if r.UserInputType==Enum.UserInputType.MouseMovement then h:setState({Hover=false})end end h.toggleVisibility=function()if h.props.Disabled then return end h:setState({Visible=not h.state.Visible})end h.toggleLock=function()if h.props.Disabled then return end h:setState({Locked=not h.state.Locked})end end function P.render(h)local r=Enum.StudioStyleGuideColor.FilterButtonDefault if h.props.SelectedLayer then r=(settings()).Studio.Theme.Name=="\068\097\114\107"and Enum.StudioStyleGuideColor.Button or Enum.StudioStyleGuideColor.MainButton end return k(function(k)local P=Enum.StudioStyleGuideModifier.Default if h.props.Disabled then P=Enum.StudioStyleGuideModifier.Disabled end local x=h.props.Layer.Properties.Locked and"\114\098\120\097\115\115\101\116\105\100\058\047\047\055\049\057\057\057\056\048\056\051\048"or"\114\098\120\097\115\115\101\116\105\100\058\047\047\055\049\057\057\057\056\048\048\054\054"local w=h.props.Layer.Properties.Visible and"\114\098\120\097\115\115\101\116\105\100\058\047\047\055\049\057\057\057\055\057\049\050\053"or"\114\098\120\097\115\115\101\116\105\100\058\047\047\055\049\057\057\057\055\057\053\052\056"local D=Enum.StudioStyleGuideColor.MainText local t=h.props.Layer.Properties.Visible and k:GetColor(D)or k:GetColor(D,Enum.StudioStyleGuideModifier.Disabled)local X=h.props.Layer.Id+1<=h.props.NumLayers local O=h.props.Layer.Id-1>1 return z.createElement("\070\114\097\109\101",{BackgroundColor3=k:GetColor(r,P),BorderSizePixel=1,BorderColor3=k:GetColor(Enum.StudioStyleGuideColor.Border,P),LayoutOrder=h.props.LayoutOrder;Size=h.props.Size or UDim2.new(1,0,0,60),[z.Event.InputBegan]=h.onInputBegan;[z.Event.InputEnded]=h.onInputEnded},{Button=z.createElement("\084\101\120\116\066\117\116\116\111\110",{BackgroundTransparency=1,Position=UDim2.new(0,60,0,5);Size=UDim2.new(1,-120,1,0),Text="";[z.Event.MouseButton1Click]=h.props.OnActivated});LayerLabel=z.createElement("\084\101\120\116\076\097\098\101\108",{BackgroundTransparency=1,Font=Enum.Font.ArialBold;Position=UDim2.new(0,75,0,10),Size=UDim2.new(1,-75,0,20);Text=h.props.Layer.Name,TextColor3=t;TextSize=14;TextXAlignment=Enum.TextXAlignment.Left,TextYAlignment=Enum.TextYAlignment.Top}),Visible=z.createElement("\084\101\120\116\066\117\116\116\111\110",{AutoButtonColor=false,BackgroundColor3=k:GetColor(r,P),BorderSizePixel=1,BorderColor3=k:GetColor(Enum.StudioStyleGuideColor.Border,P);Size=UDim2.new(0,60,0,60),Text="";[z.Event.MouseButton1Click]=function()h.toggleVisibility()h.props.OnVisibilityToggled()end},{Img=z.createElement("\073\109\097\103\101\076\097\098\101\108",{AnchorPoint=Vector2.new(.5,.5),BackgroundTransparency=1,Image=w,ImageColor3=t;Position=UDim2.new(.5,0,.5,0),ScaleType=Enum.ScaleType.Fit;Size=UDim2.new(0,25,0,25)})});Shift=z.createElement("\070\114\097\109\101",{BackgroundTransparency=1;BackgroundColor3=k:GetColor(r,P);BorderSizePixel=1;BorderColor3=k:GetColor(Enum.StudioStyleGuideColor.Border,P);Position=UDim2.new(1,-25,0,0),Size=UDim2.new(0,20,1,0);Visible=h.state.Hover and(h.props.Layer.Id~=1 and(X or O))},{Up=z.createElement("\073\109\097\103\101\066\117\116\116\111\110",{BackgroundTransparency=1;LayoutOrder=0;Size=UDim2.new(0,20,.5,0);Image="\114\098\120\097\115\115\101\116\105\100\058\047\047\055\050\050\048\048\052\051\053\053\054";ImageColor3=k:GetColor(Enum.StudioStyleGuideColor.MainText);ScaleType=Enum.ScaleType.Fit,Visible=X,[z.Event.MouseButton1Click]=h.props.MoveLayerUp}),Down=z.createElement("\073\109\097\103\101\066\117\116\116\111\110",{BackgroundTransparency=1;LayoutOrder=1;Position=UDim2.new(0,0,1,-30);Size=UDim2.new(0,20,.5,0);Image="\114\098\120\097\115\115\101\116\105\100\058\047\047\055\050\050\048\048\052\051\056\052\051";ImageColor3=k:GetColor(Enum.StudioStyleGuideColor.MainText),ScaleType=Enum.ScaleType.Fit;Visible=O;[z.Event.MouseButton1Click]=h.props.MoveLayerDown})}),Lock=z.createElement("\073\109\097\103\101\066\117\116\116\111\110",{AnchorPoint=Vector2.new(0,.5),BackgroundTransparency=1;Image=x,ImageColor3=t;Position=(h.state.Hover and(h.props.Layer.Id~=1 and(X or O)))and UDim2.new(1,-65,.5,0)or UDim2.new(1,-40,.5,0);ScaleType=Enum.ScaleType.Fit;Size=UDim2.new(0,20,0,20),[z.Event.MouseButton1Click]=function()h.toggleLock()h.props.OnLockToggled()end})})end)end return P
local Plugin = script.Parent.Parent.Parent

local Roact = require(Plugin.Vendor.Roact)
local StudioComponents = require(Plugin.Vendor.StudioComponents)

local withTheme = StudioComponents.withTheme

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

function Item:init()
	self:setState({
		Active = true,
		Hover = false,
		Visible = self.props.Layer.Properties.Visible,
		Locked = self.props.Layer.Properties.Locked
	})

	self.onInputBegan = function(_, input)
		if self.props.Disabled then
			return
		end

		if input.UserInputType == Enum.UserInputType.MouseMovement then
			self:setState({ Hover = true })
		end
	end

	self.onInputEnded = function(_, input)
		if input.UserInputType == Enum.UserInputType.MouseMovement then
			self:setState({ Hover = false })
		end
	end

	self.toggleVisibility = function()
		if self.props.Disabled then
			return
		end
		self:setState({ Visible = not self.state.Visible })
	end

	self.toggleLock = function()
		if self.props.Disabled then
			return
		end
		self:setState({ Locked = not self.state.Locked })
	end

end

function Item:render()

	local color = Enum.StudioStyleGuideColor.FilterButtonDefault
	if self.props.SelectedLayer then
		color = settings().Studio.Theme.Name == "Dark" and Enum.StudioStyleGuideColor.Button or Enum.StudioStyleGuideColor.MainButton
	end

	return withTheme(function(theme)

		local modifier = Enum.StudioStyleGuideModifier.Default
		if self.props.Disabled then
			modifier = Enum.StudioStyleGuideModifier.Disabled
		end

		local lockIcon = self.props.Layer.Properties.Locked and "rbxassetid://7199980830" or "rbxassetid://7199980066"
		local visibleIcon = self.props.Layer.Properties.Visible and "rbxassetid://7199979125" or "rbxassetid://7199979548"

		local MainEnum = Enum.StudioStyleGuideColor.MainText
		local MainColor = self.props.Layer.Properties.Visible and theme:GetColor(MainEnum) or theme:GetColor(MainEnum, Enum.StudioStyleGuideModifier.Disabled)

		local canGoUp = (self.props.Layer.Id + 1 <= self.props.NumLayers)
		local canGoDown = (self.props.Layer.Id - 1 > 1)

		return Roact.createElement("Frame", {
			BackgroundColor3 = theme:GetColor(color, modifier),
			BorderSizePixel = 1,
			BorderColor3 = theme:GetColor(Enum.StudioStyleGuideColor.Border, modifier),
			LayoutOrder = self.props.LayoutOrder,
			Size = self.props.Size or UDim2.new(1, 0, 0, 60),
			[Roact.Event.InputBegan] = self.onInputBegan,
			[Roact.Event.InputEnded] = self.onInputEnded,
		}, {
			Button = Roact.createElement("TextButton", {
				BackgroundTransparency = 1,
				Position = UDim2.new(0, 60, 0, 5),
				Size = UDim2.new(1, -120, 1, 0),
				Text = "",
				[Roact.Event.MouseButton1Click] = self.props.OnActivated
			}),
			LayerLabel = Roact.createElement("TextLabel", {
				BackgroundTransparency = 1,
				Font = Enum.Font.ArialBold,
				Position = UDim2.new(0, 75, 0, 10),
				Size = UDim2.new(1, -75, 0, 20),
				Text = self.props.Layer.Name,
				TextColor3 = MainColor,
				TextSize = 14,
				TextXAlignment = Enum.TextXAlignment.Left,
				TextYAlignment = Enum.TextYAlignment.Top
			}),
			--[[TransparencyLabel = Roact.createElement("TextLabel", {
				BackgroundTransparency = 1,
				Font = Enum.Font.Arial,
				Position = UDim2.new(0, 75, 0, 30),
				Size = UDim2.new(1, -75, 0, 20),
				Text = (100 - (self.props.Opacity * 100)) .. "%",
				TextColor3 = theme:GetColor(Enum.StudioStyleGuideColor.MainText),
				TextSize = 14,
				TextXAlignment = Enum.TextXAlignment.Left,
				TextYAlignment = Enum.TextYAlignment.Top
			}),]]
			Visible = Roact.createElement("TextButton", {
				AutoButtonColor = false,
				BackgroundColor3 = theme:GetColor(color, modifier),
				BorderSizePixel = 1,
				BorderColor3 = theme:GetColor(Enum.StudioStyleGuideColor.Border, modifier),
				Size = UDim2.new(0, 60, 0, 60),
				Text = "",
				[Roact.Event.MouseButton1Click] = function()
					self.toggleVisibility()
					self.props.OnVisibilityToggled()
				end
			}, {
				Img = Roact.createElement("ImageLabel", {
					AnchorPoint = Vector2.new(0.5, 0.5),
					BackgroundTransparency = 1,
					Image = visibleIcon,
					ImageColor3 = MainColor,
					Position = UDim2.new(0.5, 0, 0.5, 0),
					ScaleType = Enum.ScaleType.Fit,
					Size = UDim2.new(0, 25, 0, 25),
				}),
			}),
			Shift = Roact.createElement("Frame", {
				BackgroundTransparency = 1,
				BackgroundColor3 = theme:GetColor(color, modifier),
				BorderSizePixel = 1,
				BorderColor3 = theme:GetColor(Enum.StudioStyleGuideColor.Border, modifier),
				Position = UDim2.new(1, -25, 0, 0),
				Size = UDim2.new(0, 20, 1, 0),
				Visible = self.state.Hover and self.props.Layer.Id ~= 1 and (canGoUp or canGoDown)
			}, {
				Up = Roact.createElement("ImageButton", {
					BackgroundTransparency = 1,
					LayoutOrder = 0,
					Size = UDim2.new(0, 20, 0.5, 0),
					Image = "rbxassetid://7220043556",
					ImageColor3 = theme:GetColor(Enum.StudioStyleGuideColor.MainText),
					ScaleType = Enum.ScaleType.Fit,
					Visible = canGoUp,
					[Roact.Event.MouseButton1Click] = self.props.MoveLayerUp
				}),
				Down = Roact.createElement("ImageButton", {
					BackgroundTransparency = 1,
					LayoutOrder = 1,
					Position = UDim2.new(0, 0, 1, -30),
					Size = UDim2.new(0, 20, 0.5, 0),
					Image = "rbxassetid://7220043843",
					ImageColor3 = theme:GetColor(Enum.StudioStyleGuideColor.MainText),
					ScaleType = Enum.ScaleType.Fit,
					Visible = canGoDown,
					[Roact.Event.MouseButton1Click] = self.props.MoveLayerDown
				})
			}),
			Lock = Roact.createElement("ImageButton", {
				AnchorPoint = Vector2.new(0, 0.5),
				BackgroundTransparency = 1,
				Image = lockIcon,
				ImageColor3 = MainColor,
				Position = (self.state.Hover and self.props.Layer.Id ~= 1 and (canGoUp or canGoDown)) and UDim2.new(1, -65, 0.5, 0) or UDim2.new(1, -40, 0.5, 0),
				ScaleType = Enum.ScaleType.Fit,
				Size = UDim2.new(0, 20, 0, 20),
				[Roact.Event.MouseButton1Click] = function()
					self.toggleLock()
					self.props.OnLockToggled()
				end
			})
		})
	end)
end

return Item