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="\099\104\101\099\107\095\098\111\120\095\111\117\116\108\105\110\101\095\098\108\097\110\107"local S="\099\104\101\099\107\095\098\111\120"local X=TweenInfo.new(.15)local U=TweenInfo.new(.225)local R=UDim2.new()local J=UDim2.fromScale(1.75,1.75)local P=UDim2.fromScale(1,1)local l=UDim2.fromOffset(24,24)local B=UDim2.fromScale(.5,.5)local k=Vector2.new(.5,.5)local r=j.PureComponent:extend("\077\097\116\101\114\105\097\108\067\104\101\099\107\098\111\120")r.defaultProps={Checked=false;OnChecked=print;Position=R,ZIndex=1}function r.init(m,p)m:setState({_fillTransparency=q.Value.new(p.Checked and 0 or 1),_rippleSize=q.Value.new(R);_rippleTransparency=q.Value.new(.6)})end function r.willUpdate(m,p)local O=1 local j={}if p.Checked then O=0 if not m.props.Checked then local p=table.create(4)p[1]=q.Prepare(m.state._rippleSize,R)p[2]=q.Prepare(m.state._rippleTransparency,.6)p[3]=q(m.state._rippleSize,X,J)p[4]=q(m.state._rippleTransparency,X,1)table.insert(j,q.Sequence(p))end end table.insert(j,q(m.state._fillTransparency,U,O));(q.Parallel(j)):Start()end function r.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=l;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=P;Text="";[j.Event.MouseButton1Click]=function()p.props.OnChecked(not p.props.Checked)end},{UncheckedIcon=j.createElement(m,{Size=P,Resolution=48,Icon=Y,IconColor3=X.Color,IconTransparency=X.Transparency}),CheckedIcon=j.createElement(m,{Icon=S,IconColor3=O.Get(p,"\080\114\105\109\097\114\121\067\111\108\111\114"),IconTransparency=p.state._fillTransparency,Resolution=48;Size=P,ZIndex=2})}),Ripple=j.createElement(q.ImageLabel,{AnchorPoint=k,Position=B,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 r
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 = "check_box_outline_blank"
local CHECKED_ICON = "check_box"

local TWEEN_INFO_1 = TweenInfo.new(0.15)
local TWEEN_INFO_2 = TweenInfo.new(0.225)
local EMPTY_UDIM2 = UDim2.new()
local RIPPLE_SIZE = UDim2.fromScale(1.75, 1.75)
local FULL_UDIM2 = UDim2.fromScale(1, 1)
local CHECK_SIZE = UDim2.fromOffset(24, 24)
local CENTER_UDIM2 = UDim2.fromScale(0.5, 0.5)
local CENTER_VECTOR2 = Vector2.new(0.5, 0.5)

local Checkbox = Roact.PureComponent:extend("MaterialCheckbox")
Checkbox.defaultProps = {
	Checked = false,
	OnChecked = print,
	Position = EMPTY_UDIM2,
	ZIndex = 1,
}

function Checkbox:init(props)
	self:setState({
		_fillTransparency = RoactAnimate.Value.new(props.Checked and 0 or 1),
		_rippleSize = RoactAnimate.Value.new(EMPTY_UDIM2),
		_rippleTransparency = RoactAnimate.Value.new(0.6),
	})
end

function Checkbox:willUpdate(nextProps)
	local newTransparency = 1
	local animations = {}

	if nextProps.Checked then
		newTransparency = 0

		if not self.props.Checked then
			local sequence = table.create(4)
			sequence[1] = RoactAnimate.Prepare(self.state._rippleSize, EMPTY_UDIM2)
			sequence[2] = RoactAnimate.Prepare(self.state._rippleTransparency, 0.6)
			sequence[3] = RoactAnimate(self.state._rippleSize, TWEEN_INFO_1, RIPPLE_SIZE)
			sequence[4] = RoactAnimate(self.state._rippleTransparency, TWEEN_INFO_1, 1)

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

	table.insert(animations, RoactAnimate(self.state._fillTransparency, TWEEN_INFO_2, newTransparency))
	RoactAnimate.Parallel(animations):Start()
end

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

	return Roact.createElement("Frame", {
		BackgroundTransparency = 1,
		Size = CHECK_SIZE,
		Position = self.props.Position,
		ZIndex = self.props.ZIndex,
	}, {
		InputHandler = Roact.createElement("TextButton", {
			BackgroundTransparency = 1,
			ZIndex = 2,
			Size = FULL_UDIM2,
			Text = "",

			[Roact.Event.MouseButton1Click] = function()
				self.props.OnChecked(not self.props.Checked)
			end,
		}, {
			UncheckedIcon = Roact.createElement(Icon, {
				Size = FULL_UDIM2,
				Resolution = 48,
				Icon = UNCHECKED_ICON,
				IconColor3 = outlineColor.Color,
				IconTransparency = outlineColor.Transparency,
			}),

			CheckedIcon = Roact.createElement(Icon, {
				Icon = CHECKED_ICON,
				IconColor3 = ThemeAccessor.Get(self, "PrimaryColor"),
				IconTransparency = self.state._fillTransparency,
				Resolution = 48,
				Size = FULL_UDIM2,
				ZIndex = 2,
			}),
		}),

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

return Checkbox
