<script>
  import Icon from '../components/Icon.svelte';
  import { fade } from 'svelte/transition';
  export let visible = false;
  export let url = "";

  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();

  const hide_code_button = () => {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
      visible = false;
    } else {
      visible = true;
    }
  }
</script>

<svelte:window on:scroll={hide_code_button} />

<style>
  code-bubble {
    position: fixed;
    bottom: 1em;
    right: 1em;
  }

  code-bubble button {
    background-color: var(--color-bg-secondary);
    padding: 0.5em;
    border-radius: 30%;
    box-shadow: 4px 4px 4px var(--color-shadow);
  }
</style>

{#if visible}
  <code-bubble>
    <button transition:fade on:click={ () => dispatch('click') }>
      <Icon name="code" size="32" />
    </button>
  </code-bubble>
{/if}

