<script>
    import {createEventDispatcher, getContext} from "svelte";
    import Index from "../../content/Index.svelte";

    const dispatch = createEventDispatcher();
    const channel = getContext("channel");
    $: data = {};
    let isOpen = false;
    let selectedRecords = [];
    // onMount(() => {
    //     load();
    // });

    export function open(schema) {
        isOpen = true;
        load(schema);
    }

    export function close() {
        isOpen = false;
        selectedRecords = [];
    }

    function load(schema) {
        axios
            .get(channel.lucentUrl + "/content/" + schema)
            .then((response) => {
                data = response.data;
            })
            .catch((error) => console.log(error));
    }

    function insert(e) {
        e.preventDefault();
        dispatch("insert", {
            records: selectedRecords,
            action: "insert",
        });
    }

    function replace(e) {
        e.preventDefault();
        dispatch("insert", {
            records: selectedRecords,
            action: "replace",
        });
    }
</script>

{#if data.schema}
    <div
        class="modal fade show"
        tabindex="-1"
        class:d-block={isOpen}
        aria-modal="true"
        role="dialog"
        style="background: rgba(100,100,100,.6);"
    >
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex align-items-center">
                        <button
                            type="button"
                            class="btn btn-primary me-1"
                            on:click={insert}
                            disabled={selectedRecords.length === 0}
                        >
                            Insert
                        </button>
                        <button
                            type="button"
                            class="btn btn-outline-primary  me-3"
                            on:click={replace}
                            disabled={selectedRecords.length === 0}
                        >
                            Replace
                        </button>
                        {#if selectedRecords.length > 0}
                            <span class="">
                                {selectedRecords.length} records selected
                            </span>
                        {/if}
                    </div>

                    <button
                        on:click|preventDefault={(e) => (isOpen = false)}
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                    />
                </div>
                <div class="modal-body">
                    <Index {...data} bind:selected={selectedRecords}/>
                </div>
            </div>
        </div>
    </div>
{/if}

<style>
    .modal-dialog {
        width: auto;
        max-width: 100%;

    }

    .modal-content {
        margin: 40px auto;
        width: auto;
        height: 100%;
    }
</style>
