CT/src/View/Modals/searchModal.tsx

import { v4 } from "uuid";
import * as React from "bloatless-react";
import { ViewController } from "../viewController";
import { StringToOption } from "../Components/option";
import SearchViewModel from "../../ViewModel/Utility/searchViewModel";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";

export function SearchModal<T>(
    coreViewModel: CoreViewModel,
    searchViewModel: SearchViewModel<T>,
    headline: string,
    isOpen: React.State<boolean>,
) {
    function close() {
        isOpen.value = false;
    }

    const suggestionId = v4();

    isOpen.subscribe((isOpen) => {
        if (!isOpen) return;
        ViewController.setFocusWithDelay();
    });

    return (
        <div class="modal" toggle:open={isOpen} extended>
            <div>
                <main>
                    <h2>{headline}</h2>
                    <div class="flex-row">
                        <input
			    id="focused"
			    style="max-width: unset"
                            placeholder={
                                coreViewModel.translations.general.searchLabel
                            }
                            bind:value={searchViewModel.searchInput}
                            on:enter={searchViewModel.applySearch}
                            list={suggestionId}
                        ></input>
                        <datalist
                            hidden
                            id={suggestionId}
                            children:append={[
                                searchViewModel.suggestions,
                                StringToOption,
                            ]}
                        ></datalist>
                        <button
                            class="standard"
                            aria-label={
                                coreViewModel.translations.general
                                    .searchButtonClearAudioLabel
                            }
                            on:click={searchViewModel.clear}
                            toggle:disabled={searchViewModel.cannotClear}
                        >
                            <span class="icon">close</span>
                        </button>
                        <button
                            class="primary"
                            aria-label={
                                coreViewModel.translations.general
                                    .searchButtonAudioLabel
                            }
                            on:click={searchViewModel.applySearch}
                            toggle:disabled={searchViewModel.cannotApplySearch}
                        >
                            <span class="icon">search</span>
                        </button>
                    </div>

		    <hr></hr>

		    <h3>{coreViewModel.translations.general.searchSuggestionsLabel}</h3>

                    <div
                        class="flex-column gap"
                        children:append={[
                                searchViewModel.suggestions,
			    (suggestion: string) => SuggestionView(suggestion, searchViewModel, coreViewModel),
                        ]}
                    ></div>
                </main>
                <button on:click={close}>
                    {coreViewModel.translations.general.closeButton}
                    <span class="icon">close</span>
                </button>
            </div>
        </div>
    );
}

function SuggestionView<T>(suggestion: string, searchViewModel: SearchViewModel<T>, coreViewModel: CoreViewModel) {
    const isApplied = React.createProxyState([searchViewModel.appliedQuery], ()=>searchViewModel.appliedQuery.value == suggestion);

    function deleteSuggestion() {
	searchViewModel.deleteSuggestion(suggestion);
    }
    
    function applySuggestion() {
	searchViewModel.search(suggestion);
    }

    return <div class="flex-row surface align-center">
	<span class="width-100 flex-1 padding-h">{suggestion}</span>
	<button 
	    class="danger"
	    aria-label={coreViewModel.translations.general.deleteButton}
	    on:click={deleteSuggestion}
	>
	    <span class="icon">delete</span>
	</button>
	<button 
	    class="primary"
	    aria-label={coreViewModel.translations.general.applyButton}
	    on:click={applySuggestion}
	    toggle:disabled={isApplied}
	>
	    <span class="icon">check</span>
	</button>
    </div>
}