local C=script.Parent.Parent.Parent local U=C.Parent local Z=require(C.Theme)local b=Z.WithTheme local p=require(U.Sift)local w=require(U.t)local m=require(U.Roact)local O=m.createElement local M=require(C.App.Surface.Acrylic)local r="\099\111\108\111\114\115\047\066\097\099\107\103\114\111\117\110\100\047\070\105\108\108\095\067\111\108\111\114\047\065\099\114\121\108\105\099\095\066\097\099\107\103\114\111\117\110\100\047\066\097\115\101"local W="\099\111\108\111\114\115\047\083\116\114\111\107\101\095\067\111\108\111\114\047\083\117\114\102\097\099\101\095\083\116\114\111\107\101\047\070\108\121\111\117\116"local V="\099\111\108\111\114\115\047\070\105\108\108\095\067\111\108\111\114\047\084\101\120\116\047\080\114\105\109\097\114\121"local X="\102\111\110\116\115\047\066\111\100\121"local i=m.PureComponent:extend(script.Name)i.defaultProps={Size=UDim2.fromOffset(320,72);FitContents=true}i.validateProps=w.strictInterface({AnchorPoint=w.optional(w.Vector2),Position=w.optional(w.UDim2),Size=w.optional(w.UDim2);RichText=w.optional(w.boolean),Text=w.optional(w.string),FitContents=w.optional(w.boolean);Native=w.optional(w.table),[m.Children]=w.optional(w.table)})function i.init(C)C.ContentSize,C.SetContentSize=m.createBinding(C.props.Size)end function i.render(C)local U=C.props return b(function(Z)local b=Z[r]local w=Z[W]local i=O(M,{BackgroundColor3=b.Color,BackgroundTransparency=b.Transparency;BorderSizePixel=0;Size=C.ContentSize},{Corners=O("\085\073\067\111\114\110\101\114",{CornerRadius=UDim.new(0,Z["\115\116\121\108\101\115\047\067\111\114\110\101\114\082\097\100\105\117\115\047\068\101\102\097\117\108\116\047\079\117\116\101\114"]-1)}),Stroke=O("\085\073\083\116\114\111\107\101",{Color=w.Color;Transparency=w.Transparency;Thickness=1})})local l=Z[V]local n=Z[X]local o=O("\070\114\097\109\101",{AutomaticSize=U.FitContents and"\089"or"\078\111\110\101",BackgroundTransparency=1,Size=C.ContentSize},{Layout=O("\085\073\076\105\115\116\076\097\121\111\117\116",{SortOrder=Enum.SortOrder.LayoutOrder}),Content=O("\070\114\097\109\101",{AutomaticSize=U.FitContents and"\089"or"\078\111\110\101",BackgroundTransparency=1;Size=C.ContentSize;[m.Change.AbsoluteSize]=function(Z)if U.FitContents then C.SetContentSize(UDim2.fromOffset(Z.AbsoluteSize.X,Z.AbsoluteSize.Y))end end},{Contents=m.createFragment(U[m.Children]or{});_Padding=O("\085\073\080\097\100\100\105\110\103",{PaddingBottom=UDim.new(0,16),PaddingLeft=UDim.new(0,16);PaddingRight=UDim.new(0,16);PaddingTop=UDim.new(0,16)}),_Layout=O("\085\073\076\105\115\116\076\097\121\111\117\116",{FillDirection=Enum.FillDirection.Vertical;Padding=UDim.new(0,16);SortOrder=Enum.SortOrder.LayoutOrder});_Text=U.Text and O("\084\101\120\116\076\097\098\101\108",{LayoutOrder=-1,BackgroundTransparency=1,AutomaticSize=U.FitContents and"\089"or"\078\111\110\101";FontFace=n.Font;Size=UDim2.fromScale(1,U.FitContents and 0 or 1);LineHeight=n.LineHeight;RichText=U.RichText,Text=U.Text;TextColor3=l.Color;TextSize=n.Size;TextTransparency=l.Transparency,TextWrapped=true,TextXAlignment="\076\101\102\116",TextYAlignment="\084\111\112"})})})return O("\070\114\097\109\101",p.Dictionary.join({AnchorPoint=U.AnchorPoint,AutomaticSize=U.FitContents and"\089"or"\078\111\110\101";BackgroundTransparency=1,Position=U.Position;Size=C.ContentSize;[m.Change.AbsoluteSize]=function(U)C.SetContentSize(UDim2.fromOffset(U.AbsoluteSize.X,U.AbsoluteSize.Y))end},U.Native),{Base=i,Container=o})end)end return i
-- Flyout: Flyout component

local Winro = script.Parent.Parent.Parent
local Packages = Winro.Parent

local Theme = require(Winro.Theme)
local WithTheme = Theme.WithTheme

local Sift = require(Packages.Sift)
local t = require(Packages.t)
local Roact = require(Packages.Roact)
local new = Roact.createElement

local Acrylic = require(Winro.App.Surface.Acrylic)

