--#selene: allow(shadowing)
-- Redon Tech Emergency Vehicle Creator, MIT License
local root = script.Parent.Parent.Parent.Parent.Parent.Parent

local Fusion = require(root.Packages.fusion)
local RedonUI = require(root.Packages["redon-ui"])
local types = require(root.Plugin.types)
local chassisHandler = require(root.Plugin.chassisHandler)

local mainSettings = {
	{
		name = "Enabled Effects",
		data = {
			{ index = "shouldChangeNeons", name = "Enable Neon Lights", type = "boolean" },
			{ index = "shouldChangeLights", name = "Enable Light Emitters", type = "boolean" },
			{ index = "shouldChangeLightos", name = "Enable Lightos", type = "boolean" },
			{ index = "shouldChangeParticleEmitters", name = "Enable Particle Emitters", type = "boolean" },
		},
	},
	{
		name = "Light Configuration",
		data = {
			{ index = "partTransparency", name = "Part Transparency", type = "number" },
		},
	},
}

type props = {
	actualTableSize: Fusion.Value<Vector2>,
	currentContent: Fusion.Value<"settings" | "colors" | "light groups">,
	lightSettings: Fusion.Value<chassisHandler.lightSettingsState?>,
	updateCurrentConfiguration: () -> (),
}

local SPRING_SPEED = 20
local SPRING_DAMPING = 0.75
--[[
	Main Settings
	Creates the main settings panel for the light settings page
]]
return function(scope: types.Scope, props: props)
	local currentTheme = RedonUI.theme.theme:now()

	return scope:base {
		ClassName = "ScrollingFrame",
		Size = UDim2.fromScale(1, 0.9162011173), -- 1820, 820
		AnchorPoint = Vector2.new(0.5, 1),
		Position = scope:Spring(
			scope:Computed(function(use)
				local activeContent = use(props.currentContent)
				if activeContent == "settings" then
					return UDim2.fromScale(0.5, 1)
				else
					return UDim2.fromScale(-1, 1)
				end
			end),
			SPRING_SPEED,
			SPRING_DAMPING
		),
		BackgroundTransparency = 1,
		ScrollBarThickness = 3,
		ScrollBarImageColor3 = currentTheme.colors.text,
		TopImage = "rbxasset://textures/ui/Scroll/scroll-middle.png",
		BottomImage = "rbxasset://textures/ui/Scroll/scroll-middle.png",
		AutomaticCanvasSize = Enum.AutomaticSize.Y,
		CanvasSize = UDim2.new(),
		[Fusion.Out "AbsoluteSize"] = props.actualTableSize :: unknown,

		[Fusion.Children] = Fusion.Child {
			scope:New("UIListLayout") {
				SortOrder = Enum.SortOrder.LayoutOrder,
			},

			scope:ForPairs(mainSettings, function(_, scope: typeof(scope), key, value)
				return key,
					scope:base {
						Size = UDim2.fromScale(1, 0),
						AutomaticSize = Enum.AutomaticSize.Y,
						BackgroundTransparency = 1,
						LayoutOrder = key,

						[Fusion.Children] = Fusion.Child {
							scope:New("UIListLayout") {
								SortOrder = Enum.SortOrder.LayoutOrder,
							},

							scope:textLabel {
								Size = scope:Computed(function(use)
									return UDim2.new(1, 0, 0, 0.0914634146 * use(props.actualTableSize).Y)
								end),
								BackgroundColor3 = currentTheme.colors.crust,
								-- BackgroundTransparency = if key % 2 == 0 then 1 else 0,
								BackgroundTransparency = 0,
								Text = value.name,
								FontWeight = Enum.FontWeight.Bold,
								TextXAlignment = Enum.TextXAlignment.Left,
								TextScaled = true,
								MaxTextSize = 30,
								LayoutOrder = 0,

								[Fusion.Children] = {
									scope:New("UIPadding") {
										PaddingLeft = UDim.new(0.0082417582, 0),
									},
								},
							},

							scope:ForPairs(
								value.data,
								function(
									_,
									scope: typeof(scope),
									key: number,
									value: { index: string, name: string, type: string }
								)
									if value.type == "boolean" then
										local isHovered = scope:Value(false)
										local isPushed = scope:Value(false)
										return key,
											scope:base {
												Size = scope:Computed(function(use)
													return UDim2.new(
														1,
														0,
														0,
														0.0914634146 * use(props.actualTableSize).Y
													)
												end),
												BackgroundColor3 = currentTheme.colors.crust,
												BackgroundTransparency = if key % 2 == 0 then 0 else 1,
												LayoutOrder = key,

												[Fusion.Children] = {
													scope:New("UIPadding") {
														PaddingLeft = UDim.new(0.0164835164, 0),
														PaddingRight = UDim.new(0.0164835164, 0),
													},

													scope:baseButton {
														Size = UDim2.fromScale(1, 1),
														BackgroundTransparency = 1,
														ZIndex = 2,

														MouseEnter = function()
															isHovered:set(true)
														end,
														MouseLeave = function()
															isHovered:set(false)
														end,
														MouseButton1Down = function()
															isPushed:set(true)
														end,
														MouseButton1Up = function()
															isPushed:set(false)
														end,

														[Fusion.OnEvent "Activated"] = function()
															local currentLightSettings = scope.peek(props.lightSettings)
															if currentLightSettings then
																local currentOptimization =
																	currentLightSettings.configuration[value.index]
																if currentOptimization then
																	currentOptimization:set(
																		not scope.peek(currentOptimization)
																	)
																end
															end
															props.updateCurrentConfiguration()
														end :: unknown,
													},

													scope:textButton {
														Size = UDim2.fromScale(0.5, 1),
														Text = value.name,
														FontWeight = Enum.FontWeight.Regular,
														TextXAlignment = Enum.TextXAlignment.Left,
														TextScaled = true,
														MaxTextSize = 30,
														BackgroundTransparency = 1,
														TextLabelSize = UDim2.fromScale(1, 1),
														AnimateSize = false,
														TriggerHover = isHovered,
														TriggerPush = isPushed,
													},

													scope:checkBox {
														Size = UDim2.fromScale(0.0274725275, 0.6666666667),
														AnchorPoint = Vector2.new(1, 0.5),
														Position = UDim2.fromScale(1, 0.5),
														BackgroundColor3 = currentTheme.colors.crust,
														CornerRadius = scope:Computed(function(use)
															return UDim.new(
																0,
																0.0121951220 * use(props.actualTableSize).Y
															)
														end),
														Border = 1,
														BorderColor3 = currentTheme.colors.white,
														SelectedColor3 = currentTheme.colors.blue,
														SelectedCheckColor3 = currentTheme.colors.crust,
														Enabled = scope:Computed(function(use)
															local currentLightSettings = use(props.lightSettings)
															return currentLightSettings
																and use(currentLightSettings.configuration[value.index])
														end),
														TriggerHover = isHovered,
														TriggerPush = isPushed,
													},
												},
											}
									else
										local currentLightSettings = scope.peek(props.lightSettings)
										local text = scope:Value(
											currentLightSettings
													and tostring(currentLightSettings.configuration[value.index])
												or "0.011"
										)

										return key,
											scope:base {
												Size = scope:Computed(function(use)
													return UDim2.new(
														1,
														0,
														0,
														0.0914634146 * use(props.actualTableSize).Y
													)
												end),
												BackgroundColor3 = currentTheme.colors.crust,
												BackgroundTransparency = if key % 2 == 0 then 0 else 1,
												LayoutOrder = key,

												[Fusion.Children] = {
													scope:New("UIPadding") {
														PaddingLeft = UDim.new(0.0164835164, 0),
														PaddingRight = UDim.new(0.0164835164, 0),
													},

													scope:textLabel {
														Size = UDim2.fromScale(0.5, 1),
														Text = value.name,
														FontWeight = Enum.FontWeight.Regular,
														TextXAlignment = Enum.TextXAlignment.Left,
														TextScaled = true,
														MaxTextSize = 30,
														BackgroundTransparency = 1,
													},

													scope:textBox {
														Size = UDim2.fromScale(0.0274725275, 0.6666666667),
														AnchorPoint = Vector2.new(1, 0.5),
														Position = UDim2.fromScale(1, 0.5),
														BackgroundColor3 = currentTheme.colors.crust,
														CornerRadius = scope:Computed(function(use)
															return UDim.new(
																0,
																0.0121951220 * use(props.actualTableSize).Y
															)
														end),
														Border = 1,
														Text = text,
														[Fusion.Out "Text"] = text :: unknown,

														[Fusion.OnEvent "FocusLost"] = function()
															local currentLightSettings = scope.peek(props.lightSettings)
															if currentLightSettings then
																local currentConfiguration =
																	currentLightSettings.configuration[value.index]
																if currentConfiguration then
																	local newValue = tonumber(scope.peek(text))
																	if newValue then
																		currentConfiguration:set(newValue)
																	end
																end
															end
															props.updateCurrentConfiguration()
														end,
													},
												},
											}
									end
								end
							),
						},
					}
			end),
		},
	}
end


--#selene: allow(shadowing)
-- Redon Tech Emergency Vehicle Creator, MIT License
local root = script.Parent.Parent.Parent.Parent.Parent

local Fusion = require(root.Packages.fusion)
local RedonUI = require(root.Packages["redon-ui"])
local types = require(root.Plugin.types)
local chassisHandler = require(root.Plugin.chassisHandler)
local log = require(root.Plugin.log)
local popup = require(root.Plugin.Components.popup)
local createChildren = require(script.Parent.createChildren)

local function testFunctionName(name: string, functions: { string }, currentDepth: number): string
	local actualName = if currentDepth == 0 then name else `{name} ({currentDepth})`
	local index = table.find(functions, actualName)
	if index ~= nil then
		return testFunctionName(name, functions, currentDepth + 1)
	end
	return actualName
end

type props = {
	UnsavedChanges: Fusion.Value<boolean>,
	Mode: Fusion.Value<types.mode>,
	CurrentPanel: Fusion.Value<types.mainPanels>,
	CurrentPage: Fusion.Value<types.pages?>,
	CurrentVehicle: Fusion.Value<Model | string?>,
}

export type modifierState = {
	name: Fusion.Value<string>,
	modifiedSirenName: Fusion.Value<string>,
	parentSoundBehavior: Fusion.Value<"Play Parent Sound" | "Plays Simultaneously">,
	behavoir: Fusion.Value<"Play Automatically" | "Require Parent Replay">,
	delay: Fusion.Value<number>,
}

export type sirenState = {
	name: Fusion.Value<string>,
	type: Fusion.Value<"Siren" | "Hold">,
	behavoir: Fusion.Value<"Overrides Other Sounds" | "Plays Simultaneously">,
	keybinds: Fusion.Value<{ Fusion.Value<Enum.KeyCode> }>,
	modifiers: Fusion.Value<{ Fusion.Value<modifierState> }>,
} | {
	name: Fusion.Value<string>,
	type: Fusion.Value<"Modifier">,
	keybinds: Fusion.Value<{ Fusion.Value<Enum.KeyCode> }>,
}

local function decodeState(scope: types.Scope, state: Fusion.Value<any>): any
	local value = scope.peek(state)
	if typeof(value) == "table" then
		local newValue = {}
		for i, v in pairs(value) do
			newValue[i] = decodeState(scope, v)
		end
		return newValue
	end
	return value
end

local function encodeState(scope: types.Scope, value: any): Fusion.Value<any>
	if typeof(value) == "table" then
		local newValue = {}
		for i, v in pairs(value) do
			newValue[i] = encodeState(scope, v)
		end
		return scope:Value(newValue)
	end
	return scope:Value(value)
end

