-- The raw pixel size of the button and the offset needed for 9-slicing it

local BUTTON_PIXEL_SIZE = 32 -- px
local SLICE_OFFSET = 6 -- px

local defaultProps = {
	position = UDim2.fromScale(1, 1),
	anchorPoint = Vector2.new(0.4, 0.4),
	size = 24,
	transparency = 0,
}

export type Props = typeof(defaultProps) & {
	keyCode: Enum.KeyCode,
	transparency: any?, -- Roact binding
}

KeyCodeIcon.defaultProps = defaultProps

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

	if not props.keyCode then
		return
	end

	local gamepadIcon = assets.Gamepad[props.keyCode.Name]

	if gamepadIcon then
		return Roact.createElement("ImageLabel", {
			Image = gamepadIcon,
			ImageTransparency = props.transparency,
			Size = UDim2.fromOffset(props.size, props.size),
			Position = props.position,
			AnchorPoint = props.anchorPoint,
			BackgroundTransparency = 1,
		})
	else
		return Roact.createElement("ImageLabel", {
			Image = assets.KeyBacking,
			ImageTransparency = props.transparency,
			ScaleType = Enum.ScaleType.Slice,
			SliceCenter = Rect.new(
				SLICE_OFFSET,
				SLICE_OFFSET,
				BUTTON_PIXEL_SIZE - SLICE_OFFSET,
				BUTTON_PIXEL_SIZE - SLICE_OFFSET
			),
			Size = UDim2.fromOffset(props.size, props.size),
			Position = props.position,
			AnchorPoint = props.anchorPoint,
			BackgroundTransparency = 1,
		}, {
			Key = Roact.createElement(TextLabel, {
				Text = props.keyCode.Name,
				TextTransparency = props.transparency,
				Size = UDim2.fromScale(1, 1),
				Font = constants.HeaderFont,
				TextColor3 = constants.White,
				TextScaled = false,
				AutomaticSize = Enum.AutomaticSize.X,
				TextXAlignment = Enum.TextXAlignment.Center,
				TextYAlignment = Enum.TextYAlignment.Center,
			}),
		})
	end
end

return KeyCodeIcon