local FLYOUT_BASE_FILL = "colors/Background/Fill_Color/Acrylic_Background/Base"
local FLYOUT_BASE_STROKE = "colors/Stroke_Color/Surface_Stroke/Flyout"
local FLYOUT_TEXT_STYLE = "colors/Fill_Color/Text/Primary"
local FLYOUT_FONT_STYLE = "fonts/Body"

local Flyout = Roact.PureComponent:extend(script.Name)

Flyout.defaultProps = {
	Size = UDim2.fromOffset(320, 72), --- @defaultProp
	FitContents = true, --- @defaultProp
}

Flyout.validateProps = t.strictInterface({

	--- @prop @optional AnchorPoint Vector2 The Flyout's anchor point
	AnchorPoint = t.optional(t.Vector2),

	--- @prop @optional Position UDim2 The Flyout's position
	Position = t.optional(t.UDim2),

	--- @prop @optional Size UDim2 The Flyout's size
	Size = t.optional(t.UDim2),

	--- @prop @optional RichText boolean The Flyout's rich text property
	RichText = t.optional(t.boolean),

	--- @prop @optional Text string The Flyout's text
	Text = t.optional(t.string),

	--- @prop @optional FitContents boolean Determines if the Flyout will resize to fit it's contents
	FitContents = t.optional(t.boolean),

	--- @prop @optional Native table {property:value} The native props for the Flyout's main element
	Native = t.optional(t.table),

	--- @prop @optional [Roact.Children] table The flyout's contents
	[Roact.Children] = t.optional(t.table),
})

function Flyout:init()

	-- Content fitting
	self.ContentSize, self.SetContentSize = Roact.createBinding(self.props.Size)
end

function Flyout:render()
	local props = self.props

	return WithTheme(function(Theme)

		-- ////////// Flyout Surface

		local SurfaceStyle = Theme[FLYOUT_BASE_FILL]
		local StrokeStyle = Theme[FLYOUT_BASE_STROKE]

		local Base = new(Acrylic, {
			BackgroundColor3 = SurfaceStyle.Color,
			BackgroundTransparency = SurfaceStyle.Transparency,
			BorderSizePixel = 0,
			Size = self.ContentSize,
		}, {

			Corners = new('UICorner', {
				CornerRadius = UDim.new(0, Theme['styles/CornerRadius/Default/Outer'] - 1), -- -1px to account for stroke
			}),
			Stroke = new('UIStroke', {
				Color = StrokeStyle.Color,
				Transparency = StrokeStyle.Transparency,
				Thickness = 1,
			}),
		})

		-- ////////// Flyout Content

		local TextStyle = Theme[FLYOUT_TEXT_STYLE]
		local TextFont = Theme[FLYOUT_FONT_STYLE]

		local Container = new('Frame', {
			AutomaticSize = props.FitContents and 'Y' or 'None',
			BackgroundTransparency = 1,
			Size = self.ContentSize,
		}, {

			Layout = new('UIListLayout', {
				SortOrder = Enum.SortOrder.LayoutOrder
			}),
			Content = new('Frame', {
				AutomaticSize = props.FitContents and 'Y' or 'None',
				BackgroundTransparency = 1,
				Size = self.ContentSize,

				[Roact.Change.AbsoluteSize] = function(rbx)
					if props.FitContents then
						self.SetContentSize(UDim2.fromOffset(rbx.AbsoluteSize.X, rbx.AbsoluteSize.Y))
					end
				end,
			}, {
				Contents = Roact.createFragment(props[Roact.Children] or {}),
				
				_Padding = new('UIPadding', {
					PaddingBottom = UDim.new(0, 16),
					PaddingLeft = UDim.new(0, 16),
					PaddingRight = UDim.new(0, 16),
					PaddingTop = UDim.new(0, 16),
				}),
				_Layout = new('UIListLayout', {
					FillDirection = Enum.FillDirection.Vertical,
					Padding = UDim.new(0, 16),
					SortOrder = Enum.SortOrder.LayoutOrder,
				}),
				_Text = props.Text and new('TextLabel', {
					LayoutOrder = -1,
					BackgroundTransparency = 1,
					AutomaticSize = props.FitContents and 'Y' or 'None',
					FontFace = TextFont.Font,
					Size = UDim2.fromScale(1, props.FitContents and 0 or 1),
					LineHeight = TextFont.LineHeight,
					RichText = props.RichText,
					Text = props.Text,
					TextColor3 = TextStyle.Color,
					TextSize = TextFont.Size,
					TextTransparency = TextStyle.Transparency,
					TextWrapped = true,
					TextXAlignment = 'Left',
					TextYAlignment = 'Top',
				}),
			})
		})

		-- ////////// Flyout

		return new('Frame', Sift.Dictionary.join({
			AnchorPoint = props.AnchorPoint,
			AutomaticSize = props.FitContents and 'Y' or 'None',
			BackgroundTransparency = 1,
			Position = props.Position,
			Size = self.ContentSize,

			[Roact.Change.AbsoluteSize] = function(rbx)
				self.SetContentSize(UDim2.fromOffset(rbx.AbsoluteSize.X, rbx.AbsoluteSize.Y))
			end,
		}, props.Native), {
			Base = Base,
			Container = Container,
		})
	end)
end

return Flyout
