--!native
--!optimize 2

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Roact = require(ReplicatedStorage.Packages.roact)

local theme = {
	background = Color3.fromRGB(30, 30, 46),
	text = Color3.fromHex("#cdd6f4"),
	holder = Color3.fromRGB(17, 17, 27),
	fill = Color3.fromRGB(255, 255, 255),
	stroke = Color3.fromRGB(49, 50, 68),
	holderStroke = Color3.fromRGB(108, 112, 134),
}

local function ProgressBar(props)
	local function progressToTransparency(v: number)
		local p = math.clamp(v or 0, 0, 1)
		return NumberSequence.new({
			NumberSequenceKeypoint.new(0, 0),
			NumberSequenceKeypoint.new(p, 0),
			NumberSequenceKeypoint.new(p, 1),
			NumberSequenceKeypoint.new(1, 1),
		})
	end

	local gradientTransparency: NumberSequence
	if typeof(props.progress) == "table" and props.progress.map then
		gradientTransparency = props.progress:map(progressToTransparency)
	else
		gradientTransparency = progressToTransparency(props.progress or 0)
	end

	return Roact.createElement("Frame", {
		Name = "ProgressBar",
		AnchorPoint = props.AnchorPoint or Vector2.new(0.5, 1),
		Position = props.Position or UDim2.new(0.5, 0, 1, -32),
		Size = props.Size or UDim2.new(0, 500, 0, 32),
		BackgroundColor3 = theme.background,
		BorderSizePixel = 0,
	}, {
		Label = Roact.createElement("TextLabel", {
			AnchorPoint = Vector2.new(0, 0),
			Position = UDim2.new(0, 16, 0, -32),
			Size = UDim2.new(1, -32, 0, 18),
			BackgroundTransparency = 1,
			Font = Enum.Font.Code,
			Text = props.detail,
			TextColor3 = theme.text,
			TextSize = 18,
			TextXAlignment = Enum.TextXAlignment.Left,
			TextYAlignment = Enum.TextYAlignment.Top,
		}),
		Corner = Roact.createElement("UICorner", {
			CornerRadius = UDim.new(0, 16),
		}),
		Stroke = Roact.createElement("UIStroke", {
			Color = theme.stroke,
			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
			Thickness = 1,
		}),
		FillHolder = Roact.createElement("Frame", {
			Name = "FillHolder",
			AnchorPoint = Vector2.new(0, 1),
			Position = UDim2.new(0, 8, 1, -8),
			Size = UDim2.new(1, -16, 0, 16),
			BackgroundColor3 = theme.holder,
			BorderSizePixel = 0,
		}, {
			Corner = Roact.createElement("UICorner", {
				CornerRadius = UDim.new(0, 8),
			}),
			Stroke = Roact.createElement("UIStroke", {
				Color = theme.holderStroke,
				ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
				Thickness = 1,
			}),
			Fill = Roact.createElement("Frame", {
				AnchorPoint = Vector2.new(0, 0),
				BackgroundColor3 = theme.fill,
				BorderSizePixel = 0,
				Size = UDim2.new(1, 0, 1, 0),
			}, {
				Corner = Roact.createElement("UICorner", {
					CornerRadius = UDim.new(0, 8),
				}),
				Gradient = Roact.createElement("UIGradient", {
					Color = ColorSequence.new({
						ColorSequenceKeypoint.new(0, Color3.fromHex("#f5c2e7")),
						ColorSequenceKeypoint.new(0.5, Color3.fromHex("#cba6f7")),
						ColorSequenceKeypoint.new(1, Color3.fromHex("#89b4fa")),
					}),
					Transparency = gradientTransparency,
					Rotation = 0,
				}),
			}),
		}),
	})
end

return ProgressBar