--[[
	Sirens
	Creates the sirens page for the main app
]]
return function(scope: types.Scope, props: props): Fusion.Child
	local currentTheme = RedonUI.theme.theme:now()
	local firstScope = scope:innerScope()

	local currentConfiguration = nil
	local sirens: Fusion.Value<{ sirenState }> = scope:Value({})
	local modifiers: Fusion.Value<{ string }> = scope:Value({})

	scope:Observer(props.CurrentVehicle):onChange(function()
		local currentVehicle = scope.peek(props.CurrentVehicle)
		if typeof(currentVehicle) == "Instance" then
			currentConfiguration = chassisHandler:getConfiguration(currentVehicle)
			if currentConfiguration ~= nil then
				-- sirens:set(currentConfiguration.sirens)
				local newSirens = {}
				for sirenKey, sirenData in currentConfiguration.sirens do
					local newSiren = {} :: sirenState
					for key, value in pairs(sirenData) do
						newSiren[key] = encodeState(firstScope, value)
					end
					table.insert(newSirens, sirenKey, newSiren)
				end
				log.debug(newSirens)
				sirens:set(newSirens)
			end
		end
	end)
	local function updateModifiers()
		local currentSirens = scope.peek(sirens)
		local currentModifiers = {}
		for _, siren in currentSirens do
			if scope.peek(siren.type) == "Modifier" then
				table.insert(currentModifiers, scope.peek(siren.name))
			end
		end
		modifiers:set(currentModifiers)
	end
	scope:Observer(sirens):onChange(updateModifiers)

	local function updateCurrentConfiguration()
		if currentConfiguration ~= nil then
			local assembledSirens: { types.siren } = {}
			for _, siren in scope.peek(sirens) do
				local newSiren = {} :: types.siren
				for key, stateValue in pairs(siren) do
					newSiren[key] = decodeState(firstScope, stateValue)
				end
				table.insert(assembledSirens, newSiren)
			end
			log.debug(assembledSirens)
			if currentConfiguration.sirens ~= assembledSirens then
				props.UnsavedChanges:set(true)
			end
			currentConfiguration.sirens = assembledSirens
		end
	end

	local newSirenName = scope:Value("")
	local actualTableSize = scope:Value(Vector2.one)

	-- 1820, 895
	local content = {
		scope:base {
			Size = UDim2.fromScale(1, 1),
			AnchorPoint = Vector2.new(0.5, 0.5),
			Position = UDim2.fromScale(0.5, 0.5),
			BackgroundTransparency = 1,

			[Fusion.Children] = {
				scope:base {
					Size = UDim2.fromScale(1, 0.0558659218),
					AnchorPoint = Vector2.new(0.5, 0),
					Position = UDim2.fromScale(0.5, 0.0145251397),
					BackgroundTransparency = 1,

					[Fusion.Children] = {
						scope:New("UIListLayout") {
							Padding = UDim.new(0.0164835165, 0),
							FillDirection = Enum.FillDirection.Horizontal,
							HorizontalAlignment = Enum.HorizontalAlignment.Center,
							SortOrder = Enum.SortOrder.LayoutOrder,
						},

						scope:textBox {
							Size = UDim2.fromScale(0.1648351648, 1),
							MaxSize = Vector2.new(300, 50),
							BackgroundColor3 = currentTheme.colors.crust,
							CornerRadius = UDim.new(0.2, 0),
							Border = 1,
							PlaceholderText = "New Siren Name",
							[Fusion.Out "Text"] = newSirenName,
							TextScaled = true,
							MaxTextSize = 30,
							FontWeight = Enum.FontWeight.Regular,
							TextXAlignment = Enum.TextXAlignment.Left,
							LayoutOrder = 1,
							PaddingBottom = UDim.new(0.2, 0),
							PaddingTop = UDim.new(0.2, 0),
							PaddingLeft = UDim.new(0.0333333333, 0),
							PaddingRight = UDim.new(0.0333333333, 0),
						},

						scope:textButton {
							Size = UDim2.fromScale(0.0961538462, 1),
							MaxSize = Vector2.new(175, 50),
							BackgroundColor3 = currentTheme.colors.crust,
							CornerRadius = UDim.new(0.2, 0),
							Border = 2,
							Text = "Add",
							TextScaled = true,
							MaxTextSize = 30,
							FontWeight = Enum.FontWeight.Bold,
							LayoutOrder = 2,
							Reactive = true,

							[Fusion.OnEvent "Activated"] = function()
								log.debug(currentConfiguration)
								if currentConfiguration == nil then
									return
								end
								local newSirenName = scope.peek(newSirenName)
								if newSirenName == "" then
									newSirenName = "Wail"
								end
								local currentSirens = scope.peek(sirens)
								local sirensByName = {}
								for i, siren in currentSirens do
									sirensByName[i] = scope.peek(siren.name)
								end
								newSirenName = testFunctionName(newSirenName, sirensByName, 0)

								local newSirenData = {
									name = firstScope:Value(newSirenName),
									type = firstScope:Value("Siren" :: any),
									behavoir = firstScope:Value("Overrides Other Sounds" :: any),
									keybinds = firstScope:Value({
										firstScope:Value(Enum.KeyCode.R),
										firstScope:Value(Enum.KeyCode.DPadRight),
									}),
									modifiers = firstScope:Value({}),
								}
								table.insert(currentSirens, newSirenData)
								sirens:set(currentSirens)
								updateCurrentConfiguration()
							end,
						},

						scope:textButton {
							Size = UDim2.fromScale(0.0961538462, 1),
							MaxSize = Vector2.new(175, 50),
							BackgroundColor3 = currentTheme.colors.crust,
							CornerRadius = UDim.new(0.2, 0),
							Border = 2,
							Text = "Import",
							TextScaled = true,
							MaxTextSize = 30,
							FontWeight = Enum.FontWeight.Bold,
							LayoutOrder = 3,
							Reactive = true,
						},
					},
				},

				scope:list {
					Size = UDim2.fromScale(1, 0.9162011173), -- 895 -75 total 820
					AnchorPoint = Vector2.new(0.5, 1),
					Position = UDim2.fromScale(0.5, 1),
					BackgroundColor3 = currentTheme.colors.mantle,
					AlternateColor3 = currentTheme.colors.crust,
					RowSize = UDim2.fromScale(1, 0), -- 1820, 75
					PrimaryColor = "Alternate" :: "Alternate",
					CornerRadius = UDim.new(0.0182926829, 0),
					AutomaticSize = Enum.AutomaticSize.Y,
					[Fusion.Out "AbsoluteSize"] = actualTableSize,
					Rows = scope:ForPairs(sirens, function(_, scope: typeof(scope), key: number, value: sirenState)
						local rowSize = scope:Value(75)
						local bg = scope:Spring(scope:Value(1), 10, 1)
						bg:setPosition(0)

						local sirenType = scope:Value(scope.peek(value.type))
						return key,
							scope:base {
								Size = scope:Computed(function(use)
									return UDim2.new(1, 0, 0, (use(rowSize) / 820) * use(actualTableSize).Y)
								end),
								BackgroundColor3 = currentTheme.colors.surface0,
								BackgroundTransparency = bg,

								[Fusion.Children] = createChildren(scope, {
									rowSize = rowSize,
									options = scope:Computed(function(use)
										local options: { createChildren.option } = {
											{
												type = "string",
												value = value.name,
												layoutOrder = 1,
												focusLost = function()
													updateCurrentConfiguration()
													if scope.peek(value.type) == "Modifier" then
														updateModifiers()
													end
												end,
											},
											{
												type = "select",
												value = sirenType,
												layoutOrder = 2,
												options = { "Siren", "Hold", "Modifier" },
												selectionChanged = function()
													if currentConfiguration == nil then
														return
													end
													local newType = scope.peek(sirenType)
													local value = value :: any
													if newType == "Modifier" then
														value.modifiers = nil
														value.behavoir = nil
													else
														value.modifiers = value.modifiers or firstScope:Value({})
														value.behavoir = value.behavoir
															or firstScope:Value("Overrides Other Sounds")
													end
													value.type:set(newType)
													updateCurrentConfiguration()
													if newType == "Modifier" then
														updateModifiers()
													end
												end,
											},
										}

										if use(value.type) ~= "Modifier" then
											table.insert(options, {
												type = "select",
												value = (value :: any).behavoir,
												layoutOrder = 3,
												options = { "Overrides Other Sounds", "Plays Simultaneously" },
												selectionChanged = updateCurrentConfiguration,
											})

											table.insert(options, {
												type = "button",
												text = "Add Modifier",
												layoutOrder = 4000,
												callback = function()
													if
														currentConfiguration == nil
														or scope.peek(value.type) == "Modifier"
													then
														return
													end
													local value = value :: any
													log.debug(value)

													local currentModifiers = scope.peek(modifiers)
													local currentSirenModifiers =
														scope.peek(value.modifiers) :: { Fusion.Value<modifierState> }
													table.insert(
														currentSirenModifiers,
														firstScope:Value({
															name = firstScope:Value(
																currentModifiers[1] or "New Modifier"
															),
															modifiedSirenName = firstScope:Value(
																scope.peek(value.name)
																	.. (currentModifiers[1] or "Unknown")
															),
															parentSoundBehavior = firstScope:Value(
																"Play Parent Sound" :: any
															),
															behavoir = firstScope:Value("Play Automatically" :: any),
															delay = firstScope:Value(0),
														})
													)
													value.modifiers:set(currentSirenModifiers)
													updateCurrentConfiguration()
												end,
											})
										end

										for i, keybind in use(value.keybinds) do
											table.insert(options, {
												type = "keycode",
												value = keybind,
												layoutOrder = i + 3,
												focusLost = updateCurrentConfiguration,
											})
										end

										return options
									end),
									childOptions = scope:Computed(function(use): { createChildren.childOption }?
										if use(value.type) ~= "Modifier" then
											local options = {}

											for i, modifierState: Fusion.Value<modifierState> in
												use((value :: any).modifiers)
											do
												local modifier = scope.peek(modifierState)
												table.insert(options, i, {
													options = {
														{
															type = "select",
															value = modifier.name,
															layoutOrder = 1,
															options = modifiers,
															selectionChanged = updateCurrentConfiguration,
														} :: createChildren.option,
														{
															type = "string",
															value = modifier.modifiedSirenName,
															layoutOrder = 2,
															focusLost = updateCurrentConfiguration,
														},
														{
															type = "select",
															value = modifier.parentSoundBehavior,
															layoutOrder = 3,
															options = {
																"Play Parent Sound",
																"Plays Simultaneously",
															},
															selectionChanged = updateCurrentConfiguration,
														},
														{
															type = "select",
															value = modifier.behavoir,
															layoutOrder = 4,
															options = {
																"Play Automatically",
																"Require Parent Replay",
															},
															selectionChanged = updateCurrentConfiguration,
														},
														{
															type = "number",
															value = modifier.delay,
															layoutOrder = 5,
															focusLost = updateCurrentConfiguration,
														},
													},
													onDelete = function()
														if currentConfiguration == nil then
															return
														end

														popup:addPopup(scope, {
															title = "Delete Modifier",
															description = "Are you sure you want to delete this modifier?\nAll data will be lost.",
															actions = {
																{
																	text = "Cancel",
																	type = "primary",
																	key = 1,
																	callback = function(newPopup)
																		popup:removePopup(newPopup)
																	end,
																	keybind = Enum.KeyCode.Escape,
																},
																{
																	text = "Delete",
																	type = "danger",
																	key = 2,
																	callback = function(newPopup)
																		popup:removePopup(newPopup)
																		local value = value :: any
																		local currentSirenModifiers = scope.peek(
																			value.modifiers
																		) :: {
																			Fusion.Value<
																				modifierState
																			>
																		}
																		table.remove(currentSirenModifiers, i)
																		value.modifiers:set(currentSirenModifiers)
																		updateCurrentConfiguration()
																	end,
																	keybind = Enum.KeyCode.Return,
																},
															},
														})
													end,
												})
											end

											return options
										end

										return
									end),
									actualTableSize = actualTableSize,

									onDelete = function()
										if currentConfiguration == nil then
											return
										end

										popup:addPopup(scope, {
											title = "Delete Siren",
											description = "Are you sure you want to delete this siren?\nAll data will be lost.",
											actions = {
												{
													text = "Cancel",
													type = "primary",
													key = 1,
													callback = function(newPopup)
														popup:removePopup(newPopup)
													end,
													keybind = Enum.KeyCode.Escape,
												},
												{
													text = "Delete",
													type = "danger",
													key = 2,
													callback = function(newPopup)
														popup:removePopup(newPopup)
														local currentSirens = scope.peek(sirens)
														table.remove(currentSirens, key)
														sirens:set(currentSirens)
														updateCurrentConfiguration()
													end,
													keybind = Enum.KeyCode.Return,
												},
											},
										})
									end,
									onDownload = function() end,
								}),
							}
					end),
				},
			},
		},
	}

	return scope:base {
		Name = "Sirens",
		AnchorPoint = Vector2.new(0.5, 0),
		Position = scope:Spring(
			scope:Computed(function(use)
				local currentPage = use(props.CurrentPage)
				if currentPage == "Sirens" then
					return UDim2.fromScale(0.5, 0.0462962963)
				elseif currentPage == "Light Settings" then
					return UDim2.fromScale(-1, 0.0462962963)
				end
				return UDim2.fromScale(1.5, 0.0462962963)
			end),
			20,
			0.75
		),
		Size = UDim2.fromScale(1, 0.9537037037),
		BackgroundColor3 = currentTheme.colors.base,

		[Fusion.Children] = {
			scope:New("UIAspectRatioConstraint") {
				AspectRatio = 1.8640776699,
			},

			scope:New("UIPadding") {
				PaddingTop = UDim.new(0.0231481481, 0),
				PaddingBottom = UDim.new(0.0231481481, 0),
				PaddingLeft = UDim.new(0.0260416667, 0),
				PaddingRight = UDim.new(0.0260416667, 0),
			},

			scope:textLabel {
				Size = UDim2.fromScale(1, 0.0555555556),
				AnchorPoint = Vector2.new(0.5, 0),
				Position = UDim2.fromScale(0.5, 0),
				Text = "Vehicle Sirens",
				FontWeight = Enum.FontWeight.Bold,
				TextScaled = true,
			},

			scope:base {
				Size = UDim2.fromScale(1, 0.9212962963),
				AnchorPoint = Vector2.new(0.5, 1),
				Position = UDim2.fromScale(0.5, 1),
				BackgroundColor3 = currentTheme.colors.mantle,
				CornerRadius = UDim.new(0.0179640719, 0),
				ClipsDescendants = true,

				[Fusion.Children] = content,
			},
		},
	}
