<script>

import {database} from "../builderStore";
import getIcon from "../common/icon";
import Button from "../common/Button.svelte";
import Modal from "../common/Modal.svelte";
import TriggerView from "./TriggerView.svelte";


export let editingTrigger = null;
export let editingTriggerIsNew = true;
export let onTriggerEdit = (trigger) => {};
export let onTriggerDelete = (trigger) => {};
export let onTriggerSave = (trigger) => {};
export let onTriggerCancel = () => {};

$: isEditing = (editingTrigger !== null); 

let triggerEditingFinished = (trigger) => {
    
    if(trigger) {
        onTriggerSave(trigger)
    } else {
        onTriggerCancel();
    }
}

</script>

<h3>Triggers</h3>

{#if $database.triggers}
<table class="fields-table uk-table uk-table-small">
    <thead>
        <tr>
            <th>Event</th>
            <th>Action</th>
            <th>Condition</th>
            <th>Create Options</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {#each $database.triggers as trigger}
        <tr>
            <td >{trigger.eventName}</td>
            <td >{trigger.actionName}</td>
            <td >{trigger.condition}</td>
            <td >{trigger.optionsCreator}</td>
            <td class="edit-button">
                <span on:click={() => onTriggerEdit(trigger)}>{@html getIcon("edit")}</span>
                <span on:click={() => onTriggerDelete(trigger)}>{@html getIcon("trash")}</span>
            </td>
        </tr>
        {/each}
    </tbody>
</table>
{:else}
(no triggers added)
{/if}


<Modal bind:isOpen={isEditing}>
    {#if isEditing}
    <TriggerView trigger={editingTrigger}
                allActions={$database.actions}
                allTriggers={$database.triggers}
                onFinished={triggerEditingFinished}
                isNew={editingTriggerIsNew}/>
    {/if}    
</Modal>

<style>

.edit-button {
    cursor:pointer;
    color: var(--white);
}

tr:hover .edit-button  {
    color: var(--secondary75);
}

</style>