<script>
  export let big
  export let jsFilter
  export let mutableObjects
  export let queryCode
</script>

<div class="query-input-header">
    <div on:click={() => jsFilter = !jsFilter}>
        Use JavaScript to filter messages
        <input type=checkbox bind:checked={jsFilter}>
    </div>
</div>

{#if jsFilter}
    <div class="query-input-display">
        <div title="If enabled, mutations made by the below code will be displayed in the result data.">
            Allow JavaScript to mutate objects
            <input type=checkbox bind:checked={mutableObjects}>
        </div>
        <textarea class={"query-input" + (big ? ' big' : '')} bind:value={queryCode}></textarea>
    </div>
{/if}

<style>
.query-input-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.query-input-display {
  margin-top: 1em;
  display: flex;
  flex-direction: column;
}
.query-input {
  min-height: 5vw;
  resize: vertical;
}
.query-input.big {
  height: 60vh;
  width: 60vw;
}

textarea {
    margin-top: 1em;
    margin-bottom: 0;
    overflow: hidden;
    z-index: 1;
    margin-left: 0;

    background-color: #222222;
    color: #d0dde9;

    border: none;
    font-size: 14px;
    font-family: var(--font-mono);
    padding: 1em;
    overflow-x: auto;
    min-width: 20vw;
}
</style>