local O=(require(script.Parent.loader)).load(script)local m=O("\069\118\101\110\109\111\114\101\067\111\108\111\114\084\104\101\109\105\110\103")local N=O("\066\097\115\101\079\098\106\101\099\116")local P=O("\079\098\115\101\114\118\097\098\108\101\076\105\115\116")local g=O("\066\108\101\110\100")local A=O("\082\120\066\114\105\111\085\116\105\108\115")local s=setmetatable({},N)s.ClassName="\083\116\111\114\121\066\097\114"s.__index=s function s.new(O)local g=setmetatable(N.new(),s)g._serviceBag=assert(O,"\078\111 \115\101\114\118\105\099\101\066\097\103")g._colorTheming=O:GetService(m)g._elements=P.new()g._maid:GiveTask(g._elements)g._maid:GiveTask((g:_render()):Subscribe(function(O)g.Gui=O end))return g end function s.PushElement(m,O)return m._elements:Add(O)end function s._render(O)return(g.New("\070\114\097\109\101"))({Size=UDim2.new(1,0,1,0);BackgroundTransparency=1,ZIndex=-1,[g.Children]={(g.New("\085\073\080\097\100\100\105\110\103"))({PaddingLeft=UDim.new(0,4);PaddingRight=UDim.new(0,4);PaddingBottom=UDim.new(0,4);PaddingTop=UDim.new(0,4)});(g.New("\085\073\076\105\115\116\076\097\121\111\117\116"))({Padding=UDim.new(0,4);FillDirection=Enum.FillDirection.Horizontal;HorizontalAlignment=Enum.HorizontalAlignment.Center;VerticalAlignment=Enum.VerticalAlignment.Top}),(O._elements:ObserveItemsBrio()):Pipe({A.map(function(O)return O.Gui end)})}})end return s
--[=[
	@class StoryBar
	@client

	When testing UI in [Hoarcekat](https://github.com/Kampfkarren/hoarcekat) stories, we often want to tweak and experiment with it;
	showing/hiding, changing scale, triggering events, etc.

	This module makes this functionality easy, providing a set of pre-made buttons & sliders with callbacks. Along with [StoryBarUtils], boilerplate is kept to a minimum.

	![Story Bar Gif](/evenmore/storybar/bar.gif)
]=]

-- TODO: Collapsible UI, using ico 'rbxasset://textures/ui/InspectMenu/ico_inspect@2x.png'.

local require = require(script.Parent.loader).load(script)

local EvenmoreColorTheming = require("EvenmoreColorTheming")
local BaseObject = require("BaseObject")
local ObservableList = require("ObservableList")
local Blend = require("Blend")
local RxBrioUtils = require("RxBrioUtils")

local StoryBar = setmetatable({}, BaseObject)
StoryBar.ClassName = "StoryBar"
StoryBar.__index = StoryBar

--[=[
	Gui object which can be reparented or whatever, typically underneath a Horacekat target.
	@prop Gui Instance?
	@readonly
	@within StoryBar
]=]

--[=[
	Constructs a new StoryBar. You likely don't want to do this directly, see [StoryBarUtils].
	@param serviceBag ServiceBag
	@return StoryBar
]=]
function StoryBar.new(serviceBag)
	local self = setmetatable(BaseObject.new(), StoryBar)

	self._serviceBag = assert(serviceBag, "No serviceBag")
	self._colorTheming = serviceBag:GetService(EvenmoreColorTheming)

	self._elements = ObservableList.new()
	self._maid:GiveTask(self._elements)

	self._maid:GiveTask(self:_render():Subscribe(function(gui)
		self.Gui = gui
	end))

	return self
end

--[=[
	Push a constructed [BaseBarElement] onto the StoryBar.
	@param element BaseBarElement.
	@return () -> () -- Cleanup task, call to remove from the bar.
]=]
function StoryBar:PushElement(element)
	return self._elements:Add(element)
end

function StoryBar:_render()
	return Blend.New("Frame")({
		Size = UDim2.new(1, 0, 1, 0),
		BackgroundTransparency = 1,
		ZIndex = -1,
		[Blend.Children] = {
			Blend.New("UIPadding")({
				PaddingLeft = UDim.new(0, 4),
				PaddingRight = UDim.new(0, 4),
				PaddingBottom = UDim.new(0, 4),
				PaddingTop = UDim.new(0, 4),
			}),
			Blend.New("UIListLayout")({
				Padding = UDim.new(0, 4),
				FillDirection = Enum.FillDirection.Horizontal,
				HorizontalAlignment = Enum.HorizontalAlignment.Center,
				VerticalAlignment = Enum.VerticalAlignment.Top,
			}),
			self._elements:ObserveItemsBrio():Pipe({
				RxBrioUtils.map(function(class)
					return class.Gui
				end)
			})
		},
	})
end

return StoryBar