end


--#selene: allow(shadowing)
-- Redon Tech Emergency Vehicle Creator, MIT License
local root = script.Parent.Parent.Parent.Parent

local Fusion = require(root.Packages.fusion)
local RedonUI = require(root.Packages["redon-ui"])
local types = require(root.Plugin.types)
local popup = require(root.Plugin.Components.popup)
local chassisHandler = require(root.Plugin.chassisHandler)
local vehicle = require(root.Plugin.vehicle)
local savePopup = require(script.Parent.savePopup)

type props = {
	UnsavedChanges: Fusion.Value<boolean>,
	Mode: Fusion.Value<types.mode>,
	CurrentPanel: Fusion.Value<types.mainPanels>,
	CurrentPage: Fusion.Value<types.pages?>,
	ReturnTo: Fusion.Value<types.returnTo>,
	CurrentVehicle: Fusion.Value<Model | string?>,
	PossibleVehicle: Fusion.Value<Model?>,
	CurrentPattern: Fusion.Value<types.selectedPattern?>,
}

local pageButtons: {
	[types.pages]: {
		panel: types.mainPanels,
		order: number,
		position: Fusion.Value<Vector2>,
		size: Fusion.Value<Vector2>,
	},
} =
	{
		["Functions"] = { panel = "Vehicle Setup", order = 1 },
		["Sirens"] = { panel = "Vehicle Setup", order = 2 },
		["Light Settings"] = { panel = "Vehicle Setup", order = 3 },
		["Flashers"] = { panel = "ELS Setup", order = 1 },
		["Faders"] = { panel = "ELS Setup", order = 2 },
		["Rotators"] = { panel = "ELS Setup", order = 3 },
	}

local SPRING_SPEED = 20
local SPRING_DAMPING = 0.75
--[[
	Topbar
	Creates the topbar for the main app
]]
return function(scope: types.Scope, props: props): Fusion.Child
	local currentTheme = RedonUI.theme.theme:now()
	for _, value in pairs(pageButtons) do
		value.position = scope:Value(Vector2.new(0, 0))
		value.size = scope:Value(Vector2.new(0, 0))
	end

	local savePopup = savePopup(scope, props)

	local topbarSize = scope:Value(Vector2.one)
	local topbarPosition = scope:Value(Vector2.one)
	local selectorSizeAnimation = scope:Spring(
		scope:Computed(function(use)
			local currentPage = use(props.CurrentPage)
			if currentPage == nil then
				return UDim2.new(0, 0, 0, 0)
			end

			local currentSize: Vector2? = use(pageButtons[currentPage :: types.pages].size)
			if currentSize == nil then
				return UDim2.new(0, 0, 0, 0)
			end

			return UDim2.new(0, currentSize.X + 10, 0.2, 0)
		end),
		SPRING_SPEED,
		1
	)
	local selectorPositionAnimation = scope:Spring(
		scope:Computed(function(use)
			local currentPage = use(props.CurrentPage)
			if currentPage == nil then
				return UDim2.new(-1, 0, 0, 0)
			end

			local currentPosition: Vector2? = use(pageButtons[currentPage :: types.pages].position)
			if currentPosition == nil or currentPosition.X == 0 then
				return UDim2.new(-1, 0, 0, 0)
			end

			local baseSize = use(topbarSize)
			if baseSize.X == 0 then
				return UDim2.new(-1, 0, 0, 0)
			end
			return UDim2.new((currentPosition.X / baseSize.X) - (5 / baseSize.X), 0, 0.9, 0)
		end),
		SPRING_SPEED,
		SPRING_DAMPING
	)
	return scope:base {
		Name = "Topbar",
		AnchorPoint = Vector2.new(0, 0),
		Position = UDim2.fromScale(0, 0),
		Size = UDim2.fromScale(1, 0.0462962963),
		BackgroundColor3 = currentTheme.colors.mantle,
		ClipsDescendants = true,
		[Fusion.Out "AbsoluteSize"] = topbarSize :: unknown,
		[Fusion.Out "AbsolutePosition"] = topbarPosition,

		[Fusion.Children] = {
			scope:base {
				Size = UDim2.fromOffset(300, 30),
				AnchorPoint = Vector2.new(1, 0.5),
				Position = UDim2.new(1, -10, 0.5, 0),
				BackgroundTransparency = 1,

				[Fusion.Children] = {
					scope:New("UIListLayout") {
						FillDirection = Enum.FillDirection.Horizontal,
						HorizontalAlignment = Enum.HorizontalAlignment.Right,
						VerticalAlignment = Enum.VerticalAlignment.Center,
						SortOrder = Enum.SortOrder.LayoutOrder,
						Padding = UDim.new(0, 10),
					},

					scope:textButton {
						Size = UDim2.fromOffset(0, 30),
						AutomaticSize = Enum.AutomaticSize.X,
						TextLabelSize = UDim2.fromScale(1, 1),
						TextScaled = true,
						Text = scope:Computed(function(use)
							local baseText = if use(props.CurrentVehicle) == nil then "Custom Export" else "Export"
							return if use(props.UnsavedChanges) == true then `{baseText}*` else baseText
						end),
						BackgroundTransparency = 1,
						TextXAlignment = Enum.TextXAlignment.Right,
						TextColor3 = currentTheme.colors.text,
						FontWeight = Enum.FontWeight.Medium,
						MaxTextSize = 20,
						Reactive = true,
						AnimateSize = false,
						LayoutOrder = 2,
						Visible = scope:Computed(function(use)
							return use(props.CurrentVehicle) ~= nil
						end),

						[Fusion.OnEvent "Activated"] = function()
							popup:addPopup(scope, {
								title = if scope.peek(props.CurrentVehicle) == nil
									then "Custom Code Export (MUST SCRIPT ACTIVATION YOURSELF)"
									else "Export Changes",
								description = if scope.peek(props.CurrentVehicle) == nil
									then "Would you like to do a custom code export.\nTHIS REQUIRES THAT YOU CODE ACTIVATION YOURSELF, USE EDIT/CREATE VEHICLE FROM THE MAIN MENU FOR NO CODE EXPORT"
									else "Would you like to export your changes?",
								actions = {
									{
										text = "Cancel",
										type = "standard",
										key = 1,
										callback = function(newPopup)
											popup:removePopup(newPopup)
										end,
										keybind = Enum.KeyCode.Escape,
									},
									{
										text = "Export",
										type = "primary",
										key = 2,
										callback = function(newPopup)
											popup:removePopup(newPopup)
											local currentVehicle = scope.peek(props.CurrentVehicle)
											if currentVehicle == nil or typeof(currentVehicle) == "string" then
												return
											end
											local saved = chassisHandler:saveConfiguration(currentVehicle)
											if saved == true then
												props.UnsavedChanges:set(false)
											end
										end,
										keybind = Enum.KeyCode.Return,
									},
								},
							})
						end,
					},

					scope:textButton {
						Size = UDim2.fromOffset(175, 30),
						TextLabelSize = UDim2.fromScale(1, 1),
						TextScaled = true,
						Text = "Save/Load",
						BackgroundTransparency = 1,
						TextXAlignment = Enum.TextXAlignment.Right,
						TextColor3 = currentTheme.colors.text,
						FontWeight = Enum.FontWeight.Medium,
						MaxTextSize = 20,
						Reactive = true,
						AnimateSize = false,
						LayoutOrder = 1,

						Visible = scope:Computed(function(use)
							return use(props.CurrentPanel) == "ELS Setup"
						end),

						[Fusion.OnEvent "Activated"] = function()
							local currentPattern = scope.peek(props.CurrentPattern)
							if currentPattern == nil then
								return
							end
							popup:customPopup(scope, savePopup)
						end,
					},
				},
			},

			scope:textButton {
				Size = UDim2.fromOffset(300, 30),
				TextLabelSize = UDim2.fromScale(1, 1),
				AnchorPoint = Vector2.new(0, 0.5),
				Position = UDim2.new(0, 10, 0.5, 0),
				TextScaled = true,
				Text = scope:Computed(function(use)
					local returnTo = use(props.ReturnTo)
					if returnTo == "menu" then
						returnTo = "Main Menu"
					elseif returnTo == "customizer" then
						returnTo = "Customization"
					elseif returnTo == "vehicleSetup" then
						returnTo = "Vehicle Setup"
					end
					return `<- Return To {returnTo}`
				end),
				BackgroundTransparency = 1,
				TextXAlignment = Enum.TextXAlignment.Left,
				TextColor3 = currentTheme.colors.text,
				FontWeight = Enum.FontWeight.Medium,
				MaxTextSize = 20,
				Reactive = true,
				AnimateSize = false,

				[Fusion.OnEvent "Activated"] = function()
					local returnTo = scope.peek(props.ReturnTo)
					if returnTo == "menu" then
						props.Mode:set("menu")
						props.CurrentVehicle:set(nil)
						props.PossibleVehicle:set(nil)
					elseif returnTo == "customizer" then
						local currentVehicle = scope.peek(props.CurrentVehicle)
						if currentVehicle ~= nil and typeof(currentVehicle) == "Instance" then
							if vehicle:isVehicleCustomizable(currentVehicle) == true then
								props.Mode:set("viewport")
								return
							end
						end
						props.Mode:set("menu")
						props.CurrentVehicle:set(nil)
						props.PossibleVehicle:set(nil)
					elseif returnTo == "vehicleSetup" then
						props.CurrentPanel:set("Vehicle Setup")
						props.CurrentPage:set("Functions")
						local currentVehicle = scope.peek(props.CurrentVehicle)
						if currentVehicle ~= nil and typeof(currentVehicle) == "Instance" then
							if vehicle:isVehicleCustomizable(currentVehicle) == true then
								props.ReturnTo:set("customizer")
								return
							end
						end
						props.ReturnTo:set("menu")
					end
				end,
			},

			scope:base {
				ClassName = "ScrollingFrame",
				Name = "Buttons",
				Position = UDim2.fromOffset(310, 0),
				Size = UDim2.new(1, -620, 1, 0),
				BackgroundTransparency = 1,
				CanvasSize = UDim2.new(),
				AutomaticCanvasSize = Enum.AutomaticSize.X,
				ScrollBarThickness = 0,

				[Fusion.Children] = Fusion.Child {
					scope:New("UIListLayout") {
						FillDirection = Enum.FillDirection.Horizontal,
						HorizontalAlignment = Enum.HorizontalAlignment.Center,
						SortOrder = Enum.SortOrder.LayoutOrder,
						Padding = scope:Computed(function(use)
							return UDim.new(0, 0.015625 * use(topbarSize).X)
						end),
					},

					scope:ForPairs(pageButtons, function(_, scope: typeof(scope), key, value)
						local desiredButtonPosition = scope:Value(UDim2.fromOffset(0, 0))
						local animatedButtonPosition = scope:Spring(desiredButtonPosition, 30, 1)
						local isHovered = scope:Value(false)
						return key,
							scope:base {
								Size = UDim2.new(0, 0, 1, -2),
								AutomaticSize = Enum.AutomaticSize.X,
								LayoutOrder = value.order,
								BackgroundTransparency = 1,
								[Fusion.Out "AbsolutePosition"] = value.position :: unknown,
								[Fusion.Out "AbsoluteSize"] = value.size,
								MaxSize = Vector2.new(185, 36),
								Visible = scope:Computed(function(use)
									return use(props.CurrentPanel) == value.panel
								end),

								[Fusion.Children] = {
									scope:textLabel {
										Size = UDim2.fromScale(0, 1),
										ClassName = "TextButton",
										Position = animatedButtonPosition,
										Text = key,
										TextScaled = true,
										AutomaticSize = Enum.AutomaticSize.X,
										TextColor3 = scope:Computed(function(use)
											return if use(props.CurrentPage) == key
												then currentTheme.colors.blue
												else currentTheme.colors.text
										end),
										FontFace = scope:Computed(function(use)
											return if use(props.CurrentPage) == key
												then currentTheme.font[Enum.FontWeight.Bold]
												else currentTheme.font[Enum.FontWeight.Medium]
										end),
										BackgroundTransparency = 1,
										MaxTextSize = 20,

										[Fusion.OnEvent "MouseEnter"] = function()
											desiredButtonPosition:set(UDim2.fromOffset(0, -3))
											isHovered:set(true)
										end,

										[Fusion.OnEvent "MouseLeave"] = function()
											desiredButtonPosition:set(UDim2.fromOffset(0, 0))
											isHovered:set(false)
										end,

										[Fusion.OnEvent "MouseButton1Down"] = function()
											desiredButtonPosition:set(UDim2.fromOffset(0, 3))
										end,

										[Fusion.OnEvent "MouseButton1Up"] = function()
											if scope.peek(isHovered) == true then
												desiredButtonPosition:set(UDim2.fromOffset(0, -3))
											else
												desiredButtonPosition:set(UDim2.fromOffset(0, 0))
											end
										end,

										[Fusion.OnEvent "Activated"] = function()
											props.CurrentPage:set(key :: any)
										end,
									},
								},
							}
					end),
				},
			},

			scope:base {
				CornerRadius = UDim.new(0.5, 0),
				BackgroundColor3 = currentTheme.colors.blue,
				Size = selectorSizeAnimation,
				AnchorPoint = Vector2.new(0, 0),
				Position = selectorPositionAnimation,

				-- [Fusion.Children] = {
				-- 	scope:New("UIScale") { Scale = 1.6666666667 },
				-- },
			},
		},
	}
