local e=require(script.Parent.BaseClass)local y=require(script.Parent.Parent)local h={}h.__index=h setmetatable(h,e)function h.new(e)local l=y.makeStatefulDefaults({Text="\076\105\115\116\073\116\101\109 \076\097\098\101\108",Value=Color3.new(1,0,0);Selected=Color3.new(1,0,0)},e)l.Selected._value=y.peek(l.Value)l._instance=(y.new("\084\101\120\116\066\117\116\116\111\110"))({AutoLocalize=false;Text="";BackgroundColor3=l.Value,AnchorPoint=Vector2.new(1,.5),Size=y.compute(function(e)local h=e(y.Theme.FontSize)+(e(y.Theme.Padding)).Offset return UDim2.new(0,h,0,h)end);Position=UDim2.new(1,0,.5,0);(y.new("\085\073\067\111\114\110\101\114"))({CornerRadius=y.Theme.CornerRadius});(y.new("\085\073\083\116\114\111\107\101"))({ApplyStrokeMode=Enum.ApplyStrokeMode.Border;Transparency=y.Theme.TransparencyClamped,Color=y.Theme.Border}),[y.Event]={Activated=function()y.toggleState(l._dialog.Visible,"\102\108\111\097\116\105\110\103")local e=y.peek(l._dialog.Visible)if e then y.Sound.Hover03:Play()else y.Sound.Hover01:Play()end end}})local p=y.state(l._instance,"\065\098\115\111\108\117\116\101\080\111\115\105\116\105\111\110")l._dialog=(y.new("\067\111\108\111\114\080\105\099\107\101\114"))({ZIndex=100;Parent=y.LayerTop;Value=l.Value;Selected=l.Selected;AnchorPoint=Vector2.new(1,0);BackgroundColor3=y.Theme.Primary,BackgroundTransparency=0,Position=y.compute(function(e)local h=e(p)return UDim2.fromOffset(h.x+24,((h.y+24)+(e(y.Theme.PaddingHalf)).Offset)+(e(y.TopbarInset)).Height)end);(y.new("\085\073\067\111\114\110\101\114"))({CornerRadius=y.compute(function(e)return UDim.new(0,(e(y.Theme.CornerRadius)).Offset+(e(y.Theme.Padding)).Offset)end)}),(y.new("\085\073\083\116\114\111\107\101"))({Enabled=y.Theme.StrokeEnabled,ApplyStrokeMode=Enum.ApplyStrokeMode.Border;Transparency=y.Theme.TransparencyClamped;Color=y.Theme.Border})})y.UserInputService.InputBegan:Connect(function(e,h)if(e.UserInputType==Enum.UserInputType.MouseButton1 or e.UserInputType==Enum.UserInputType.Touch)and(l._dialog._instance.Visible and(not y.pointInGuiObject(e.Position.X,e.Position.Y,l._dialog._instance)and not y.pointInGuiObject(e.Position.X,e.Position.Y,l._instance)))then l._dialog._instance.Visible=false end end)return setmetatable(l,h)end return h
local BaseClass = require(script.Parent.BaseClass)
local UI = require(script.Parent.Parent)

-- a simple color square, when clicked shows a color picker dialog

local Color = {}
Color.__index = Color
setmetatable(Color, BaseClass)

function Color.new(definition)
	local new = UI.makeStatefulDefaults({
		Text = "ListItem Label",
		Value = Color3.new(1, 0, 0),
		Selected = Color3.new(1, 0, 0),
	}, definition)

	new.Selected._value = UI.peek(new.Value)

	new._instance = UI.new "TextButton" {
		AutoLocalize = false,
		Text = "",
		BackgroundColor3 = new.Value,
		AnchorPoint = Vector2.new(1, 0.5),
		Size = UI.compute(function(use)
			local height = use(UI.Theme.FontSize) + use(UI.Theme.Padding).Offset
			return UDim2.new(0, height, 0, height)
		end),
		Position = UDim2.new(1, 0, 0.5, 0),

		UI.new "UICorner" {
			CornerRadius = UI.Theme.CornerRadius,
		},
		UI.new "UIStroke" {
			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
			Transparency = UI.Theme.TransparencyClamped,
			Color = UI.Theme.Border,
		},

		[UI.Event] = {
			Activated = function()
				UI.toggleState(new._dialog.Visible, "floating")
				local value = UI.peek(new._dialog.Visible)
				if value then
					UI.Sound.Hover03:Play()
				else
					UI.Sound.Hover01:Play()
				end
			end,
		},
	}

	local absolutePosition = UI.state(new._instance, "AbsolutePosition")

	new._dialog = UI.new "ColorPicker" {
		ZIndex = 100,
		Parent = UI.LayerTop,
		Value = new.Value,
		Selected = new.Selected,
		AnchorPoint = Vector2.new(1, 0),
		BackgroundColor3 = UI.Theme.Primary,
		BackgroundTransparency = 0,
		Position = UI.compute(function(use)
			local pos = use(absolutePosition)
			return UDim2.fromOffset(
				pos.x + 24,
				pos.y + 24 + use(UI.Theme.PaddingHalf).Offset + use(UI.TopbarInset).Height
			)
		end),

		UI.new "UICorner" {
			CornerRadius = UI.compute(function(use)
				return UDim.new(0, use(UI.Theme.CornerRadius).Offset + use(UI.Theme.Padding).Offset)
			end),
		},
		UI.new "UIStroke" {
			Enabled = UI.Theme.StrokeEnabled,
			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
			Transparency = UI.Theme.TransparencyClamped,
			Color = UI.Theme.Border,
		},
	}

	UI.UserInputService.InputBegan:Connect(function(input, gameProcessed)
		if
			(input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch)
			and new._dialog._instance.Visible
			and not UI.pointInGuiObject(input.Position.X, input.Position.Y, new._dialog._instance)
			and not UI.pointInGuiObject(input.Position.X, input.Position.Y, new._instance)
		then
			new._dialog._instance.Visible = false
		end
	end)

	return setmetatable(new, Color)
end

return Color
