-- The pixel dimensions in Figma for the outer circle and inner circle are 24px
-- and 16px, respectively. This ratio is used to set the scale of the inner
-- circle so that it is always proportionally the same regardless of what size
-- the outer circle is set to.

local SELECTION_INDICATOR_RATIO = 16 / 24

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

local defaultProps = {
	isSelected = false,
	isHovered = false,
	size = UDim2.fromOffset(24, 24),

	-- TODO: replace below props with theme system (SOCIALAPP-2401)
	buttonColor = constants.White,
	inactiveButtonColor = constants.Faded,
}

export type Props = typeof(defaultProps) & {
	layoutOrder: number?,
	onActivated: (() -> ())?,
	onHoverChanged: ((boolean) -> ())?,
}

RadioButton.defaultProps = defaultProps

function RadioButton:init()
	self.onActivated = function()
		local props: Props = self.props

		if not props.isSelected and props.onActivated then
			props.onActivated()
		end
	end

	self.onHoverChanged = function(isHovered: boolean)
		return function()
			local props: Props = self.props

			if props.onHoverChanged then
				props.onHoverChanged(isHovered)
			end
		end
	end
end

function RadioButton:render()
	local props: Props = self.props

	return Roact.createElement("ImageButton", {
		LayoutOrder = props.layoutOrder,
		Selectable = false,
		Size = props.size,
		Image = assets.RadioButtonOuter,
		ImageColor3 = if props.isSelected or props.isHovered then props.buttonColor else props.inactiveButtonColor,
		BackgroundTransparency = 1,
		[Roact.Event.Activated] = self.onActivated,
		[Roact.Event.MouseEnter] = self.onHoverChanged(true),
		[Roact.Event.MouseLeave] = self.onHoverChanged(false),
	}, {
		SelectionIndicator = props.isSelected and Roact.createElement("ImageLabel", {
			Image = assets.RadioButtonInner,
			Size = UDim2.fromScale(SELECTION_INDICATOR_RATIO, SELECTION_INDICATOR_RATIO),
			ImageColor3 = props.buttonColor,
			Position = UDim2.fromScale(0.5, 0.5),
			AnchorPoint = Vector2.new(0.5, 0.5),
			BackgroundTransparency = 1,
		}),
	})
end

return RadioButton
