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

  export let editable: boolean;
  export let attribute: string | undefined = undefined;
  export let value: IValue;
  let newValue: IValue = value;

  // todo - grab from db
  const TYPES_FOR_ATTR: { [key: string]: VALUE_TYPE[] } = {
    LBL: ["String"],
    FILE_SIZE: ["Number"],
    FILE_MIME: ["String"],
    ADDED: ["Number"],
    LAST_VISITED: ["Number"]
  };
</script>

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

<style>
  .inner {
    display: flex;
  }

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