Input

# frozen_string_literal: true

module RubyUI
	class Input < Base
		def initialize(type: :string, **attrs)
			@type = type.to_sym
			super(**attrs)
		end

		def view_template
			input(type: @type, **attrs)
		end

		private

		def default_attrs
			{
				data: {
					ruby_ui__form_field_target: "input",
					action: "input->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
				},
				class: [
					"flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] border-border ring-0 ring-ring/0",
					"placeholder:text-muted-foreground",
					"disabled:cursor-not-allowed disabled:opacity-50",
					"file:border-0 file:bg-transparent file:text-sm file:font-medium",
					"aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none",
					"focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:border-ring focus-visible:shadow-sm",
					(@type.to_s == "file") ? "pt-[7px]" : ""
				]
			}
		end
	end
end

# frozen_string_literal: true

class Views::Docs::Input < Views::Base
	def view_template
		component = "Input"

		div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
			render Docs::Header.new(title: "Input", description: "Displays a form input field or a component that looks like an input field.")

			Heading(level: 2) { "Usage" }

			render Docs::VisualCodeExample.new(title: "Email", context: self) do
				<<~RUBY
					div(class: 'grid w-full max-w-sm items-center gap-1.5') do
						Input(type: "email", placeholder: "Email")
					end
				RUBY
			end

			render Docs::VisualCodeExample.new(title: "File", context: self) do
				<<~RUBY
					div(class: "grid w-full max-w-sm items-center gap-1.5") do
						label(for: "picture") { "Picture" }
						Input(type: "file", id: "picture")
					end
				RUBY
			end

			render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
				<<~RUBY
					div(class: 'grid w-full max-w-sm items-center gap-1.5') do
						Input(disabled: true, type: "email", placeholder: "Email")
					end
				RUBY
			end

			render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
				<<~RUBY
					div(class: 'grid w-full max-w-sm items-center gap-1.5') do
						Input(aria: {disabled: "true"}, type: "email", placeholder: "Email")
					end
				RUBY
			end

			render Docs::VisualCodeExample.new(title: "With label", context: self) do
				<<~RUBY
					div(class: 'grid w-full max-w-sm items-center gap-1.5') do
						label(for: "email1") { "Email" }
						Input(type: "email", placeholder: "Email", id: "email1")
					end
				RUBY
			end

			render Docs::VisualCodeExample.new(title: "With button", context: self) do
				<<~RUBY
					div(class: 'flex w-full max-w-sm items-center space-x-2') do
						Input(type: "email", placeholder: "Email")
						Button { "Subscribe" }
					end
				RUBY
			end

			render Components::ComponentSetup::Tabs.new(component_name: component)

			render Docs::ComponentsTable.new(component_files(component))
		end
	end
end