<script lang="ts">
    import {
        Dropdown,
        DropdownMenu,
        DropdownItem,
        DropdownToggle,
        Form,
        FormGroup,
        InputGroup,
        InputGroupAddon,
        InputGroupText,
        Label,
        Input,
    } from "sveltestrap";
    import DatetimePicker from "./DatetimePicker.svelte";

    let menuItem = [
        { label: "Domain Name", key: "domain" },
        { label: "Client IP", key: "clientIp" },
        { label: "Protocol", key: "protocol" },
        { label: "Status", key: "status" },
    ];

    let selected = menuItem[0];
    const selectItem = (selectedItem) => {
        selected = selectedItem;
        handleOnChange();
    };

    let searchFilter = "";
    let startDate = new Date();
    let endDate = new Date();

    const handleOnChange = () => {
        if (onChange) {
            const event = {
                terms: searchFilter,
                start: startDate,
                end: endDate,
                key: selected.key,
            };

            onChange(event);
        }
    };

    export let onChange = (evt) =>
        console.log("no handler bound to SearchOptions.svelte: ", evt);
</script>

<div class="w-full flex flex-row">
    <section class="w-full flex flex-row">
        <FormGroup class="flex-grow flex flex-row mx-2">
            <InputGroup>
                <InputGroupAddon addonType="prepend">
                    <InputGroupText>Search</InputGroupText>
                </InputGroupAddon>
                <Input
                    id="search"
                    type="search"
                    on:change={handleOnChange}
                    bind:value={searchFilter}
                />
            </InputGroup>
        </FormGroup>
        <FormGroup class="flex flex-row">
            <DatetimePicker label="Start" />
            <DatetimePicker label="End" />
        </FormGroup>
        <FormGroup class="mx-2">
            <Dropdown>
                <DropdownToggle caret>By {selected.label}</DropdownToggle>
                <DropdownMenu>
                    {#each menuItem as item}
                        <DropdownItem active={selected.key === item.key}>
                            <span on:click={() => selectItem(item)}>
                                {item.label}
                            </span>
                        </DropdownItem>
                    {/each}
                </DropdownMenu>
            </Dropdown>
        </FormGroup>
    </section>
</div>
