<script lang="ts">
  import { createEventDispatcher, onMount, tick } from "svelte";
  import { normUrl } from "../util/history";

  import Inspect from "./Inspect.svelte";
  import IconButton from "./utils/IconButton.svelte";
  const dispatch = createEventDispatcher();

  export let address: string;
  export let index: number;
  export let only: boolean;

  let editable = false;
  let detail = only;
  let detailChanged = false;
  $: if (!detailChanged) detail = only;
  $: if (detailChanged) tick().then(() => dispatch("detail", detail));

  onMount(() => {
    // Required to make detail mode detection work in Browse
    dispatch("detail", detail);
  });

  function visit() {
    window.open(normUrl(`/browse/${address}`), "_blank");
  }
</script>

<div class="view" class:editable class:detail>
  <header>
    <IconButton
      name="pencil"
      on:click={() => (editable = !editable)}
      active={editable}
    />
    <IconButton
      name="fullscreen"
      on:click={() => {
        detail = !detail;
        detailChanged = true;
      }}
      active={detail}
    />
    <IconButton name="bookmark" on:click={() => visit()} disabled={only} />
    <IconButton
      name="x-circle"
      on:click={() => dispatch("close")}
      disabled={only}
    />
  </header>
  <Inspect
    {address}
    editable={editable || false}
    {index}
    {detail}
    on:resolved
    on:close
  />
</div>

<style lang="scss">
  .view {
    min-width: 30em;
    max-width: 30em;

    display: flex;
    flex-direction: column;

    background: var(--background-lighter);
    color: var(--foreground-lighter);
    border: 1px solid var(--foreground-lightest);
    border-radius: 0.5em;
    padding: 1rem;

    // transition: min-width 0.2s, max-width 0.2s;
    // TODO - container has nowhere to scroll, breaking `detail` scroll

    &.editable {
      border-style: dashed;
    }

    &.detail {
      min-width: 75%;
      max-width: 1920px;
      margin-left: auto;
      margin-right: auto;
    }

    header {
      font-size: 20px;
      position: relative;
      min-height: 1em;

      display: flex;
      justify-content: space-between;

      flex: none;
    }
  }
</style>