end


-- Redon Tech Emergency Vehicle Creator, MIT License
local root = script.Parent.Parent.Parent.Parent

local Fusion = require(root.Packages.fusion)
local types = require(root.Plugin.types)
local assets = require(root.Plugin.assets)
local RedonUI = require(root.Packages["redon-ui"])

local pageBase = require(script.Parent.pageBase)
local components = {
	pageBase = pageBase,
}

type props = {
	CurrentPanel: Fusion.Value<types.menuPanels>,
	Version: string,
}

local credits: { { name: string, type: "icon" | "text", description: string?, icon: string?, contrastIcon: string?, content: string? } } =
	{
		{
			type = "icon",
			name = "Parker (parker02311)",
			description = "Owner & Project Maintainer\nBasically created the whole thing",
			icon = assets.images.credits.parker,
		},
		{
			type = "icon",
			name = "Alex (MiataVxbe)",
			description = "Contributor & Admin\nVehicle Contributor",
			icon = assets.images.credits.alex,
		},
		{
			type = "icon",
			name = "RetiredSubaru",
			description = "Contributor\nVehicle Contributor",
			icon = assets.images.credits.subaru,
		},
		{
			type = "icon",
			name = "SillyMeTimbers",
			description = "Contributor\nCode Contributor",
			icon = assets.images.credits.sillyme,
		},
		{
			type = "icon",
			name = "TwrblxDevs",
			description = "Contributor\nCode Contributor",
			icon = assets.images.credits.twrblx,
		},
		{
			type = "icon",
			name = "Fusion",
			description = "Elttob & Contributors\nUI Library used to create plugin",
			icon = assets.images.credits.fusion,
			contrastIcon = assets.images.credits.fusionContrast,
		},
		{
			type = "icon",
			name = "ionicons",
			description = "Ionic & Contributors\nIcons used in the plugin",
			icon = assets.images.credits.ionic,
			contrastIcon = assets.images.credits.ionic,
		},
		{
			type = "text",
			name = "Inspirations & Misc",
			content = [[Slither (Litten's Games) - UI Inspiration
Siren Tool (Dawnstar) - Original Inspiration
EasyLS (EasyLS Studios) - Driving Improvement (v3 wouldn't exist without it)]],
		},
		{
			type = "text",
			name = "Testers",
			content = [[Thank you for helping test the plugin and provide feedback!
Pre-Teaser Testers:
- Ashi_Division
- SnowGlobeYT1
- BoltedChase
- Ryan
- mopsagfh
- NewPlayerqwerty
- Holt_Official

Post-Teaser Testers:
- V4_0Z
- Sam (infinityinnovator)
- Reese (msfsaviator)
- Bacon (ravenpopo)
- DragosThyBeast (dragosofficial)
- Jay (dillpickle2651)
- Canada_Enforcer (calebh6)
- Operator_Ace (berryboyau)
- Phantom81 (fantap.)
- AllStar (litrey_savage)
- coolboyjtuh
- whoreallycaresanymore]],
		},
	}

--[[
	Credits
	Creates a credits page for the main menu
]]
return function(baseScope: types.Scope, props: props)
	local scope = Fusion.innerScope(baseScope, components)
	local currentTheme = RedonUI.theme.theme:now()

	-- Components to put inside the list
	local extraComponents = {}

	for key, value in pairs(credits) do
		extraComponents[key + 1] = scope:base {
			Name = tostring(key),
			Size = UDim2.fromOffset(400, 100),
			AutomaticSize = Enum.AutomaticSize.Y,
			BackgroundTransparency = 1,

			[Fusion.Children] = Fusion.Child {
				scope:New("UIPadding") {
					PaddingTop = UDim.new(0, 10),
					PaddingBottom = UDim.new(0, 10),
					PaddingLeft = UDim.new(0, 10),
					PaddingRight = UDim.new(0, 10),
				},

				scope:textLabel {
					Size = scope:Computed(function()
						if value.type == "icon" then
							return UDim2.new(1, -100, 1, 0)
						else
							return UDim2.fromScale(1, 1)
						end
					end),
					AutomaticSize = Enum.AutomaticSize.Y,
					AnchorPoint = Vector2.new(1, 0),
					Position = UDim2.fromScale(1, 0),
					BackgroundTransparency = 1,

					Text = `{value.name}\n{if value.type == "icon"
						then value.description
						else value.content}`,

					RichText = true,
					TextSize = 20,
					TextWrapped = true,
					FontWeight = Enum.FontWeight.Regular,

					TextYAlignment = Enum.TextYAlignment.Top,
					TextXAlignment = scope:Computed(function()
						if value.type == "icon" then
							return Enum.TextXAlignment.Right
						else
							return Enum.TextXAlignment.Left
						end
					end),
				},

				scope:Computed(function()
					return if value.type == "icon"
						then scope:base {
							Name = "Icon",
							Size = UDim2.fromOffset(80, 80),
							AnchorPoint = Vector2.new(0, 0.5),
							Position = UDim2.fromScale(0, 0.5),
							BackgroundTransparency = 1,

							CornerRadius = UDim.new(0, 15),

							Border = scope:Computed(function()
								return if value.contrastIcon == nil then 2 else 0
							end),
							BorderColor3 = currentTheme.colors.text,
							Shadow = scope:Computed(function()
								return if value.contrastIcon == nil then true else false
							end),
							ShadowColor3 = currentTheme.colors.text,

							[Fusion.Children] = {
								scope:base {
									ClassName = "ImageLabel",
									Name = "ActualImage",
									Size = UDim2.fromScale(1, 1),
									AnchorPoint = Vector2.new(0.5, 0.5),
									Position = UDim2.fromScale(0.5, 0.5),
									BackgroundTransparency = 1,

									Image = scope:Computed(function()
										if currentTheme.colors.white == Color3.new() and value.contrastIcon ~= nil then
											return value.contrastIcon
										else
											return value.icon or ""
										end
									end),
									ScaleType = Enum.ScaleType.Crop,

									CornerRadius = UDim.new(0, 15),
								},
							},
						}
						else nil
				end),
			},
		}
	end

	return scope:pageBase {
		Name = "Credits",
		PrimaryColor = "Primary",
		RowSize = UDim2.fromOffset(400, 0),
		AutomaticSize = Enum.AutomaticSize.Y,

		CurrentPanel = props.CurrentPanel,
		Version = props.Version,

		Rows = extraComponents,
	}
end


-- Redon Tech Emergency Vehicle Creator, MIT License
local root = script.Parent.Parent.Parent.Parent

local Fusion = require(root.Packages.fusion)
local RedonUI = require(root.Packages["redon-ui"])
local types = require(root.Plugin.types)

local pageBase = require(script.Parent.pageBase)
local components = {
	pageBase = pageBase,
}

type props = {
	CurrentPanel: Fusion.Value<types.menuPanels>,
	Version: string,
}

local supportOptions = {
	[1] = {
		name = "YouTube Video",
		description = "This video provides a overview of the entire plugin.",
		link = "https://www.youtube.com/watch?v=NNoIUVLspzc&list=PL7OqW0xeBKZTbk4QMl-6v3V_x11pZBV0W",
	},
	[2] = {
		name = "Discord",
		description = "If you still need help please use our Discord.",
		link = "https://discord.gg/Eb384Xw",
	},
	[3] = {
		name = "Other Support",
		description = "Need to contact us about something else?",
		link = "parker02311@redon.tech",
	},
}

--[[
	Help
	Creates a help page for the main menu
]]
return function(baseScope: types.Scope, props: props)
	local scope = Fusion.innerScope(baseScope, components)
	local currentTheme = RedonUI.theme.theme:now()

	-- Components to put inside the list
	local extraComponents = {
		[1] = scope:textLabel {
			Size = UDim2.fromOffset(400, 10),
			BackgroundTransparency = 1,
			Text = "This plugin is complex but also simple at the same time. We understand that the plugin can be confusing so we have provided some resources to help!",
			TextWrapped = true,
			TextSize = 20,
			AutomaticSize = Enum.AutomaticSize.Y,
			TextYAlignment = Enum.TextYAlignment.Center,
			TextXAlignment = Enum.TextXAlignment.Center,
			FontWeight = Enum.FontWeight.Regular,

			[Fusion.Children] = {
				scope:New("UIPadding") {
					PaddingBottom = UDim.new(0, 10),
				},
			},
		},

		[#supportOptions + 2] = scope:textLabel {
			Size = UDim2.fromOffset(400, 20),
			BackgroundTransparency = 1,
			Text = "(To copy: Highlight the link, press Ctrl + C)",
			TextWrapped = true,
			TextSize = 20,
			AutomaticSize = Enum.AutomaticSize.Y,
			TextYAlignment = Enum.TextYAlignment.Center,
			TextXAlignment = Enum.TextXAlignment.Center,
			FontWeight = Enum.FontWeight.Regular,

			[Fusion.Children] = {
				scope:New("UIPadding") {
					PaddingTop = UDim.new(0, 10),
				},
			},
		},
	}

	for key, value in pairs(supportOptions) do
		local CursorPosition = scope:Value(-1)
		local SelectionStart = scope:Value(-1)
		extraComponents[key + 1] = scope:base {
			Name = tostring(key),
			Size = UDim2.fromOffset(400, 122),
			AutomaticSize = Enum.AutomaticSize.Y,
			BackgroundTransparency = 1,

			[Fusion.Children] = {
				scope:New("UIPadding") {
					PaddingTop = UDim.new(0, 10),
					PaddingBottom = UDim.new(0, 10),
				},

				scope:textLabel {
					Name = "Title",
					Size = UDim2.fromOffset(380, 30),
					AnchorPoint = Vector2.new(0.5, 0),
					Position = UDim2.new(0.5, 0, 0, 0),
					Text = value.name,
					TextSize = 30,
					TextXAlignment = Enum.TextXAlignment.Center,
					FontWeight = Enum.FontWeight.Medium,
				},

				scope:textLabel {
					Name = "Description",
					Size = UDim2.fromOffset(380, 0),
					AnchorPoint = Vector2.new(0.5, 0),
					Position = UDim2.new(0.5, 0, 0, 31),
					AutomaticSize = Enum.AutomaticSize.Y,
					Text = value.description,
					TextSize = 20,
					TextWrapped = true,
					TextXAlignment = Enum.TextXAlignment.Left,
					FontWeight = Enum.FontWeight.Regular,

					[Fusion.Children] = {
						scope:New("UIPadding") {
							PaddingBottom = UDim.new(0, 53),
						},
					},
				},

				scope:textBox {
					Name = "Link",
					Size = UDim2.fromOffset(380, 42),
					AnchorPoint = Vector2.new(0.5, 1),
					Position = UDim2.new(0.5, 0, 1, 0),
					Text = value.link,
					TextScaled = true,
					TextXAlignment = Enum.TextXAlignment.Left,
					FontWeight = Enum.FontWeight.Regular,
					ClearTextOnFocus = false,
					TextEditable = false,
					CursorPosition = CursorPosition,
					SelectionStart = SelectionStart,
					BackgroundColor3 = currentTheme.colors.crust,
					Border = 1,
					CornerRadius = UDim.new(0, 10),
					MaxTextSize = 25,

					[Fusion.OnEvent "Focused"] = function()
						task.wait(0.1)
						SelectionStart:set(0)
						CursorPosition:set(#value.link + 1)
					end :: unknown,

					[Fusion.OnEvent "FocusLost"] = function()
						CursorPosition:set(-1)
						SelectionStart:set(-1)
					end,
				},
			},
		}
	end

	return scope:pageBase {
		Name = "Help",
		PrimaryColor = "Primary",
		RowSize = UDim2.fromOffset(400, 0),
		AutomaticSize = Enum.AutomaticSize.Y,

		CurrentPanel = props.CurrentPanel,
		Version = props.Version,

		Rows = extraComponents,
	}
end


-- Redon Tech Emergency Vehicle Creator, MIT License
local root = script.Parent.Parent.Parent.Parent
local plugin = root:FindFirstAncestorWhichIsA("Plugin")

local Selection = game:GetService("Selection")

local Fusion = require(root.Packages.fusion)
local RedonUI = require(root.Packages["redon-ui"])
local types = require(root.Plugin.types)
local assets = require(root.Plugin.assets)
local vehicle = require(root.Plugin.vehicle)
local version = require(root.Plugin.version)

type props = {
	CurrentPanel: Fusion.Value<types.menuPanels>,
	CurrentVehicle: Fusion.Value<Instance | string?>,
	PossibleVehicle: Fusion.Value<Instance?>,
	Mode: Fusion.Value<types.mode>,
}

local secondaryButtons: { [types.menuPanels]: string } = {
	["Settings"] = assets.images.home.settings,
	["Help"] = assets.images.home.help,
	["Credits"] = assets.images.home.credits,
}

--[[
	Home
	Creates the home page for the main menu
]]
return function(scope: types.Scope, props: props): Fusion.Child
	local currentTheme = RedonUI.theme.theme:now()

	local currentSelection: Fusion.Value<Instance?> = scope:Value(nil)

	local selectionConnection: RBXScriptConnection? = nil
	local function listenForSelection()
		if selectionConnection ~= nil then
			selectionConnection:Disconnect()
			selectionConnection = nil
		end

		currentSelection:set(Selection:Get()[1])
		selectionConnection = Selection.SelectionChanged:Connect(function()
			currentSelection:set(Selection:Get()[1])
		end)
	end
	local function checkIfEnabled()
		local enabled = scope.peek(props.CurrentPanel) == "Home"
		if enabled then
			listenForSelection()
		elseif selectionConnection ~= nil then
			selectionConnection:Disconnect()
		end
	end
	scope:Observer(props.CurrentPanel):onChange(checkIfEnabled)
	checkIfEnabled()

	local isOutdated, failedCheck = version:isOutdated()
	return scope:base {
		Name = "Home",
		AnchorPoint = Vector2.new(0.5, 0.5),
		Position = UDim2.fromScale(0.5, 0.5),
		Size = UDim2.fromScale(1, 1),
		BackgroundTransparency = 1,
		-- Visible = scope:Computed(function(use)
		-- 	local enabled = use(props.CurrentPanel) == "Home"
		-- 	if enabled then
		-- 		listenForSelection()
		-- 	elseif selectionConnection ~= nil then
		-- 		selectionConnection:Disconnect()
		-- 	end
		-- 	return enabled
		-- end),

		[Fusion.Children] = Fusion.Child {
			scope:textLabel {
				Name = "Title",
				AnchorPoint = Vector2.new(0.5, 0),
				Position = UDim2.new(0.5, 0, 0, 10),
				Size = UDim2.fromOffset(400, 150),

				Text = "Emergency Vehicle Creator\nV3",
				FontWeight = Enum.FontWeight.Medium,
				TextScaled = true,

				TextYAlignment = Enum.TextYAlignment.Top,
			},

			scope:textLabel {
				Name = "VehicleSelection",
				AnchorPoint = Vector2.new(0.5, 0),
				Position = UDim2.new(0.5, 0, 0, 185),
				Size = UDim2.fromOffset(400, 36),

				Text = scope:Computed(function(use)
					local selection = use(currentSelection)
					if selection == nil then
						return "Select a Vehicle"
					end
					return `Selecting {selection.Name}`
				end),
				TextColor3 = scope:Computed(function(use)
					local selection = use(currentSelection)
					if selection ~= nil and vehicle:isValidVehicle(selection) == false then
						return currentTheme.colors.peach
					end
					return currentTheme.colors.text
				end),
				FontWeight = Enum.FontWeight.Bold,
				TextScaled = true,
				MaxTextSize = 30,
			},

			scope:textButton {
				Name = "CreateVehicle",
				AnchorPoint = Vector2.new(0.5, 0),
				Position = UDim2.new(0.5, 0, 0, 271),
				Size = UDim2.fromOffset(350, 80),
				BackgroundColor3 = Color3.new(1, 1, 1),
				Gradient = ColorSequence.new(currentTheme.colors.sky, currentTheme.colors.sapphire),
				BorderColor3 = currentTheme.colors.text,
				Border = 3,
				CornerRadius = UDim.new(0, 25),

				Text = scope:Computed(function(use)
					local selection = use(currentSelection)
					if selection ~= nil and vehicle:isValidVehicle(selection) ~= false then
						return "Edit Vehicle"
					end
					return "Create Vehicle"
				end),
				FontWeight = Enum.FontWeight.Bold,
				TextSize = 40,
				TextColor3 = currentTheme.colors.mantle,

				Reactive = true,
				ButtonGlow = true,
				ButtonGlowColor3 = if currentTheme.colors.white == Color3.new(1, 1, 1)
					then currentTheme.colors.text
					else currentTheme.colors.base,
				Shadow = true,
				ShadowColor3 = currentTheme.colors.sky,

				[Fusion.OnEvent "Activated"] = function()
					local selection = scope.peek(currentSelection)
					if selection == nil or vehicle:isValidVehicle(selection) == false then
						props.CurrentPanel:set("Vehicle")
					elseif vehicle:isVehicleCustomizable(selection) == true then
						props.CurrentVehicle:set(selection)
						props.Mode:set("viewport")
						Selection:Set({}) -- Deselect the vehicle, so it doesn't get in the way
						plugin:Activate(true) -- Disable tools so it doesn't get in the way
					else
						props.CurrentVehicle:set(nil)
						props.PossibleVehicle:set(selection)
						props.Mode:set("main")
					end
				end,
			},

			scope:textButton {
				Name = "Continue",
				AnchorPoint = Vector2.new(0.5, 0),
				Position = UDim2.new(0.5, 0, 0, 401),
				Size = UDim2.fromOffset(350, 80),
				BackgroundColor3 = Color3.new(1, 1, 1),
				Gradient = ColorSequence.new(currentTheme.colors.sky, currentTheme.colors.sapphire),
				BorderColor3 = currentTheme.colors.text,
				Border = 3,
				CornerRadius = UDim.new(0, 25),

				Text = "Continue Without",
				FontWeight = Enum.FontWeight.Bold,
				TextSize = 40,
				TextColor3 = currentTheme.colors.mantle,

				Reactive = true,
				ButtonGlow = true,
				ButtonGlowColor3 = if currentTheme.colors.white == Color3.new(1, 1, 1)
					then currentTheme.colors.text
					else currentTheme.colors.base,
				Shadow = true,
				ShadowColor3 = currentTheme.colors.sky,

				[Fusion.OnEvent "Activated"] = function()
					props.CurrentVehicle:set(nil)
					props.PossibleVehicle:set(nil)
					props.Mode:set("main")
				end,
			},

			--selene: allow(shadowing)
			scope:ForValues({ 231, 361 }, function(_, scope: typeof(scope), value: number)
				return scope:textLabel {
					Name = "or",
					AnchorPoint = Vector2.new(0.5, 0),
					Position = UDim2.new(0.5, 0, 0, value),
					Size = UDim2.fromOffset(400, 30),

					Text = "or",
					FontWeight = Enum.FontWeight.Regular,
					TextSize = 25,

					Visible = if value == 231
						then scope:Computed(function(use)
							local selection = use(currentSelection)
							return selection == nil or vehicle:isValidVehicle(selection) == false
						end)
						else true,
				}
			end),

			scope:base {
				Name = "SecondaryButtons",
				AnchorPoint = Vector2.new(0.5, 0),
				Position = UDim2.new(0.5, 0, 0, 531),
				Size = UDim2.fromOffset(350, 80),
				BackgroundTransparency = 1,

				[Fusion.Children] = Fusion.Child {
					scope:New("UIListLayout") {
						Padding = UDim.new(0, 55),
						FillDirection = Enum.FillDirection.Horizontal,
						HorizontalAlignment = Enum.HorizontalAlignment.Center,
						SortOrder = Enum.SortOrder.LayoutOrder,
					},

					-- selene: allow(shadowing)
					scope:ForPairs(secondaryButtons, function(_, scope: typeof(scope), panel, icon)
						return panel,
							scope:iconButton {
								Name = panel,
								Size = UDim2.fromOffset(80, 80),
								Image = icon,
								ImageColor3 = currentTheme.colors.text,
								BackgroundColor3 = currentTheme.colors.crust,
								Border = 3,
								BorderColor3 = currentTheme.colors.text,
								Reactive = true,
								CornerRadius = UDim.new(0, 25),
								LayoutOrder = if panel == "Settings" then 1 elseif panel == "Help" then 2 else 3,
								Shadow = true,
								ShadowColor3 = currentTheme.colors.crust,

								[Fusion.OnEvent "Activated"] = function()
									props.CurrentPanel:set(panel :: types.menuPanels)
								end,
							}
					end),
				},
			},

			scope:base {
				Name = "VersionWarning",
				AnchorPoint = Vector2.new(0.5, 1),
				Position = UDim2.new(0.5, 0, 1, -41),
				Size = UDim2.fromOffset(400, 73),
				BackgroundTransparency = 1,
				Visible = isOutdated or failedCheck,

				[Fusion.Children] = {
					scope:textLabel {
						Name = "WARNING",
						AnchorPoint = Vector2.new(0.5, 0),
						Position = UDim2.fromScale(0.5, 0),
						Size = UDim2.fromOffset(400, 30),

						Text = "WARNING!",
						FontWeight = Enum.FontWeight.Regular,
						TextSize = 30,
						TextColor3 = currentTheme.colors.peach,
					},

					scope:textLabel {
						Name = "Version",
						AnchorPoint = Vector2.new(0.5, 0),
						Position = UDim2.new(0.5, 0, 0, 37),
						Size = UDim2.fromOffset(400, 60),

						Text = if failedCheck
							then "The plugin was unable to check for the latest version of the plugin. Please enable HTTP requests using manage plugins."
							else `You are running an outdated version of the plugin, please update to the latest version ({version.latestVersion or "Unknown Error Occurred"}) to ensure a great experience!`,
						FontWeight = Enum.FontWeight.Regular,
						TextSize = 20,
						TextWrapped = true,
						TextColor3 = currentTheme.colors.text,
					},
				},
			},
		},
	}
end


-- Redon Tech Emergency Vehicle Creator, MIT License
local root = script.Parent.Parent.Parent

local Fusion = require(root.Packages.fusion)
local RedonUI = require(root.Packages["redon-ui"])
local types = require(root.Plugin.types)

local widget = require(script.Parent.base.widget)
local components = {
	widget = widget,
}

local home = require(script.home)
local help = require(script.help)
local credits = require(script.credits)
local settings = require(script.settings)
local vehicle = require(script.vehicle)
local scriptInjectionRequired = require(script.scriptInjectionRequired)
local panels: { [number]: (scope: types.Scope, props: any) -> Fusion.Child } = {
	[1] = home,
	[2] = help,
	[3] = credits,
	[4] = settings,
	[5] = vehicle,
	[6] = scriptInjectionRequired,
}
local panelByName = {
	Home = 1,
	Help = 2,
	Credits = 3,
	Settings = 4,
	Vehicle = 5,
	["Permission Needed"] = 6,
}

type props = {
	Name: string,
	Version: string,

	Enabled: Fusion.UsedAs<boolean>,
	Mode: Fusion.UsedAs<types.mode>,
	CurrentVehicle: Fusion.Value<Model | string?>,
	PossibleVehicle: Fusion.Value<Model?>,
}

--[[
	Menu
	Creates the main menu for the plugin
]]
return function(baseScope: types.Scope, props: props)
	local scope = Fusion.innerScope(baseScope, components)
	local currentTheme = RedonUI.theme.theme:now()

	local currentPanel = scope:Value("Home")
	local lastPanelIndex = scope:Value(1)
	local currentPanelIndex = scope:Value(1)
	scope:Observer(currentPanel):onChange(function()
		local newPanel = scope.peek(currentPanel)
		local newIndex = panelByName[newPanel]
		local currentIndex = scope.peek(currentPanelIndex)
		lastPanelIndex:set(currentIndex)
		currentPanelIndex:set(newIndex)
	end)

	return scope:widget {
		pluginGuiId = `{props.Name}_Menu`,
		InitialDockState = Enum.InitialDockState.Float,
		InitialEnabled = false,
		MinHeight = 450,
		MinWidth = 240,
		FloatingYSize = 450,
		FloatingXSize = 240,
		InitialEnabledShouldOverrideRestore = true,

		Title = scope:Computed(function(use)
			return `EVC {use(currentPanel)} ({use(props.Version)})`
		end),

		Enabled = scope:Computed(function(use)
			return use(props.Enabled) == true and use(props.Mode) == "menu"
		end),

		[Fusion.Children] = {
			scope:base {
				Name = "Main",
				AnchorPoint = Vector2.new(0.5, 0.5),
				Position = UDim2.fromScale(0.5, 0.5),
				Size = UDim2.fromScale(1, 1),
				BackgroundColor3 = currentTheme.colors.base,

				[Fusion.Children] = {
					scope:New("Frame") {
						Name = "Container",
						AnchorPoint = Vector2.new(0.5, 0.5),
						Position = UDim2.fromScale(0.5, 0.5),
						Size = UDim2.fromOffset(400, 750),
						BackgroundTransparency = 1,
						ClipsDescendants = true,

						[Fusion.Children] = Fusion.Child {
							scope:New("UIScale") { Scale = 0.6 },

							-- selene: allow(shadowing)
							scope:ForPairs(panels, function(_, scope: typeof(scope), key, panel)
								return key,
									scope:base {
										Name = tostring(key),
										Size = UDim2.fromScale(1, 1),
										Position = scope:Spring(
											scope:Computed(function(use)
												local currentIndex = use(currentPanelIndex)
												if currentIndex == key then
													return UDim2.fromScale(0, 0)
												elseif currentIndex > key then
													return UDim2.fromScale(-1, 0)
												else
													return UDim2.fromScale(1, 0)
												end
											end),
											20,
											0.75
										),
										Visible = scope:Computed(function(use)
											return use(currentPanelIndex) == key or use(lastPanelIndex) == key
										end),
										BackgroundTransparency = 1,

										[Fusion.Children] = {
											panel(scope, {
												CurrentPanel = currentPanel,
												Version = props.Version,
												CurrentVehicle = props.CurrentVehicle,
												PossibleVehicle = props.PossibleVehicle,
												Mode = props.Mode,
											}),
										},
									}
							end),
						},
					},
				},
			},

			scope:textLabel {
				Name = "Version",
				AnchorPoint = Vector2.new(0.5, 1),
				Position = UDim2.fromScale(0.5, 1),
				Size = UDim2.fromOffset(240, 10),
				BackgroundTransparency = 1,

				Text = `Version {props.Version}`,
				FontWeight = Enum.FontWeight.Regular,
				TextSize = 9,
			},
		},
	}
end


-- Redon Tech Emergency Vehicle Creator, MIT License
local root = script.Parent.Parent.Parent.Parent

local Fusion = require(root.Packages.fusion)
local RedonUI = require(root.Packages["redon-ui"])
local types = require(root.Plugin.types)

type props = {
	Name: string,

	PrimaryColor: Fusion.UsedAs<"Primary" | "Alternate">?,
	RowSize: Fusion.UsedAs<UDim2>,
	Rows: Fusion.UsedAs<{ [number]: Fusion.Child | string }>,
	AutomaticSize: Fusion.UsedAs<Enum.AutomaticSize>?,

	CurrentPanel: Fusion.Value<types.menuPanels>,
}

--[[
	Page Base
	Creates a base page for the main menu
	the home page does not descend from this

	Creates:
		- Title
		- Content
		- GoBack
		- Version
]]
return function(scope: types.Scope, props: props): Fusion.Child
	local currentTheme = RedonUI.theme.theme:now()
	return scope:base {
		Name = props.Name,
		AnchorPoint = Vector2.new(0.5, 0.5),
		Position = UDim2.fromScale(0.5, 0.5),
		Size = UDim2.fromScale(1, 1),
		BackgroundTransparency = 1,
		-- Visible = scope:Computed(function(use)
		-- 	return use(props.CurrentPanel) == use(props.Name)
		-- end),

		[Fusion.Children] = {
			scope:textLabel {
				Name = "Title",
				AnchorPoint = Vector2.new(0.5, 0),
				Position = UDim2.new(0.5, 0, 0, 10),
				Size = UDim2.fromOffset(400, 48),

				Text = props.Name,
				FontWeight = Enum.FontWeight.Bold,
				TextScaled = true,

				TextYAlignment = Enum.TextYAlignment.Top,
			},

			scope:list {
				Name = "Content",
				Size = UDim2.fromOffset(400, 567),
				AnchorPoint = Vector2.new(0.5, 1),
				Position = UDim2.new(0.5, 0, 1, -100),
				BackgroundColor3 = currentTheme.colors.base,
				AlternateColor3 = currentTheme.colors.mantle,
				RowSize = props.RowSize,
				Rows = props.Rows,
				PrimaryColor = props.PrimaryColor,
				AutomaticSize = props.AutomaticSize,
				CanvasGroup = false,
			},

			scope:textButton {
				Name = "GoBack",
				AnchorPoint = Vector2.new(0.5, 1),
				Position = UDim2.new(0.5, 0, 1, -25),
				Size = UDim2.fromOffset(350, 50),
				BackgroundColor3 = currentTheme.colors.crust,
				Border = 3,
				CornerRadius = UDim.new(0, 15),
				Text = "Go Back",
				FontWeight = Enum.FontWeight.Medium,
				Shadow = true,
				ShadowColor3 = currentTheme.colors.crust,
				TextSize = 35,
				Reactive = true,

				[Fusion.OnEvent "Activated"] = function()
					props.CurrentPanel:set("Home")
				end,
			},
		},
	}
end


-- Redon Tech Emergency Vehicle Creator, MIT License
local root = script.Parent.Parent.Parent.Parent
local plugin = root:FindFirstAncestorWhichIsA("Plugin")

local Fusion = require(root.Packages.fusion)
local RedonUI = require(root.Packages["redon-ui"])
local types = require(root.Plugin.types)

type props = {
	CurrentPanel: Fusion.Value<types.menuPanels>,
}

local function checkPermission()
	local success = pcall(function()
		local tempScript = Instance.new("Script")
		tempScript.Name = "ScriptInjection Test, you can safely delete this"
		tempScript.Parent = workspace
		tempScript:Destroy()
	end)
	return success
end

--[[
	Script Injection Required
	Creates the popup asking for script injection
]]
return function(scope: types.Scope, props: props): Fusion.Child
	local currentTheme = RedonUI.theme.theme:now()

	local hasAlreadyAsked = scope:Value(false)
	local success, data = pcall(function()
		return plugin:GetSetting("RT_EVC_ScriptInjection")
	end)
	if success and data == true then
		hasAlreadyAsked:set(true)
		if checkPermission() then
			props.CurrentPanel:set("Home")
		else
			props.CurrentPanel:set("Permission Needed")
		end
	else
		props.CurrentPanel:set("Permission Needed")
	end

	return scope:base {
		Name = "Permission Needed",
		AnchorPoint = Vector2.new(0.5, 0.5),
		Position = UDim2.fromScale(0.5, 0.5),
		Size = UDim2.fromScale(1, 1),
		BackgroundTransparency = 1,

		[Fusion.Children] = {
			scope:textLabel {
				Name = "Title",
				AnchorPoint = Vector2.new(0.5, 0),
				Position = UDim2.new(0.5, 0, 0, 10),
				Size = UDim2.fromOffset(400, 48),

				Text = "Permission Needed",
				FontWeight = Enum.FontWeight.Bold,
				TextScaled = true,

				TextYAlignment = Enum.TextYAlignment.Top,
			},

			scope:textLabel {
				Name = "Content",
				Size = UDim2.fromOffset(400, 567),
				AnchorPoint = Vector2.new(0.5, 1),
				Position = UDim2.new(0.5, 0, 1, -100),
				Text = scope:Computed(function(use)
					local mainContent = [[
Emergency Vehicle Creator relies heavily on script injection to work properly.
This sounds scary, but it's a common practice in Roblox Studio plugins.

Why we need it:
- To insert vehicles from the vehicle creator
- To create and update the Emergency Vehicle Handler for your vehicles
- To allow for downloading files all across the plugin
                    ]]

					return if use(hasAlreadyAsked)
						then mainContent .. [[

You have already requested script injection.
This means that you have not given permission to the plugin.
Please use manage plugins to enable the permission then click the button below.
]]
						else mainContent .. [[

Please click the button below to request script injection.
This will open a dialog asking for permission to inject scripts.
]]
				end),
				FontWeight = Enum.FontWeight.Medium,
				TextScaled = true,
				TextXAlignment = Enum.TextXAlignment.Left,
				TextYAlignment = Enum.TextYAlignment.Top,

				[Fusion.Children] = {
					scope:New("UIPadding") {
						PaddingLeft = UDim.new(0, 10),
						PaddingRight = UDim.new(0, 5),
					},
				},
			},

			scope:textButton {
				Name = "Request",
				AnchorPoint = Vector2.new(0.5, 1),
				Position = UDim2.new(0.5, 0, 1, -25),
				Size = UDim2.fromOffset(350, 50),
				BackgroundColor3 = Color3.new(1, 1, 1),
				Gradient = ColorSequence.new(currentTheme.colors.sky, currentTheme.colors.sapphire),
				Border = 3,
				CornerRadius = UDim.new(0, 15),
				Text = scope:Computed(function(use)
					return if use(hasAlreadyAsked) then "Check Again" else "Request Script Injection"
				end),
				FontWeight = Enum.FontWeight.Medium,
				TextSize = 30,
				TextColor3 = currentTheme.colors.mantle,
				Reactive = true,
				ButtonGlow = true,
				ButtonGlowColor3 = if currentTheme.colors.white == Color3.new(1, 1, 1)
					then currentTheme.colors.text
					else currentTheme.colors.base,
				Shadow = true,
				ShadowColor3 = currentTheme.colors.sky,

				[Fusion.OnEvent "Activated"] = function()
					local permission = checkPermission()
					plugin:SetSetting("RT_EVC_ScriptInjection", permission)
					hasAlreadyAsked:set(true)
					if permission then
						props.CurrentPanel:set("Home")
					end
				end,
			},
		},
	}
end


-- Redon Tech Emergency Vehicle Creator, MIT License
local root = script.Parent.Parent.Parent.Parent

local Fusion = require(root.Packages.fusion)
local RedonUI = require(root.Packages["redon-ui"])
local types = require(root.Plugin.types)
local settings = require(root.Plugin.settings)

local pageBase = require(script.Parent.pageBase)
local components = {
	pageBase = pageBase,
}

type props = {
	CurrentPanel: Fusion.Value<types.menuPanels>,
	Version: string,
}

--[[
	Settings
	Creates a settings page for the main menu
]]
return function(baseScope: types.Scope, props: props)
	local scope = Fusion.innerScope(baseScope, components)
	local currentTheme = RedonUI.theme.theme:now()

	-- Components to put inside the list
	local extraComponents = {}

	for key, valueData in pairs(settings.valueData) do
		local setting = settings.values[valueData.key] :: Fusion.Value<any>
		extraComponents[key + 1] = scope:base {
			Name = tostring(key),
			Size = UDim2.fromOffset(400, 100),
			AutomaticSize = Enum.AutomaticSize.Y,
			BackgroundTransparency = 1,

			[Fusion.Children] = Fusion.Child {
				scope:New("UIPadding") {
					PaddingTop = UDim.new(0, 10),
					PaddingBottom = UDim.new(0, 10),
					PaddingLeft = UDim.new(0, 10),
					PaddingRight = UDim.new(0, 10),
				},

				scope:textLabel {
					Size = scope:Computed(function()
						if valueData.type == "boolean" then
							return UDim2.new(1, -52, 1, 0)
						else
							return UDim2.new(1, -160, 1, 0)
						end
					end),
					AutomaticSize = Enum.AutomaticSize.Y,
					BackgroundTransparency = 1,

					Text = `<font weight="medium" size="30">{valueData.title}</font>\n{valueData.description}`,

					RichText = true,
					TextSize = 20,
					TextWrapped = true,
					FontWeight = Enum.FontWeight.Regular,

					TextYAlignment = Enum.TextYAlignment.Top,
					TextXAlignment = Enum.TextXAlignment.Left,
				},

				scope:Computed(function()
					return if valueData.type == "boolean"
						then scope:checkBox {
							Size = UDim2.fromOffset(42, 42),
							Position = UDim2.fromScale(1, 0.5),
							AnchorPoint = Vector2.new(1, 0.5),
							BackgroundColor3 = currentTheme.colors.crust,
							CornerRadius = UDim.new(0, 10),
							Border = 1,
							BorderColor3 = currentTheme.colors.white,
							SelectedColor3 = currentTheme.colors.blue,
							SelectedCheckColor3 = currentTheme.colors.crust,
							Reactive = true,

							Enabled = setting,

							[Fusion.OnEvent "Activated"] = function()
								setting:set(not scope.peek(setting))
							end,
						}
						else scope:dropdown {
							Size = UDim2.fromOffset(150, 42),
							Position = UDim2.new(1, 0, 0, 29),
							AnchorPoint = Vector2.new(1, 0),
							BackgroundColor3 = currentTheme.colors.crust,
							CornerRadius = UDim.new(0, 10),
							Border = 1,
							BorderColor3 = currentTheme.colors.white,
							DropdownHeight = 150,
							Reactive = true,
							DropdownYOffset = UDim.new(0, 34),
							ScaleChoicesUpBy = 1.7,

							Options = valueData.type,
							Text = setting,
							TextScaled = true,
							AnimateSize = false,

							OnOptionSelected = function(_, value)
								setting:set(value)
							end,
						}
				end),
			},
		}
	end

	return scope:pageBase {
		Name = "Settings",
		PrimaryColor = "Primary",
		RowSize = UDim2.fromOffset(400, 0),
		AutomaticSize = Enum.AutomaticSize.Y,

		CurrentPanel = props.CurrentPanel,
		Version = props.Version,

		Rows = extraComponents,
	}
end


-- Redon Tech Emergency Vehicle Creator, MIT License
local root = script.Parent.Parent.Parent.Parent

local Fusion = require(root.Packages.fusion)
local types = require(root.Plugin.types)
local vehicle = require(root.Plugin.vehicle)
local assets = require(root.Plugin.assets)

local pageBase = require(script.Parent.pageBase)
local components = {
	pageBase = pageBase,
}

type props = {
	CurrentPanel: Fusion.Value<types.menuPanels>,
	Version: string,
	CurrentVehicle: Fusion.Value<Instance | string?>,
	Mode: Fusion.Value<types.mode>,
}

--[[
	Vehicle
	Creates a vehicle page for the main menu
]]
return function(baseScope: types.Scope, props: props)
	local scope = Fusion.innerScope(baseScope, components)

	-- Components to put inside the list
	local extraComponents = {}

	for key, value in pairs(vehicle.vehicles) do
		local isHovered = scope:Value(false)
		extraComponents[value.order] = scope:base {
			ClassName = "TextButton",
			Name = key,
			Size = UDim2.fromOffset(400, 100),
			AutomaticSize = Enum.AutomaticSize.Y,
			BackgroundTransparency = 1,
			Text = "",

			[Fusion.Children] = {
				scope:New("UIPadding") {
					PaddingTop = UDim.new(0, 10),
					PaddingBottom = UDim.new(0, 10),
					PaddingLeft = UDim.new(0, 10),
					PaddingRight = UDim.new(0, 10),
				},

				scope:base {
					ClassName = "ImageLabel",
					Size = UDim2.fromOffset(80, 80),
					Position = UDim2.fromScale(0, 0.5),
					AnchorPoint = Vector2.new(0, 0.5),
					Image = value.icon,
					BackgroundTransparency = 1,
					ScaleType = Enum.ScaleType.Crop,
				},

				scope:textLabel {
					AnchorPoint = Vector2.new(1, 0),
					Position = UDim2.new(1, -52, 0, 0),
					Size = UDim2.new(1, -145, 1, 0),
					AutomaticSize = Enum.AutomaticSize.Y,
					BackgroundTransparency = 1,

					Text = `<font weight="medium" size="30">{key}</font>\n{value.credits}\n{value.outfitter}`,

					RichText = true,
					TextSize = 20,
					TextWrapped = true,
					FontWeight = Enum.FontWeight.Regular,

					TextYAlignment = Enum.TextYAlignment.Top,
					TextXAlignment = Enum.TextXAlignment.Left,
				},

				scope:iconButton {
					ClassName = "ImageLabel",
					Size = UDim2.fromOffset(60.9, 60.9),
					Position = UDim2.fromScale(1, 0.5),
					AnchorPoint = Vector2.new(1, 0.5),
					BackgroundTransparency = 1,
					Image = scope:Computed(function(use)
						return if use(isHovered)
							then assets.images.redonUI.createFilled
							else assets.images.redonUI.create
					end),
					ScaleType = Enum.ScaleType.Fit,
					Reactive = true,

					MouseEnter = function()
						isHovered:set(true)
					end,

					MouseLeave = function()
						isHovered:set(false)
					end,

					[Fusion.OnEvent "Activated"] = function()
						props.CurrentVehicle:set(key)
						props.Mode:set("viewport")
					end,
				},
			},
		}
	end

	return scope:pageBase {
		Name = "Vehicle",
		PrimaryColor = "Alternate",
		RowSize = UDim2.fromOffset(400, 0),
		AutomaticSize = Enum.AutomaticSize.Y,

		CurrentPanel = props.CurrentPanel,
		Version = props.Version,

		Rows = extraComponents,
	}
end


-- Redon Tech Emergency Vehicle Creator, MIT License
local root = script.Parent.Parent.Parent

local Fusion = require(root.Packages.fusion)
local RedonUI = require(root.Packages["redon-ui"])
local types = require(root.Plugin.types)

type action = {
	text: Fusion.UsedAs<string>,
	type: "standard" | "primary" | "danger",
	callback: (popup: Instance) -> (),
	key: Fusion.UsedAs<number>,
	keybind: Enum.KeyCode?,
}
export type popup = {
	currentContainer: Fusion.Value<Frame>?,
	container: (self: popup, scope: types.Scope) -> (Fusion.Child, Fusion.Value<boolean>),
	addPopup: (
		self: popup,
		scope: types.Scope,
		props: {
			title: Fusion.UsedAs<string>,
			description: Fusion.UsedAs<string>,
			forceDescriptionSize: Fusion.UsedAs<UDim2>?,
			actions: { action },
		}
	) -> (),
	customPopup: (self: popup, scope: types.Scope, child: Instance) -> (),
	removePopup: (self: popup, newPopup: Instance?) -> (),
	enabled: Fusion.Value<boolean>,
	currentPopup: Instance?,
	currentCustomPopup: Instance?,
	parentScope: types.Scope,
	keybinds: { [Enum.KeyCode]: (popup: Instance) -> () },
}
local popup = {} :: popup

local function getColors(
	valueType: string,
	theme: typeof(RedonUI.theme.theme:now())
): { BackgroundColor: Color3, TextColor: Color3, ShadowColor: Color3, ButtonGlowColor: Color3 }
	if valueType == "primary" then
		return {
			BackgroundColor = theme.colors.sky,
			TextColor = theme.colors.crust,
			ShadowColor = theme.colors.sky,
			ButtonGlowColor = theme.colors.sky,
		}
	elseif valueType == "danger" then
		return {
			BackgroundColor = theme.colors.red,
			TextColor = theme.colors.crust,
			ShadowColor = theme.colors.red,
			ButtonGlowColor = theme.colors.red,
		}
	else
		return {
			BackgroundColor = theme.colors.crust,
			TextColor = theme.colors.text,
			ShadowColor = theme.colors.crust,
			ButtonGlowColor = theme.colors.maroon,
		}
	end
end

local function cleanupPopups(self: popup)
	if self.currentPopup ~= nil then
		self.currentPopup:Destroy()
		self.currentPopup = nil
	end
	if self.currentCustomPopup ~= nil then
		self.currentCustomPopup.Parent = nil
		self.currentCustomPopup = nil
	end
end

function popup.addPopup(self, scope, props)
	if self.currentContainer == nil then
		return
	end

	cleanupPopups(self)

	local currentContainer = scope.peek(self.currentContainer)
	local currentTheme = RedonUI.theme.theme:now()
	local newPopup
	local keybinds = {}

	for _, action in ipairs(props.actions) do
		if action.keybind ~= nil then
			keybinds[action.keybind] = action.callback
		end
	end
	self.keybinds = keybinds

	newPopup = self.parentScope:base {
		AutomaticSize = Enum.AutomaticSize.XY,
		BackgroundColor3 = currentTheme.colors.base,
		Border = 2,
		CornerRadius = UDim.new(0, 15),
		ZIndex = 5001,

		[Fusion.Children] = {
			self.parentScope:New("UIPadding") {
				PaddingTop = UDim.new(0, 10),
				PaddingBottom = UDim.new(0, 10),
				PaddingLeft = UDim.new(0, 10),
				PaddingRight = UDim.new(0, 10),
			},

			self.parentScope:New("UIListLayout") {
				Padding = UDim.new(0, 15),
				FillDirection = Enum.FillDirection.Vertical,
				HorizontalAlignment = Enum.HorizontalAlignment.Center,
				VerticalAlignment = Enum.VerticalAlignment.Top,
				SortOrder = Enum.SortOrder.LayoutOrder,
			},

			self.parentScope:textLabel {
				Size = UDim2.fromOffset(300, 50),
				AnchorPoint = Vector2.new(0.5, 0),
				Position = UDim2.fromScale(0.5, 0),
				Text = props.title,
				TextScaled = true,
				MaxTextSize = 30,
				FontWeight = Enum.FontWeight.Bold,
				LayoutOrder = 1,
				ZIndex = 5001,
			},

			self.parentScope:textLabel {
				Size = if props.forceDescriptionSize ~= nil
					then props.forceDescriptionSize
					else UDim2.fromOffset(400, 50),
				AnchorPoint = Vector2.new(0, 0),
				Position = UDim2.fromOffset(0, 65),
				Text = props.description,
				RichText = true,
				TextScaled = props.forceDescriptionSize ~= nil,
				TextSize = 20,
				FontWeight = Enum.FontWeight.Regular,
				MaxTextSize = 20,
				TextWrapped = true,
				TextYAlignment = Enum.TextYAlignment.Top,
				AutomaticSize = if props.forceDescriptionSize == nil
					then Enum.AutomaticSize.Y
					else Enum.AutomaticSize.None,
				LayoutOrder = 2,
				ZIndex = 5001,
			},

			self.parentScope:base {
				Size = UDim2.fromOffset(300, 50),
				AnchorPoint = Vector2.new(0.5, 1),
				Position = UDim2.fromScale(0.5, 1),
				BackgroundTransparency = 1,
				LayoutOrder = 3,
				ZIndex = 5001,

				[Fusion.Children] = Fusion.Child {
					self.parentScope:New("UIListLayout") {
						Padding = UDim.new(0, 15),
						FillDirection = Enum.FillDirection.Horizontal,
						HorizontalAlignment = Enum.HorizontalAlignment.Center,
						VerticalAlignment = Enum.VerticalAlignment.Center,
						SortOrder = Enum.SortOrder.LayoutOrder,
					},

					self.parentScope:ForValues(props.actions, function(_, newScope: types.Scope, value: action)
						local colors = getColors(value.type, currentTheme)

						return newScope:textButton {
							Size = UDim2.fromOffset(175, 35),
							Text = value.text,
							TextScaled = true,
							MaxTextSize = 25,
							TextColor3 = colors.TextColor,
							BackgroundColor3 = colors.BackgroundColor,
							ButtonGlowColor3 = colors.ButtonGlowColor,
							ShadowColor3 = colors.ShadowColor,
							ButtonGlow = value.type ~= "standard",
							Shadow = true,
							Border = 2,
							CornerRadius = UDim.new(0, 10),
							[Fusion.OnEvent "Activated"] = function()
								local mt = getmetatable(scope :: any)
								if typeof(mt) == "table" and mt._FUSION_POISONED then
									return
								end
								value.callback(newPopup)
							end :: unknown,
							LayoutOrder = value.key,
							Reactive = true,
							ZIndex = 5002,
						}
					end),
				},
			},
		},
	}

	self.enabled:set(true)
	newPopup.Parent = currentContainer
	self.currentPopup = newPopup
end

function popup.customPopup(self, scope, child)
	if self.currentContainer == nil then
		return
	end

	cleanupPopups(self)

	local currentContainer = scope.peek(self.currentContainer)
	self.currentCustomPopup = child
	self.enabled:set(true)
	child.Parent = currentContainer
end

function popup.removePopup(self, _)
	self.keybinds = {}
	self.enabled:set(false)
end

function popup.container(self, scope)
	self.parentScope = scope
	local currentTheme = RedonUI.theme.theme:now()
	self.enabled = scope:Value(false)

	local container = scope:base {
		Size = UDim2.fromScale(2, 2),
		AnchorPoint = Vector2.new(0.5, 0.5),
		BackgroundColor3 = currentTheme.colors.crust,
		BackgroundTransparency = scope:Spring(
			scope:Computed(function(use)
				return if use(self.enabled) == false then 1 else 0.5
			end),
			20,
			1
		),
		Position = scope:Spring(
			scope:Computed(function(use)
				return if use(self.enabled) == false then UDim2.fromScale(0.5, 1.5) else UDim2.fromScale(0.5, 0.5)
			end),
			20,
			0.6
		),
		ZIndex = 5001,

		[Fusion.OnEvent "InputBegan"] = function(input)
			if
				input.UserInputType == Enum.UserInputType.Keyboard
				and self.currentPopup ~= nil
				and self.keybinds[input.KeyCode] ~= nil
			then
				local mt = getmetatable(scope :: any)
				if typeof(mt) == "table" and mt._FUSION_POISONED then
					return
				end
				self.keybinds[input.KeyCode](self.currentPopup)
			end
		end :: unknown,

		[Fusion.Children] = {
			scope:New("UIListLayout") {
				HorizontalAlignment = Enum.HorizontalAlignment.Center,
				VerticalAlignment = Enum.VerticalAlignment.Center,
			},

			scope:New("UIGradient") {
				Rotation = 90,
				Transparency = NumberSequence.new({
					NumberSequenceKeypoint.new(0, 1),
					NumberSequenceKeypoint.new(0.1, 0),
					NumberSequenceKeypoint.new(0.9, 0),
					NumberSequenceKeypoint.new(1, 1),
				}),
			},
		},
	} :: Frame

	self.currentContainer = scope:Value(container)
	return container, self.enabled
end

return popup


local root = script.Parent.Parent.Parent.Parent

local Fusion = require(root.Packages.fusion)
local RedonUI = require(root.Packages["redon-ui"])
local assets = require(root.Plugin.assets)
local types = require(root.Plugin.types)

return function(
	scope: types.Scope,
	props: {
		attachments: Fusion.UsedAs<{ Attachment }>,
		viewportSize: Fusion.UsedAs<Vector2>,
		currentLocation: Fusion.Value<string?>,
		currentlyConfiguring: Fusion.Value<string?>,
		lightParts: Fusion.UsedAs<{ { name: string, part: Instance } }>,
	}
)
	local currentTheme = RedonUI.theme.theme:now()
	--selene: allow(shadowing)
	return {
		scope:ForValues(props.attachments, function(_, scope: typeof(scope), value: Attachment)
			local children = {}
			local allAttachments = { value }
			for _, attachment in pairs(value:GetDescendants()) do
				if attachment:IsA("Attachment") then
					table.insert(allAttachments, attachment)
				end
			end
			for _, attachment in pairs(allAttachments) do
				table.insert(
					children,
					scope:New("BillboardGui") {
						Adornee = attachment,
						Size = scope:Computed(function(use)
							local base = use(props.viewportSize)
							return UDim2.fromScale(500 / base.X, 500 / base.Y)
						end),
						MaxDistance = 30,
						AlwaysOnTop = true,
						Name = value.Name,

						[Fusion.Children] = {
							scope:iconButton {
								Size = UDim2.fromScale(1, 1),
								BackgroundColor3 = currentTheme.colors.base,
								Border = 2,
								BorderColor3 = currentTheme.colors.text,
								CornerRadius = UDim.new(1, 0),
								Image = scope:Computed(function(use)
									if use(props.currentLocation) == value.Name then
										return assets.images.redonUI.remove
									end
									return assets.images.redonUI.add
								end),

								[Fusion.OnEvent "Activated"] = function()
									if scope.peek(props.currentLocation) == value.Name then
										props.currentLocation:set(nil)
									else
										props.currentLocation:set(value.Name)
									end
									props.currentlyConfiguring:set(nil)
								end :: unknown,

								[Fusion.Children] = {
									scope:New("UIAspectRatioConstraint") {},
								},
							},
						},
					}
				)
			end

			return children
		end),

		scope:ForValues(props.lightParts, function(_, scope: typeof(scope), value: { name: string, part: Instance })
			return scope:New("BillboardGui") {
				Adornee = value.part,
				Size = scope:Computed(function(use)
					local base = use(props.viewportSize)
					return UDim2.fromScale(500 / base.X, 250 / base.Y)
				end),
				MaxDistance = 15,
				AlwaysOnTop = true,
				Name = value.name,

				[Fusion.Children] = {
					scope:textLabel {
						Size = UDim2.fromScale(1, 1),
						AnchorPoint = Vector2.new(0.5, 0.5),
						Position = UDim2.fromScale(0.5, 0.5),
						BackgroundColor3 = currentTheme.colors.base,
						Text = value.name,
						TextScaled = true,
						MaxTextSize = 20,

						[Fusion.Children] = {
							scope:New("UIAspectRatioConstraint") {
								AspectRatio = 2,
							},

							scope:New("UIStroke") {
								ApplyStrokeMode = Enum.ApplyStrokeMode.Contextual,
								Color = currentTheme.colors.crust,
								Thickness = 1,
							},
						},
					},
				},
			}
		end),
	} :: { Fusion.Child }
end


--#selene: allow(shadowing)
local root = script.Parent.Parent.Parent.Parent

local Fusion = require(root.Packages.fusion)
local RedonUI = require(root.Packages["redon-ui"])
local types = require(root.Plugin.types)
local vehicle = require(root.Plugin.vehicle)
local log = require(root.Plugin.log)

return function(
	scope: types.Scope,
	props: {
		attachments: Fusion.UsedAs<{ Attachment }>,
		viewportSize: Fusion.Value<Vector2>,
		currentLocation: Fusion.Value<string?>,

		Mode: Fusion.Value<types.mode>,
		CurrentVehicle: Fusion.Value<Model | string?>,

		outfitting: Fusion.Value<Model?>,
		currentVehicleFolder: Fusion.Value<vehicle.vehicleFolder?>,
		currentEquipment: Fusion.Value<string>,
		currentlyConfiguring: Fusion.Value<string?>,
		currentOptionData: Fusion.Value<{ [string]: boolean | { [string]: boolean } }>,

		cleanupCustomization: () -> (),
		recomputeLightParts: () -> (),
	}
)
	local currentTheme = RedonUI.theme.theme:now()
	local function makeChildren(scope: typeof(scope), name: string, value: string?)
		return {
			scope:New("UIPadding") {
				PaddingTop = UDim.new(0, 10),
				PaddingBottom = UDim.new(0, 10),
				PaddingLeft = UDim.new(0, 10),
				PaddingRight = UDim.new(0, 10),
			},

			scope:textLabel {
				Size = UDim2.new(1, -35, 0, 0),
				AutomaticSize = Enum.AutomaticSize.Y,
				Text = value or name,
				TextSize = 25,
				TextXAlignment = Enum.TextXAlignment.Left,
				FontWeight = Enum.FontWeight.Regular,
				TextWrapped = true,
				BackgroundTransparency = 1,
			},

			scope:checkBox {
				Size = UDim2.fromOffset(25, 25),
				AnchorPoint = Vector2.new(1, 0.5),
				Position = UDim2.fromScale(1, 0.5),
				BackgroundColor3 = currentTheme.colors.crust,
				CornerRadius = UDim.new(0, 5),
				Border = 1,
				BorderColor3 = currentTheme.colors.white,
				SelectedColor3 = currentTheme.colors.blue,
				SelectedCheckColor3 = currentTheme.colors.crust,
				Reactive = true,

				Enabled = scope:Computed(function(use)
					local data = use(props.currentOptionData)[name]
					return if typeof(data) == "table" then data[value or name] else data
				end),

				[Fusion.OnEvent "Activated"] = function()
					local currentVehicleFolder = scope.peek(props.currentVehicleFolder)
					local currentLocation = scope.peek(props.currentLocation)
					local currentEquipment = scope.peek(props.currentEquipment)
					if currentVehicleFolder == nil or currentLocation == nil or currentEquipment == nil then
						log.warn("currentVehicleFolder, currentLocation, or currentEquipment is nil")
						return
					end

					-- Change the value of the current option and meet requirements
					local equipmentData = currentVehicleFolder.data.customization[currentLocation][currentEquipment]
					local data = scope.peek(props.currentOptionData)
					local current = data[name]
					local newValue
					if typeof(current) == "table" then
						if equipmentData.configuration[name].canHaveNone ~= true then
							log.debug("Force setting to true")
							newValue = true
						else
							newValue = not current[value or name]
							log.debug("Setting to", newValue)
						end

						if equipmentData.configuration[name].canSelectMultiple ~= true then
							log.debug("Clearing other options")
							for key, _ in pairs(current) do
								if key ~= value or name then
									current[key] = false
								end
							end
						end
						current[value or name] = newValue
					else
						newValue = not current
						data[name] = newValue
					end
					props.currentOptionData:set(data)

					-- Attempt to apply the new configuration
					local outfitting = scope.peek(props.outfitting)
					if outfitting == nil then
						log.warn("outfitting is nil")
						return
					end
					local currentEquipmentModel = outfitting:FindFirstChild(currentEquipment) :: Model?
					if currentEquipmentModel == nil or currentEquipmentModel:IsA("Model") == false then
						log.warn("currentEquipmentModel is nil or not a model", currentEquipment, outfitting)
						return
					end
					vehicle:changeConfiguration(currentVehicleFolder, currentEquipmentModel, {
						[name] = if typeof(current) == "table" then current else newValue,
					})
					props.recomputeLightParts()
				end,
			},
		}
	end

	return scope:New("ScrollingFrame") {
		Name = "Table",
		BackgroundTransparency = 1,
		Size = UDim2.fromOffset(300, 390),
		AnchorPoint = Vector2.new(0.5, 0),
		Position = UDim2.new(0.5, 0, 0, 50),
		ScrollBarThickness = 3,
		ScrollBarImageColor3 = currentTheme.colors.text,
		TopImage = "rbxasset://textures/ui/Scroll/scroll-middle.png",
		BottomImage = "rbxasset://textures/ui/Scroll/scroll-middle.png",
		AutomaticCanvasSize = Enum.AutomaticSize.Y,
		CanvasSize = UDim2.new(),

		[Fusion.Children] = Fusion.Child {
			scope:New("UIListLayout") {
				SortOrder = Enum.SortOrder.LayoutOrder,
			},

			scope:Computed(function(use, scope: typeof(scope)): Fusion.Child?
				local currentlyConfiguring = use(props.currentlyConfiguring)
				local currentVehicleFolder = scope.peek(props.currentVehicleFolder)
				local currentLocation = scope.peek(props.currentLocation)

				if currentlyConfiguring ~= nil and currentVehicleFolder ~= nil and currentLocation ~= nil then
					local rows: { [string]: vehicle.option | Instance } = scope.deepCopy(
						currentVehicleFolder.data.customization[currentLocation][currentlyConfiguring].configuration
					)
					local layoutLength = 0
					for _, value in pairs(rows) do
						if typeof(value) == "table" and value.layoutOrder > layoutLength then
							layoutLength = value.layoutOrder
						else
							layoutLength += 1
						end
					end
					if
						currentVehicleFolder.data.customization[currentLocation][currentlyConfiguring].hasLights
						== true
					then
						local lightPrefix = scope:Value("")
						local function newLightPrefix()
							local currentLocation = scope.peek(props.currentLocation)
							local currentEquipment = scope.peek(props.currentEquipment)
							local outfitting = scope.peek(props.outfitting)
							if outfitting == nil or currentLocation == nil or currentEquipment == nil then
								log.warn("outfitting, currentLocation, or currentEquipment is nil")
								return
							end
							local currentEquipmentModel = outfitting:FindFirstChild(currentEquipment) :: Model?
							if currentEquipmentModel == nil or currentEquipmentModel:IsA("Model") == false then
								log.warn("currentEquipmentModel is nil or not a model")
								return
							end
							local newPrefix = scope.peek(lightPrefix)

							currentEquipmentModel:SetAttribute("lightPrefix", newPrefix)
							vehicle:updateEquipmentLights(currentEquipmentModel)
							props.recomputeLightParts()
						end
						rows["Light Prefix"] = scope:base {
							Size = UDim2.fromOffset(300, 50),
							BackgroundTransparency = 1,

							[Fusion.Children] = {
								scope:New("UIPadding") {
									PaddingTop = UDim.new(0, 10),
									PaddingBottom = UDim.new(0, 10),
									PaddingLeft = UDim.new(0, 10),
									PaddingRight = UDim.new(0, 10),
								},

								scope:textBox {
									Size = UDim2.fromScale(1, 1),
									PlaceholderText = "Light name prefix",
									[Fusion.Out "Text"] = lightPrefix :: unknown,
									TextSize = 25,
									TextXAlignment = Enum.TextXAlignment.Left,
									FontWeight = Enum.FontWeight.Medium,
									TextWrapped = true,
									BackgroundColor3 = currentTheme.colors.crust,
									CornerRadius = UDim.new(0, 10),
									Border = 1,
									BorderColor3 = currentTheme.colors.text,

									[Fusion.OnEvent "FocusLost"] = function()
										newLightPrefix()
									end,
								},
							},
						}
					end

					return scope:ForPairs(
						rows,
						function(_, scope: typeof(scope), name: string, data: vehicle.option | Instance)
							local children = {}
							if typeof(data) == "table" and data.type == "select" and data.choices ~= nil then
								table.insert(
									children,
									scope:textLabel {
										Size = UDim2.fromOffset(280, 20),
										Text = name:gsub("_", " "),
										Position = UDim2.fromOffset(10, 0),
										TextXAlignment = Enum.TextXAlignment.Left,
										FontWeight = Enum.FontWeight.Medium,
										TextSize = 20,
									}
								)
								table.insert(
									children,
									scope:base {
										Size = UDim2.fromScale(1, 0),
										Position = UDim2.fromOffset(0, 20),
										AutomaticSize = Enum.AutomaticSize.Y,
										BackgroundTransparency = 1,

										[Fusion.Children] = Fusion.Child {
											scope:New("UIListLayout") {},

											scope:ForPairs(
												data.choices,
												function(_, scope: typeof(scope), key: number, value: string)
													return key,
														scope:base {
															Size = UDim2.fromOffset(300, 50),
															BackgroundColor3 = if key % 2 == 0
																then currentTheme.colors.base
																else currentTheme.colors.mantle,
															LayoutOrder = key,

															[Fusion.Children] = makeChildren(scope, name, value),
														}
												end
											),
										},
									}
								)
							elseif typeof(data) == "table" then
								table.insert(
									children,
									scope:base {
										Size = UDim2.fromOffset(300, 50),
										BackgroundTransparency = 1,

										[Fusion.Children] = makeChildren(scope, name),
									}
								)
							else
								table.insert(
									children,
									scope:textLabel {
										Size = UDim2.fromOffset(280, 20),
										Text = name:gsub("_", " "),
										Position = UDim2.fromOffset(10, 0),
										TextXAlignment = Enum.TextXAlignment.Left,
										FontWeight = Enum.FontWeight.Medium,
										TextSize = 20,
									}
								)
								table.insert(
									children,
									scope:base {
										Size = UDim2.fromScale(1, 0),
										Position = UDim2.fromOffset(0, 20),
										AutomaticSize = Enum.AutomaticSize.Y,
										BackgroundTransparency = 1,

										[Fusion.Children] = data,
									}
								)
							end

							local order = if typeof(data) == "table" then data.layoutOrder else layoutLength + 1
							return order,
								scope:base {
									ClassName = "Frame",
									Size = UDim2.fromOffset(300, 50),
									BackgroundColor3 = scope:Computed(function(_)
										return order % 2 == 0 and currentTheme.colors.base or currentTheme.colors.mantle
									end),
									AutomaticSize = Enum.AutomaticSize.Y,
									ClipsDescendants = true,
									LayoutOrder = order,

									[Fusion.Children] = children,
								}
						end
					)
				else
					return nil
				end
			end),
		},
	}
end