<?php
if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

if ($args) {
    extract($args);
}

$searchable_post_types = fast_fuzzy_search_get_searchable_post_types();

if(empty($options)) {
    $options = get_option('fast_fuzzy_search_options', fast_fuzzy_search_get_default_options());
};

$post_types_keys = array_keys($searchable_post_types);
$excluded_post_types = !empty($options['excluded_post_types']) ? $options['excluded_post_types'] : [];
$post_types = array_diff($post_types_keys, $excluded_post_types);

$aesthetic = apply_filters(
    'fast_fuzzy_search_aesthetic',
    !empty($options['aesthetic']) ? $options['aesthetic'] : 'minimal-light',
    $options
);

$position = !empty($options['position']) ? $options['position'] : 'bottom-center';
$inline = !empty($is_inline) && $is_inline === true ? 'fast-fuzzy-search--inline' : 'fast-fuzzy-search--'.$position;
$placeholder = !empty($options['placeholder']) ? $options['placeholder'] : __('Search for something here...', 'fast-fuzzy-search');
$hide_filters = !empty($options['hide_filters']) && $options['hide_filters'] === '1';
?>

<div 
    class="fast-fuzzy-search fast-fuzzy-search--<?php echo esc_attr($aesthetic); ?> <?php echo esc_attr($inline); ?> group"
    x-bind:data-loading="isLoading"
    x-data="fastFuzzySearchPanel"
    <?php if(empty($is_inline)): ?>
        x-bind:data-has-query="hasQuery"
    <?php else: ?>
        data-has-query="true"
        x-on:click.outside="hide"
        x-on:keydown.window.esc="hide"
    <?php endif; ?>
    >
    
    <form 
        action="<?php echo esc_url(home_url('/')); ?>" 
        x-ref="form"
        method="get">
        <div class="fast-fuzzy-search__field">
            <span class="fast-fuzzy-search__icon">
                <span x-cloak class="fast-fuzzy-search__icon-frame" x-show="isNotLoading">
                    <?php echo wp_kses(fast_fuzzy_search_svg('search'), fast_fuzzy_search_allowed_svg_tags()); ?>
                </span>

                <span class="fast-fuzzy-search__icon-frame" x-show="isLoading">
                    <?php echo wp_kses(fast_fuzzy_search_svg('loading'), fast_fuzzy_search_allowed_svg_tags()); ?>
                </span>
            </span>

            <input
                class="fast-fuzzy-search__input"
                type="text"
                name="s"
                placeholder="<?php echo esc_attr($placeholder); ?>"
                value="<?php echo get_search_query(); ?>"
                x-ref="searchInput"
                x-on:input="handleInput"
                x-on:site-search.window="searchDebounced"
                x-on:keydown.window="handleArrowNavigation"
                x-on:keydown.enter.prevent="selectResultWithEnter"
                x-on:keydown.esc.prevent="hide"
                id="search"
                aria-autocomplete="list"
                aria-controls="search-results"
                autocomplete="off"
                style="border:none !important;outline:none !important; background:transparent !important; width:100% !important; padding:0 !important; margin:0 !important; color: inherit !important; font: inherit !important;"
            >

            <span
                class="fast-fuzzy-search__clear"
                x-show="hasQuery"
                x-on:click.prevent="handleXClick">
                <button>
                    <span class="fast-fuzzy-search__icon-frame"><?php echo wp_kses(fast_fuzzy_search_svg('x'), fast_fuzzy_search_allowed_svg_tags()); ?></span>
                </button>
            </span>
        </div>
    </form>

    <div
        x-cloak
        <?php if(empty($is_inline)): ?>
            x-collapse
            x-show="hasQuery"
        <?php endif; ?>
        class="fast-fuzzy-search__panel">

        <?php if (!$hide_filters && count($post_types) > 1) : ?>
            <div x-show="doesNotHavePrefix" class="fast-fuzzy-search__post-types">
                <ul class="fast-fuzzy-search__chip-list">
                    <li>
                        <button 
                            x-on:click="handlePostTypeButtonClick"
                            class="fast-fuzzy-search__chip-button"
                            x-bind:aria-selected="isPostTypeNotSelected">
                            <span
                                x-cloak
                                x-show="isPostTypeNotSelected">
                                <?php echo wp_kses(fast_fuzzy_search_svg('circle'), fast_fuzzy_search_allowed_svg_tags()); ?>
                            </span>
                            <?php esc_html_e('All', 'fast-fuzzy-search'); ?>
                        </button>
                    </li>

                    <?php foreach ($post_types as $index => $post_type) : if(!post_type_exists($post_type)) { continue; } ?>
                        <li data-type="<?php echo esc_attr($post_type); ?>">
                            <button
                                x-on:click="handlePostTypeButtonClick" 
                                class="fast-fuzzy-search__chip-button"
                                x-bind:aria-selected="isPostTypeSelected">
                                <span
                                    x-cloak
                                    x-show="isPostTypeSelected">
                                    <?php echo wp_kses(fast_fuzzy_search_svg('circle'), fast_fuzzy_search_allowed_svg_tags()); ?>
                                </span>
                                <?php echo esc_html(!empty($searchable_post_types[$post_type]) ? $searchable_post_types[$post_type] : $post_type); ?>
                            </button>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        <?php endif; ?>

        <h2 
            x-cloak 
            x-show="hasPrefix" 
            class="fast-fuzzy-search__context">
            <?php esc_html_e('Searching in ', 'fast-fuzzy-search'); ?> <span x-text="prefix"></span>
        </h2>
        
        <ul 
            x-cloak
            class="fast-fuzzy-search__results fast-fuzzy-search__scrollbar" 
            id="search-results" 
            role="listbox" 
            aria-label="Search results" 
            x-show="shouldShowResults">

            <template x-for="(result, index) in displayedItems" :key="index">
                <li 
                    class="fast-fuzzy-search__result-item" 
                    role="option" 
                    x-bind:data-index="index"
                    x-on:click="selectResult">
                    <a
                        class="fast-fuzzy-search__result-link group"
                        x-bind:aria-selected="isActive"
                        x-bind:href="permalink"
                        x-show="result"
                    >
                        <img
                            class="fast-fuzzy-search__result-image"
                            x-bind:data-index="index"
                            x-show="featuredImage"
                            x-bind:src="featuredImage"
                            x-bind:alt="primaryInfo"
                        />

                        <span
                            class="fast-fuzzy-search__result-icon"
                            x-show="noFeaturedImage">
                            <span x-cloak x-show="isHashLink">
                                <?php echo wp_kses(fast_fuzzy_search_svg('hash'), fast_fuzzy_search_allowed_svg_tags()); ?>
                            </span>

                            <span x-cloak x-show="isNormalLink">
                                <?php echo wp_kses(fast_fuzzy_search_svg('link'), fast_fuzzy_search_allowed_svg_tags()); ?>
                            </span>
                        </span>

                        <span class="fast-fuzzy-search__result-content">
                            <span class="fast-fuzzy-search__result-text">
                                <span class="fast-fuzzy-search__result-primary" x-show="primaryInfo" x-text="primaryInfo"></span>
                                <span class="fast-fuzzy-search__result-secondary" x-show="secondaryInfo" x-text="secondaryInfo"></span>
                            </span>
                            <span class="fast-fuzzy-search__chip" x-show="itemLabel" x-text="itemLabel"></span>
                        </span>
                    </a>
                </li>
            </template>
        </ul>

        <button
            type="button"
            class="fast-fuzzy-search__view-all"
            x-show="shouldShowViewAll"
            x-cloak
            x-on:click="showAllResults"
        >
            <span x-text="viewAllText">View all 0 results</span>
            <?php echo wp_kses(fast_fuzzy_search_svg('arrow-down', 'fast-fuzzy-search__view-all-icon'), fast_fuzzy_search_allowed_svg_tags()); ?>
        </button>

        <div
            x-cloak
            x-show="isEmpty"
            class="fast-fuzzy-search__empty">
            <?php echo wp_kses(fast_fuzzy_search_svg('search'), fast_fuzzy_search_allowed_svg_tags()); ?>
            <p class="fast-fuzzy-search__empty-title"><?php esc_html_e('Start typing to search', 'fast-fuzzy-search'); ?></p>
            <p class="fast-fuzzy-search__empty-description"><?php esc_html_e('Find posts, pages, and products across your site.', 'fast-fuzzy-search'); ?></p>
        </div>

        <div
            x-cloak
            x-show="noResults"
            class="fast-fuzzy-search__empty">
            <?php echo wp_kses(fast_fuzzy_search_svg('x'), fast_fuzzy_search_allowed_svg_tags()); ?>
            <p class="fast-fuzzy-search__empty-title"><?php esc_html_e('No results found', 'fast-fuzzy-search'); ?></p>
            <p class="fast-fuzzy-search__empty-description"><?php esc_html_e('Try different keywords or check your spelling.', 'fast-fuzzy-search'); ?></p>
        </div>

        <div class="fast-fuzzy-search__keyboard-shortcuts">
            <span class="fast-fuzzy-search__keyboard-shortcuts-text"><?php esc_html_e('Navigate', 'fast-fuzzy-search'); ?></span>
            <kbd class="fast-fuzzy-search__kbd" aria-label="<?php esc_attr_e('Up arrow', 'fast-fuzzy-search'); ?>"><?php echo wp_kses(fast_fuzzy_search_svg('arrow-up'), fast_fuzzy_search_allowed_svg_tags()); ?></kbd>
            <kbd class="fast-fuzzy-search__kbd" aria-label="<?php esc_attr_e('Down arrow', 'fast-fuzzy-search'); ?>"><?php echo wp_kses(fast_fuzzy_search_svg('arrow-down'), fast_fuzzy_search_allowed_svg_tags()); ?></kbd>
            <span class="fast-fuzzy-search__keyboard-shortcuts-sep">·</span>
            <span class="fast-fuzzy-search__keyboard-shortcuts-text"><?php esc_html_e('Select', 'fast-fuzzy-search'); ?></span>
            <kbd class="fast-fuzzy-search__kbd" aria-label="<?php esc_attr_e('Enter', 'fast-fuzzy-search'); ?>"><?php echo wp_kses(fast_fuzzy_search_svg('arrow-back'), fast_fuzzy_search_allowed_svg_tags()); ?></kbd>
            <span class="fast-fuzzy-search__keyboard-shortcuts-sep">·</span>
            <span class="fast-fuzzy-search__keyboard-shortcuts-text"><?php esc_html_e('Close', 'fast-fuzzy-search'); ?></span>
            <kbd class="fast-fuzzy-search__kbd" aria-label="<?php esc_attr_e('Escape', 'fast-fuzzy-search'); ?>"><?php echo wp_kses(fast_fuzzy_search_svg('letter-e'), fast_fuzzy_search_allowed_svg_tags()); ?></kbd>
        </div>
    </div>
</div>
