<script lang="ts">
  import Selector from "./Selector.svelte";
  import { createEventDispatcher } from "svelte";
  import type { IValue } from "upend/types";
  import IconButton from "./IconButton.svelte";
  const dispatch = createEventDispatcher();

  export let editable: boolean;
  export let value: IValue;
  let newValue: IValue = value;
</script>

<div class="editable">
  {#if editable}
    <div class="inner">
      <div class="selector">
        <Selector type="value" bind:value={newValue} />
      </div>
      <IconButton
        name="check-circle"
        on:click={() => dispatch("edit", newValue)}
      />
    </div>
  {:else}
    <slot />
  {/if}
</div>

<style>
  .inner {
    display: flex;
  }

  .selector {
    flex-grow: 1;
  }
</style>
