<script lang="ts">
  import IconButton from "../../utils/IconButton.svelte";

  import Spinner from "../../utils/Spinner.svelte";
  export let address: string;

  let mode: "preview" | "full" = "preview";

  $: textContent = (async () => {
    const response = await fetch(
      `/api/${mode == "preview" ? "thumb" : "raw"}/${address}`
    );
    return await response.text();
  })();
</script>

<div class="text-preview">
  <header class="text-header">
    <div
      class="tab"
      class:active={mode == "preview"}
      on:click={() => (mode = "preview")}
    >
      <IconButton
        name="image"
        active={mode == "preview"}
        on:click={() => (mode = "preview")}
      />
      <div class="label">Preview</div>
    </div>
    <div
      class="tab"
      class:active={mode == "full"}
      on:click={() => (mode = "full")}
    >
      <IconButton
        name="shape-circle"
        active={mode == "full"}
        on:click={() => (mode = "full")}
      />
      <div class="label">Full</div>
    </div>
  </header>
  <div class="text">
    {#await textContent}
      <Spinner />
    {:then text}
      {text}
    {/await}
  </div>
</div>

<style lang="scss">
  .text-preview {
    flex: 1;
  }

  .text {
    background: var(--background);
    padding: 0.5em;
    overflow: auto;
    white-space: pre-wrap;
    border-radius: 4px;
    border: 1px solid var(--foreground);
    height: 100%;
    box-sizing: border-box;
  }

  header {
    display: flex;
    justify-content: flex-end;

    .tab {
      display: flex;

      cursor: pointer;

      border: 1px solid var(--foreground);
      border-bottom: 0;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;

      padding: 0.15em;
      margin: 0 0.1em;

      &.active {
        background: var(--background);
      }

      .label {
        margin-right: 0.5em;
      }
    }
  }
</style>
