local C=script.Parent.Parent.Parent local U=C.Parent local Z=require(C.Theme)local b=Z.WithTheme local p=require(C.Utility.FrameVisualizer)local w=require(U.Sift)local m=require(U.Roact)local O=m.createElement local M=script.Parent local r=require(M.ListItem)local W=UDim.new(0,8)local V=m.PureComponent:extend(script.Name)function V.render(C)local U=C.props return b(function(Z)local b=O("\070\114\097\109\101",{BackgroundTransparency=U.BackgroundTransparency;BackgroundColor3=Z["\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\083\111\108\105\100\095\066\097\099\107\103\114\111\117\110\100\047\066\097\115\101"].Color;AutomaticSize="\088\089",Size=UDim2.fromOffset(176,56)},{Padding=O("\085\073\080\097\100\100\105\110\103",{PaddingBottom=W,PaddingLeft=W,PaddingRight=W;PaddingTop=W}),ListItem=O(r,{Icon=U.Icon and"\105\109\097\103\101\115\047\114\111\098\108\111\120\047\105\099\111\110\115\047\108\111\103\111\047\115\116\117\100\105\111\108\111\103\111\095\115\109\097\108\108\047\049\120"or nil,AnchorPoint=Vector2.new(0,0);Disabled=U.Disabled;Position=UDim2.fromScale(0,0);Selected=C.state.Selected,[m.Event.Activated]=function(...)print(...)C:setState({Selected=not C.state.Selected})end})})if U.FrameVisualizer then return O(p,{},b)else return b end end)end return{controls={Disabled=false;FrameVisualizer=false;Icon=true},stories={Button=function(C)return m.createFragment({OnBackground=O(V,w.Dictionary.join({BackgroundTransparency=0},C.controls)),NoBackground=O(V,w.Dictionary.join({BackgroundTransparency=1},C.controls))})end}}
local Winro = script.Parent.Parent.Parent
local Packages = Winro.Parent

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

local FrameVisualizer = require(Winro.Utility.FrameVisualizer)

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

local ListRoot = script.Parent
local ListItem = require(ListRoot.ListItem)

local BORDER_PADDING = UDim.new(0, 8)

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

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

	return WithTheme(function(Theme)
		local Element = new('Frame', {
			BackgroundTransparency = props.BackgroundTransparency,
			BackgroundColor3 = Theme['colors/Background/Fill_Color/Solid_Background/Base'].Color,
			AutomaticSize = 'XY',
			Size = UDim2.fromOffset(160+16, 40+16)
		}, {
			Padding = new('UIPadding', {
				PaddingBottom = BORDER_PADDING,
				PaddingLeft = BORDER_PADDING,
				PaddingRight = BORDER_PADDING,
				PaddingTop = BORDER_PADDING,
			}),
			ListItem = new(ListItem, {
				Icon = props.Icon and 'images/roblox/icons/logo/studiologo_small/1x' or nil,
				AnchorPoint = Vector2.new(0, 0),
				Disabled = props.Disabled,
				Position = UDim2.fromScale(0, 0),
				Selected = self.state.Selected,
				[Roact.Event.Activated] = function(...)
					print(...)
					self:setState({
						Selected = not self.state.Selected
					})
				end
			})
		})

		if props.FrameVisualizer then
			return new(FrameVisualizer, {}, Element)
		else
			return Element
		end
	end)
end

return {
	controls = {
		Disabled = false,
		FrameVisualizer = false,
		Icon = true,
	},
	stories = {
		Button = function (props)
			return Roact.createFragment({
				OnBackground = new(ListItemStory, Sift.Dictionary.join({
					BackgroundTransparency = 0,
				}, props.controls)),
				NoBackground = new(ListItemStory, Sift.Dictionary.join({
					BackgroundTransparency = 1,
				}, props.controls))
			})
		end
	}
}
