Textarea

package textarea

import (
	"github.com/axzilla/templui/internal/utils"
	"strconv"
)

type Props struct {
	ID          string
	Class       string
	Attributes  templ.Attributes
	Name        string
	Value       string
	Placeholder string
	Rows        int
	AutoResize  bool
	Disabled    bool
	Required    bool
}

templ Textarea(props ...Props) {
	@Script()
	{{ var p Props }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	if p.ID == "" {
		{{ p.ID = utils.RandomID() }}
	}
	<textarea
		id={ p.ID }
		data-textarea
		if p.Name != "" {
			name={ p.Name }
		}
		if p.Placeholder != "" {
			placeholder={ p.Placeholder }
		}
		if p.Rows > 0 {
			rows={ strconv.Itoa(p.Rows) }
		}
		disabled?={ p.Disabled }
		required?={ p.Required }
		if p.AutoResize {
			data-auto-resize="true"
		}
		class={
			utils.TwMerge(
				"flex w-full px-3 py-2",
				"min-h-[80px]", // Default min-height (adjust if needed)
				"rounded-md border border-input bg-background text-sm",
				"ring-offset-background",
				"placeholder:text-muted-foreground",
				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
				"disabled:cursor-not-allowed disabled:opacity-50",
				// Add overflow-hidden only if auto-resizing to prevent scrollbar flicker
				utils.If(p.AutoResize, "overflow-hidden resize-none"),
				p.Class,
			),
		}
		{ p.Attributes... }
	>{ p.Value }</textarea>
}

var handle = templ.NewOnceHandle()

templ Script() {
	@handle.Once() {
		<script defer nonce={ templ.GetNonce(ctx) }>
			(function() { // IIFE
				function initTextarea(textarea) {
					if (textarea.hasAttribute('data-initialized')) return;
					
					textarea.setAttribute('data-initialized', 'true');
					
					const autoResize = textarea.dataset.autoResize === 'true';
					if (!autoResize) return;
					
					const computedStyle = window.getComputedStyle(textarea);
					const initialMinHeight = computedStyle.minHeight;
					
					function resize() {
						textarea.style.height = initialMinHeight;
						textarea.style.height = `${textarea.scrollHeight}px`;
					}
					
					resize();
					textarea.addEventListener('input', resize);
				}
				
				function initAllComponents(root = document) {
					if (root instanceof Element && root.matches('textarea[data-textarea]')) {
						initTextarea(root);
					}
					for (const textarea of root.querySelectorAll('textarea[data-textarea]:not([data-initialized])')) {
						initTextarea(textarea);
					}
				}
				
				const handleHtmxSwap = (event) => {
					const target = event.detail.elt
					if (target instanceof Element) {
						requestAnimationFrame(() => initAllComponents(target));
					}
				};

				initAllComponents();
				document.addEventListener('DOMContentLoaded', () => initAllComponents());
				document.body.addEventListener('htmx:afterSwap', handleHtmxSwap);
				document.body.addEventListener('htmx:oobAfterSwap', handleHtmxSwap);
			})(); // End of IIFE
		</script>
	}
}