local p=require(script.Parent.Parent.Configuration)local m=require(script.Parent.Icon)local O=require(script.Parent.Parent.Utility.ThemeAccessor)local j=p.Roact local q=p.RoactAnimate local f="\114\098\120\097\115\115\101\116\105\100\058\047\047\049\051\049\056\048\055\052\057\050\049"local Y="\114\097\100\105\111\095\098\117\116\116\111\110\095\117\110\099\104\101\099\107\101\100"local S="\114\097\100\105\111\095\098\117\116\116\111\110\095\099\104\101\099\107\101\100"local X=j.PureComponent:extend("\077\097\116\101\114\105\097\108\082\097\100\105\111\066\117\116\116\111\110")function X.init(m,p)local j=O.Get(m,"\067\104\101\099\107\079\117\116\108\105\110\101\067\111\108\111\114")m:setState({_fillTransparency=q.Value.new(p.Checked and 0 or 1);_outlineTransparency=q.Value.new(p.Checked and 1 or j.Transparency);_rippleSize=q.Value.new(UDim2.new()),_rippleTransparency=q.Value.new(.6)})end function X.willUpdate(j,p,m)local f=O.Get(j,"\067\104\101\099\107\079\117\116\108\105\110\101\067\111\108\111\114")local Y=1 local S=f.Transparency if p.Checked then Y=0 S=1 end local X={q(j.state._fillTransparency,TweenInfo.new(.225),Y),q(j.state._outlineTransparency,TweenInfo.new(.225),S)}if p.Checked~=j.props.Checked and p.Checked then local p=table.create(4)p[1]=q.Prepare(j.state._rippleSize,UDim2.new())p[2]=q.Prepare(j.state._rippleTransparency,.6)p[3]=q(j.state._rippleSize,TweenInfo.new(.15),UDim2.fromScale(1.75,1.75))p[4]=q(j.state._rippleTransparency,TweenInfo.new(.15),1)table.insert(X,q.Sequence(p))end;(q.Parallel(X)):Start()end function X.render(p)local X=O.Get(p,"\067\104\101\099\107\079\117\116\108\105\110\101\067\111\108\111\114")return j.createElement("\070\114\097\109\101",{BackgroundTransparency=1,Size=UDim2.fromOffset(24,24),Position=p.props.Position;ZIndex=p.props.ZIndex},{InputHandler=j.createElement("\084\101\120\116\066\117\116\116\111\110",{BackgroundTransparency=1;ZIndex=2,Size=UDim2.fromScale(1,1);Text="";[j.Event.MouseButton1Click]=p.props.OnClicked},{UncheckedIcon=j.createElement(m,{Size=UDim2.fromScale(1,1);Resolution=48,Icon=Y,IconColor3=X.Color,IconTransparency=p.state._outlineTransparency}),CheckedIcon=j.createElement(m,{BackgroundTransparency=1,Icon=S,IconColor3=O.Get(p,"\080\114\105\109\097\114\121\067\111\108\111\114"),IconTransparency=p.state._fillTransparency,Size=UDim2.fromScale(1,1);ZIndex=2})}),Ripple=j.createElement(q.ImageLabel,{AnchorPoint=Vector2.new(.5,.5);Position=UDim2.fromScale(.5,.5),BackgroundTransparency=1,Image=f,ImageColor3=O.Get(p,"\080\114\105\109\097\114\121\067\111\108\111\114"),ImageTransparency=p.state._rippleTransparency,Size=p.state._rippleSize;ZIndex=1})})end return X
local Configuration = require(script.Parent.Parent.Configuration)
local Icon = require(script.Parent.Icon)
local ThemeAccessor = require(script.Parent.Parent.Utility.ThemeAccessor)

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

local RIPPLE_IMAGE = "rbxassetid://1318074921"
local UNCHECKED_ICON = "radio_button_unchecked"
local CHECKED_ICON = "radio_button_checked"

local RadioButton = Roact.PureComponent:extend("MaterialRadioButton")

function RadioButton:init(props)
	local outlineColor = ThemeAccessor.Get(self, "CheckOutlineColor")

	self:setState({
		_fillTransparency = RoactAnimate.Value.new(props.Checked and 0 or 1),
		_outlineTransparency = RoactAnimate.Value.new(props.Checked and 1 or outlineColor.Transparency),
		_rippleSize = RoactAnimate.Value.new(UDim2.new()),
		_rippleTransparency = RoactAnimate.Value.new(0.6),
	})
end

function RadioButton:willUpdate(nextProps, nextState)
	local outlineColor = ThemeAccessor.Get(self, "CheckOutlineColor")
	local newTransparency = 1
	local newOutlineTransparency = outlineColor.Transparency

	if nextProps.Checked then
		newTransparency = 0
		newOutlineTransparency = 1
	end

	local animations = {
		RoactAnimate(self.state._fillTransparency, TweenInfo.new(0.225), newTransparency),
		RoactAnimate(self.state._outlineTransparency, TweenInfo.new(0.225), newOutlineTransparency),
	}

	if nextProps.Checked ~= self.props.Checked and nextProps.Checked then
		local sequence = table.create(4)
		sequence[1] = RoactAnimate.Prepare(self.state._rippleSize, UDim2.new())
		sequence[2] = RoactAnimate.Prepare(self.state._rippleTransparency, 0.6)
		sequence[3] = RoactAnimate(self.state._rippleSize, TweenInfo.new(0.15), UDim2.fromScale(1.75, 1.75))
		sequence[4] = RoactAnimate(self.state._rippleTransparency, TweenInfo.new(0.15), 1)

		table.insert(animations, RoactAnimate.Sequence(sequence))
	end

	RoactAnimate.Parallel(animations):Start()
end

function RadioButton:render()
	local outlineColor = ThemeAccessor.Get(self, "CheckOutlineColor")

	return Roact.createElement("Frame", {
		BackgroundTransparency = 1,
		Size = UDim2.fromOffset(24, 24),
		Position = self.props.Position,
		ZIndex = self.props.ZIndex,
	}, {
		InputHandler = Roact.createElement("TextButton", {
			BackgroundTransparency = 1,
			ZIndex = 2,
			Size = UDim2.fromScale(1, 1),
			Text = "",
			[Roact.Event.MouseButton1Click] = self.props.OnClicked,
		}, {
			UncheckedIcon = Roact.createElement(Icon, {
				Size = UDim2.fromScale(1, 1),
				Resolution = 48,
				Icon = UNCHECKED_ICON,
				IconColor3 = outlineColor.Color,
				IconTransparency = self.state._outlineTransparency,
			}),

			CheckedIcon = Roact.createElement(Icon, {
				BackgroundTransparency = 1,
				Icon = CHECKED_ICON,
				IconColor3 = ThemeAccessor.Get(self, "PrimaryColor"),
				IconTransparency = self.state._fillTransparency,
				Size = UDim2.fromScale(1, 1),
				ZIndex = 2,
			}),
		}),

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

return RadioButton
