<?php
// components/Form/SearchInput.php
namespace Components\Form;

use Components\Base;

class SearchInput extends \Components\Base {
    /**
     * Renders an expandable search input with a clear button.
     * 
     * @param string $name
     * @param string $value
     * @param array $opts
     * @return string
     */
    public static function render(string $name, string $value = '', array $opts = []): string {
        $model = (string)($opts['model'] ?? 'searchQuery');
        $placeholder = (string)($opts['placeholder'] ?? \mh_lng('UI_SEARCH', 'Search...'));
        $expandable = (bool)($opts['expandable'] ?? true);
        $size = (string)($opts['size'] ?? 'md');
        $label = (string)($opts['label'] ?? 'Search');
        $expandLabel = (string)($opts['expand_label'] ?? \mh_lng('UI_SEARCH', 'Search'));
        
        // Container classes for expansion
        $containerClass = (string)($opts['container_class'] ?? 'flex-1');
        
        $xData = $expandable ? ' x-data="{ focused: false }"' : '';
        $baseClasses = 'relative transition-all duration-300 ease-in-out';
        $isExpandedExpr = 'focused || ' . $model . ' !== \'\'';
        
        if ($expandable) {
            $widthClass = ' :class="' . $isExpandedExpr . ' ? \'max-w-xs\' : \'max-w-9\'"';
        } else {
            $widthClass = ' max-w-xs';
        }

        ob_start();
        ?>
        <div<?= $xData; ?> class="<?= $baseClasses; ?> <?= $containerClass; ?>"<?= $widthClass; ?>>
            <?php if ($expandable): ?>
                <button
                    type="button"
                    x-show="!(<?= $isExpandedExpr; ?>)"
                    @click="focused = true; $nextTick(() => $refs.searchInput && $refs.searchInput.focus())"
                    class="absolute inset-0 z-10 flex items-center justify-center text-secondary/70  hover:text-emphasis focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md"
                    aria-label="<?= self::h($expandLabel, false); ?>"
                >
                    <?= Base::SVG_SEARCH; ?>
                </button>
            <?php endif; ?>
            <?= Input::render($name, $label, $value, [
                'no_label' => true,
                'prefix_icon_html' => $expandable ? '<span x-show="' . $isExpandedExpr . '">' . Base::SVG_SEARCH . '</span>' : Base::SVG_SEARCH,
                'suffix_icon_html' => '<button type="button" x-show="' . $model . ' !== \'\'" @click="' . $model . ' = \'\'; $nextTick(() => $el.closest(\'.relative\').querySelector(\'input\').focus())" class="flex items-center justify-center text-secondary hover:text-emphasis focus:outline-none">' . Base::SVG_X_MARK . '</button>',
                'input_type' => 'search',
                'size' => $size,
                'input_attrs' => 'placeholder="' . self::h($placeholder) . '" x-model.debounce.200ms="' . $model . '"' . ($expandable ? ' x-ref="searchInput" @focus="focused = true" @blur="focused = false" :class="' . $isExpandedExpr . ' ? \'opacity-100 pointer-events-auto\' : \'w-0 min-w-0 px-0 border-transparent bg-transparent shadow-none opacity-0 pointer-events-none\'"' : ''),
                'container_class' => '', // Reset container class as we wrap it
            ]); ?>
        </div>
        <?php
        return ob_get_clean();
    }
}
