local n=script:FindFirstAncestor("\077\097\122\101\071\101\110\101\114\097\116\111\114\080\108\117\103\105\110")local Z=n.Plugin local w=require(n:WaitForChild("\082\111\097\099\116"))local i=require(Z.Assets)local X=require(Z.Components.Theme)local G=w.createElement local K=i.Slices.RoundBox local V=22 local F=8 local y=w.Component:extend("\070\111\114\109\084\101\120\116\073\110\112\117\116")function y.init(n)n:setState({focused=false})end function y.render(n)local Z=n.props.value local i=n.props.placeholderValue local y=n.props.onValueChange local J=n.props.layoutOrder local v=n.props.width local m if n.state.focused then m=""else m=i end return X.with(function(i)return G("\073\109\097\103\101\076\097\098\101\108",{LayoutOrder=J;Image=K.asset;ImageRectOffset=K.offset,ImageRectSize=K.size;ScaleType=Enum.ScaleType.Slice,SliceCenter=K.center;ImageColor3=i.Background2;Size=UDim2.new(v.Scale,v.Offset,0,V+F*2),BackgroundTransparency=1},{InputInner=G("\084\101\120\116\066\111\120",{BackgroundTransparency=1;Size=UDim2.new(1,-F*2,1,-F*2);Position=UDim2.new(.5,0,.5,0);AnchorPoint=Vector2.new(.5,.5),Font=i.InputFont,ClearTextOnFocus=false,TextXAlignment=Enum.TextXAlignment.Center,TextSize=V,Text=Z,PlaceholderText=m;PlaceholderColor3=i.Text2,TextColor3=i.Text1;[w.Change.Text]=function(n)y(n.Text)end;[w.Event.Focused]=function()n:setState({focused=true})end,[w.Event.FocusLost]=function()n:setState({focused=false})end})})end)end return y
local Root = script:FindFirstAncestor('MazeGeneratorPlugin')
local Plugin = Root.Plugin

local Roact = require(Root:WaitForChild('Roact'))

local Assets = require(Plugin.Assets)
local Theme = require(Plugin.Components.Theme)

local e = Roact.createElement

local RoundBox = Assets.Slices.RoundBox

local TEXT_SIZE = 22
local PADDING = 8

local FormTextInput = Roact.Component:extend('FormTextInput')

function FormTextInput:init()
	self:setState({ focused = false })
end

function FormTextInput:render()
	local value = self.props.value
	local placeholderValue = self.props.placeholderValue
	local onValueChange = self.props.onValueChange
	local layoutOrder = self.props.layoutOrder
	local width = self.props.width

	local shownPlaceholder
	if self.state.focused then
		shownPlaceholder = ''
	else
		shownPlaceholder = placeholderValue
	end

	return Theme.with(function(theme)
		return e(
			'ImageLabel',
			{
				LayoutOrder = layoutOrder,
				Image = RoundBox.asset,
				ImageRectOffset = RoundBox.offset,
				ImageRectSize = RoundBox.size,
				ScaleType = Enum.ScaleType.Slice,
				SliceCenter = RoundBox.center,
				ImageColor3 = theme.Background2,
				Size = UDim2.new(width.Scale, width.Offset, 0, TEXT_SIZE + PADDING * 2),
				BackgroundTransparency = 1,
			},
			{ InputInner = e('TextBox', {
				BackgroundTransparency = 1,
				Size = UDim2.new(1, -PADDING * 2, 1, -PADDING * 2),
				Position = UDim2.new(0.5, 0, 0.5, 0),
				AnchorPoint = Vector2.new(0.5, 0.5),
				Font = theme.InputFont,
				ClearTextOnFocus = false,
				TextXAlignment = Enum.TextXAlignment.Center,
				TextSize = TEXT_SIZE,
				Text = value,
				PlaceholderText = shownPlaceholder,
				PlaceholderColor3 = theme.Text2,
				TextColor3 = theme.Text1,
				[Roact.Change.Text] = function(rbx)
					onValueChange(rbx.Text)
				end,
				[Roact.Event.Focused] = function()
					self:setState({ focused = true })
				end,
				[Roact.Event.FocusLost] = function()
					self:setState({ focused = false })
				end,
			}) }
		)
	end)
end

return FormTextInput