<!-- render widget -->
<script lang="ts">
import { WidgetLayout } from "@indexea/sdk/layout";
import Input from "./_input.svelte";
import Results from "./_results.svelte";
import Hotwords from "./_hotwords.svelte";
import Aggregations from "./_aggregations.svelte";
import Queries from "./_queries.svelte";
import type { Indexea } from "@/openapi";
import type { WidgetBean } from "@indexea/sdk";
import type { SearchContext } from "@indexea/sdk/context";

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

let xml = WidgetLayout.parse(widget.layout || "<layout/>");
</script>

{#each xml.rows() as row, r}
    <div class="row">
        {#each row.getElementsByTagName("col") as col, c}
            <div class="col-sm-{col.getAttribute('width')}">
                {#each col.getElementsByTagName("control") as control, i}
                    {@const ctype = control.getAttribute("type")}
                    {@const props = xml.getAttributes(ctype)}
                    <div class="control">
                        {#if ctype == "input"}
                            <Input {indexea} {widget} {props} {context} on:search />
                        {:else if ctype == "indices"}
                            <Queries {widget} {props} {context} {results} on:switchQuery />
                        {:else if ctype == "results"}
                            <Results
                                {indexea}
                                {widget}
                                {props}
                                {context}
                                {results}
                                {error_msg}
                                on:page
                                on:deleteFilter
                                on:sort
                                on:filter
                                on:search
                            />
                        {:else if ctype == "hotwords"}
                            <Hotwords {indexea} {props} {context} on:search />
                        {:else if ctype == "aggregation"}
                            <Aggregations {props} {context} {results} on:filter />
                        {/if}
                    </div>
                {/each}
            </div>
        {/each}
    </div>
{/each}
