local p=require(script.Parent.Parent.Configuration)local m=require(script.Parent.Parent.Utility.ThemeAccessor)local O=p.Roact local j=p.RoactAnimate local q="\114\098\120\097\115\115\101\116\105\100\058\047\047\049\051\049\056\048\055\052\057\050\049"local f="\114\098\120\097\115\115\101\116\105\100\058\047\047\049\051\051\050\057\048\053\053\055\051"local Y=O.PureComponent:extend("\077\097\116\101\114\105\097\108\083\119\105\116\099\104")Y.defaultProps={Checked=false;OnChecked=print;Position=UDim2.fromScale(.5,.5),AnchorPoint=Vector2.new(.5,.5),ZIndex=1}function Y.init(O,p)O:setState({_trackColor=j.Value.new(m.Get(O,p.Checked and"\083\119\105\116\099\104\084\114\097\099\107\079\110\067\111\108\111\114"or"\083\119\105\116\099\104\084\114\097\099\107\079\102\102\067\111\108\111\114"));_toggleColor=j.Value.new(m.Get(O,p.Checked and"\083\119\105\116\099\104\084\111\103\103\108\101\079\110\067\111\108\111\114"or"\083\119\105\116\099\104\084\111\103\103\108\101\079\102\102\067\111\108\111\114")),_togglePosition=j.Value.new(p.Checked and UDim2.new(1,-10,.5,0)or UDim2.new(0,10,.5,0)),_rippleSize=j.Value.new(UDim2.new());_rippleTransparency=j.Value.new(.6),_rippleColor=j.Value.new(Color3.new())})end function Y.willUpdate(q,p,O)if q.props.Checked~=p.Checked then local O=p.Checked and UDim2.new(1,-10,.5,0)or UDim2.new(0,10,.5,0)local f=m.Get(q,p.Checked and"\083\119\105\116\099\104\084\111\103\103\108\101\079\110\067\111\108\111\114"or"\083\119\105\116\099\104\084\111\103\103\108\101\079\102\102\067\111\108\111\114")local Y=m.Get(q,p.Checked and"\083\119\105\116\099\104\084\114\097\099\107\079\110\067\111\108\111\114"or"\083\119\105\116\099\104\084\114\097\099\107\079\102\102\067\111\108\111\114")local S=m.Get(q,p.Checked and"\083\119\105\116\099\104\082\105\112\112\108\101\079\110\067\111\108\111\114"or"\083\119\105\116\099\104\082\105\112\112\108\101\079\102\102\067\111\108\111\114")local X=table.create(5)X[1]=j.Prepare(q.state._rippleSize,UDim2.new())X[2]=j.Prepare(q.state._rippleTransparency,.6)X[3]=j.Prepare(q.state._rippleColor,S)X[4]=j(q.state._rippleSize,TweenInfo.new(.15),UDim2.fromScale(1.75,1.75))X[5]=j(q.state._rippleTransparency,TweenInfo.new(.15),1)local U=table.create(4)U[1]=j(q.state._togglePosition,TweenInfo.new(.225),O)U[2]=j(q.state._toggleColor,TweenInfo.new(.225),f)U[3]=j(q.state._trackColor,TweenInfo.new(.225),Y)U[4]=j.Sequence(X);(j.Parallel(U)):Start()end end function Y.render(p)return O.createElement("\084\101\120\116\066\117\116\116\111\110",{AnchorPoint=p.props.AnchorPoint;BackgroundTransparency=1,Text="";Size=UDim2.fromOffset(36,20);Position=p.props.Position;ZIndex=p.props.ZIndex,[O.Event.MouseButton1Click]=function()p.props.OnChecked(not p.props.Checked)end},{Track=O.createElement(j.ImageLabel,{BackgroundTransparency=1,Size=UDim2.new(1,0,0,12),Position=UDim2.fromScale(0,.5),AnchorPoint=Vector2.new(0,.5),Image=q,ImageColor3=p.state._trackColor,ScaleType=Enum.ScaleType.Slice,SliceCenter=Rect.new(128,128,128,128)}),SwitchToggle=O.createElement(j.ImageLabel,{BackgroundTransparency=1,Size=UDim2.fromOffset(24,24),AnchorPoint=Vector2.new(.5,.5);Position=p.state._togglePosition,Image=f,ImageTransparency=.8,ZIndex=2},{Toggle=O.createElement(j.ImageLabel,{BackgroundTransparency=1;Size=UDim2.fromOffset(20,20),Position=UDim2.fromOffset(2,1),Image=q;ImageColor3=p.state._toggleColor,ZIndex=2}),Ripple=O.createElement(j.ImageLabel,{AnchorPoint=Vector2.new(.5,.5);Position=UDim2.fromScale(.5,.5),BackgroundTransparency=1,Image=q;ImageColor3=p.state._rippleColor,ImageTransparency=p.state._rippleTransparency;Size=p.state._rippleSize;ZIndex=1})})})end return Y
local Configuration = require(script.Parent.Parent.Configuration)
local ThemeAccessor = require(script.Parent.Parent.Utility.ThemeAccessor)

local Roact = Configuration.Roact
local RoactAnimate = Configuration.RoactAnimate

