--[[
	This component acts as a stand-in for the ScreenshotHud camera button.

	In the event that ScreenshotHud is not available (from the flag being off or
	when testing in stories) we render our own camera button so we can see how
	everything will look before hitting production.

	When ScreenshotHud is available, this component acts as a "phantom" by
	setting CameraButtonPosition to the position of this component/ This creates
	a Frame that the ScreenshotHud's camera button will follow to make it look
	like it's part of the actual Roact tree.
]]


local SelfieMode = script:FindFirstAncestor("SelfieMode")

local ExperienceComponents = require(SelfieMode.Packages.ExperienceComponents)
local Roact = require(SelfieMode.Packages.Roact)
local assets = require(SelfieMode.assets)

local BACKGROUND_COLOR = Color3.fromHex("#00b46d")
local CONTENT_COLOR = Color3.fromHex("#fff")

local function shift(color: Color3, percent: number)
	local h, s, v = color:ToHSV()
	return Color3.fromHSV(h, s, v * percent)
end

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

export type Props = {
	layoutOrder: number?,
	size: UDim2?,
	screenshotHud: ScreenshotHud?,
	keyCode: Enum.KeyCode?,
	onActivated: (() -> ())?,
	transparency: any?,
}

function PhotoButton:init()
	self.setGuiPosition = function(rbx: Frame)
		local props: Props = self.props

		if props.screenshotHud then
			local offset = rbx.AbsoluteSize / 2
			local position = rbx.AbsolutePosition + offset

			props.screenshotHud.CameraButtonPosition = UDim2.fromOffset(position.X, position.Y)
		end
	end
end

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

	if props.screenshotHud then
		return Roact.createElement("Frame", {
			LayoutOrder = props.layoutOrder,
			Size = props.size,
			BackgroundTransparency = 1,
			[Roact.Change.AbsolutePosition] = self.setGuiPosition,
		})
	else
		return Roact.createElement(ExperienceComponents.PillButton, {
			layoutOrder = props.layoutOrder,
			backgroundColor = BACKGROUND_COLOR,
			borderColor = shift(BACKGROUND_COLOR, 0.8),
			borderSize = if props.keyCode then 0 else 6,
			contentColor = CONTENT_COLOR,
			text = if props.keyCode then "Take Photo" else nil,
			icon = assets.CameraFilled,
			size = props.size,
			keyCode = props.keyCode,
			onActivated = props.onActivated,
			transparency = props.transparency,
		})
	end
end

return PhotoButton
