<!-- show search results -->
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { _ } from "svelte-i18n";
import Aggregations from "./_dd_aggregations.svelte";
import Pagination from "./_pagination.svelte";
import Loading from "./_loading.svelte";
import Tag from "./_tag.svelte";
import Error from "./_error.svelte";
import SortMenu from "./_sort.svelte";
import type { Indexea } from "@/openapi";
import type { WidgetBean } from "@indexea/sdk";
import type { SearchContext } from "@indexea/sdk/context";

const dispatch = createEventDispatcher();

export let indexea: Indexea;
export let widget: WidgetBean;
export let props: any;
export let context: SearchContext;
export let results: any;
export let error_msg: string;

let itemsPerPage = context.itemsPerPage;

//@ts-ignore
$: query = widget.queries.find((q) => q.id == context.query);

$: totalItems = results?.hits?.total.value || 0;
$: records = results?.hits?.hits;

function getFieldValue(fields: any, key: string) {
    if (!key) return null;
    var v = fields[key];
    if (v === 0) return 0;
    if (!v) {
        //nest properties like user.region.city
        var keys = key.split(".");
        for (var i = 0; i < keys.length; i++) {
            v = v ? v[keys[i]] : fields[keys[i]];
            if (typeof v != "object") {
                break;
            }
        }
    }
    return v || "";
}
/**
 * 提取搜索建议结果中最适合的建议
 * @param {*} suggests
 */
export function parseSearchSugguest(suggests: any): string[] {
    var words: string[] = [];
    Object.entries(suggests).forEach(([k, values]) => {
        values.forEach((v) => {
            var s = v.options.reduce(
                (a, b) => {
                    if (a.freq && b.freq) return a.freq > b.freq ? a : b;
                    else return a.score > b.score ? a : b;
                },
                { text: "", score: 0, freq: 0 }
            );
            if (s.text) words.push(s.text);
        });
    });
    return words;
}
</script>

{#if error_msg}
    <Error msg={error_msg} />
{:else if records}
    <div class="results mt-3">
        <!-- 显示建议词汇 -->
        {#if results.suggest}
            {@const sugs = parseSearchSugguest(results.suggest)}
            {#if sugs.length > 0}
                <small class="d-block text-muted mb-3" id="suggests">
                    {$_("suggests")}
                    {#each sugs as sug}
                        <a
                            href="?q={sug}"
                            class="me-2"
                            on:click|preventDefault={() => dispatch("search", sug)}
                        >
                            {sug}
                        </a>
                    {/each}
                </small>
            {/if}
        {/if}
        <small class="text-muted d-block mb-1">
            {#if totalItems > 0}
                <div class="float-end">
                    {#if query?.sortFields?.length > 0}
                        <SortMenu {context} sortFields={query.sortFields} on:sort />
                    {/if}
                    {#if results.aggregations}
                        <!-- Dropdown menu links -->
                        <Aggregations {context} aggregations={results.aggregations} on:filter />
                    {/if}
                </div>
            {/if}
            {@html $_("summary", {
                values: { q: context.q, total: totalItems, took: results.took },
            })}
        </small>
        <!-- show filters -->
        {#if context.filters.length > 0}
            <div class="my-3">
                {#each context.filters as f}
                    {#if !f.interval}
                        <Tag
                            label={f.value || $_("empty_tag")}
                            on:click={() =>
                                dispatch("deleteFilter", { name: f.name, value: f.value })}
                        />
                    {/if}
                {/each}
            </div>
        {/if}
        <!-- show results -->
        {#each records as hit, i}
            {@const fields = { ...hit._source, ...hit.fields }}
            <!-- combine _source with fields //-->
            {@const titleField = props["title-" + context.query]}
            {@const urlField = props["url-" + context.query]}
            {@const outlineField = props["outline-" + context.query]}
            {@const thumbnailField = props["thumbnail-" + context.query]}
            {@const metadataFields = props["metadatas-" + context.query]}
            {@const thumbnails = getFieldValue(fields, thumbnailField)}
            {@const thumbnail = Array.isArray(thumbnails) ? thumbnails[0] : thumbnails}
            <div class="card mb-3">
                <div class="card-body">
                    <div class="d-flex p-0">
                        {#if thumbnail}
                            <img class="thumbnail" src={thumbnail} alt="..." />
                        {/if}
                        <div class="m-0 p-0 flex-grow-1 row">
                            {#if titleField}
                                <h5 class="card-title px-0">
                                    {#if urlField}
                                        <a
                                            rel="noreferrer"
                                            href={getFieldValue(fields, urlField)}
                                            on:click={(e) => indexea.click(results.action, hit._id)}
                                            target="_blank"
                                        >
                                            {#if hit.highlight && hit.highlight[titleField]}
                                                {@html hit.highlight[titleField]}
                                            {:else}
                                                {getFieldValue(fields, titleField)}
                                            {/if}
                                        </a>
                                    {:else if hit.highlight && hit.highlight[titleField]}
                                        {@html hit.highlight[titleField]}
                                    {:else}
                                        {getFieldValue(fields, titleField)}
                                    {/if}
                                </h5>
                            {/if}
                            <div class="card-text px-0">
                                {#if outlineField}
                                    <div class="col-12">
                                        {#if hit.highlight && hit.highlight[outlineField]}
                                            {@html hit.highlight[outlineField]}
                                        {:else}
                                            {getFieldValue(fields, outlineField)}
                                        {/if}
                                    </div>
                                {/if}
                                {#if metadataFields}
                                    <div class="col-8 text-muted mt-2">
                                        {#each metadataFields.split(",") as mfn}
                                            <span class="me-2">
                                                {mfn}
                                                {getFieldValue(fields, mfn)}
                                            </span>
                                        {/each}
                                    </div>
                                {/if}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {/each}
    </div>
    <Pagination
        {totalItems}
        {itemsPerPage}
        page={context.page}
        on:page={(e) => dispatch("page", e.detail)}
    />
{:else}
    <Loading height="60vh" />
{/if}