local CIRCLE_IMAGE = "rbxassetid://1318074921"
local TOGGLE_SHADOW_IMAGE = "rbxassetid://1332905573"

local Switch = Roact.PureComponent:extend("MaterialSwitch")
Switch.defaultProps = {
	Checked = false,
	OnChecked = print,
	Position = UDim2.fromScale(0.5, 0.5),
	AnchorPoint = Vector2.new(0.5, 0.5),
	ZIndex = 1,
}

function Switch:init(props)
	self:setState({
		_trackColor = RoactAnimate.Value.new(ThemeAccessor.Get(self, props.Checked and "SwitchTrackOnColor" or "SwitchTrackOffColor")),
		_toggleColor = RoactAnimate.Value.new(ThemeAccessor.Get(self, props.Checked and "SwitchToggleOnColor" or "SwitchToggleOffColor")),
		_togglePosition = RoactAnimate.Value.new(props.Checked and UDim2.new(1, -10, 0.5, 0) or UDim2.new(0, 10, 0.5, 0)),
		_rippleSize = RoactAnimate.Value.new(UDim2.new()),
		_rippleTransparency = RoactAnimate.Value.new(0.6),
		_rippleColor = RoactAnimate.Value.new(Color3.new()),
	})
end

function Switch:willUpdate(nextProps, nextState)
	if self.props.Checked ~= nextProps.Checked then
		local newTogglePosition = nextProps.Checked and UDim2.new(1, -10, 0.5, 0) or UDim2.new(0, 10, 0.5, 0)
		local newToggleColor = ThemeAccessor.Get(self, nextProps.Checked and "SwitchToggleOnColor" or "SwitchToggleOffColor")
		local newTrackColor = ThemeAccessor.Get(self, nextProps.Checked and "SwitchTrackOnColor" or "SwitchTrackOffColor")
		local newRippleColor = ThemeAccessor.Get(self, nextProps.Checked and "SwitchRippleOnColor" or "SwitchRippleOffColor")

		local sequence = table.create(5)
		sequence[1] = RoactAnimate.Prepare(self.state._rippleSize, UDim2.new())
		sequence[2] = RoactAnimate.Prepare(self.state._rippleTransparency, 0.6)
		sequence[3] = RoactAnimate.Prepare(self.state._rippleColor, newRippleColor)
		sequence[4] = RoactAnimate(self.state._rippleSize, TweenInfo.new(0.15), UDim2.fromScale(1.75, 1.75))
		sequence[5] = RoactAnimate(self.state._rippleTransparency, TweenInfo.new(0.15), 1)

		local animation = table.create(4)
		animation[1] = RoactAnimate(self.state._togglePosition, TweenInfo.new(0.225), newTogglePosition)
		animation[2] = RoactAnimate(self.state._toggleColor, TweenInfo.new(0.225), newToggleColor)
		animation[3] = RoactAnimate(self.state._trackColor, TweenInfo.new(0.225), newTrackColor)
		animation[4] = RoactAnimate.Sequence(sequence)

		RoactAnimate.Parallel(animation):Start()
	end
end

function Switch:render()
	return Roact.createElement("TextButton", {
		AnchorPoint = self.props.AnchorPoint,
		BackgroundTransparency = 1,
		Text = "",
		Size = UDim2.fromOffset(36, 20),
		Position = self.props.Position,
		ZIndex = self.props.ZIndex,

		[Roact.Event.MouseButton1Click] = function()
			self.props.OnChecked(not self.props.Checked)
		end,
	}, {
		Track = Roact.createElement(RoactAnimate.ImageLabel, {
			BackgroundTransparency = 1,
			Size = UDim2.new(1, 0, 0, 12),
			Position = UDim2.fromScale(0, 0.5),
			AnchorPoint = Vector2.new(0, 0.5),
			Image = CIRCLE_IMAGE,
			ImageColor3 = self.state._trackColor,
			ScaleType = Enum.ScaleType.Slice,
			SliceCenter = Rect.new(128, 128, 128, 128),
		}),

		SwitchToggle = Roact.createElement(RoactAnimate.ImageLabel, {
			BackgroundTransparency = 1,
			Size = UDim2.fromOffset(24, 24),
			AnchorPoint = Vector2.new(0.5, 0.5),
			Position = self.state._togglePosition,
			Image = TOGGLE_SHADOW_IMAGE,
			ImageTransparency = 0.8,
			ZIndex = 2,
		}, {
			Toggle = Roact.createElement(RoactAnimate.ImageLabel, {
				BackgroundTransparency = 1,
				Size = UDim2.fromOffset(20, 20),
				Position = UDim2.fromOffset(2, 1),
				Image = CIRCLE_IMAGE,
				ImageColor3 = self.state._toggleColor,
				ZIndex = 2,
			}),

			Ripple = Roact.createElement(RoactAnimate.ImageLabel, {
				AnchorPoint = Vector2.new(0.5, 0.5),
				Position = UDim2.fromScale(0.5, 0.5),
				BackgroundTransparency = 1,
				Image = CIRCLE_IMAGE,
				ImageColor3 = self.state._rippleColor,
				ImageTransparency = self.state._rippleTransparency,
				Size = self.state._rippleSize,
				ZIndex = 1,
			}),
		}),
	})
end

return Switch