<script>
import { onMount } from "svelte";

  import Highlight from "svelte-highlight";
  import lua from "svelte-highlight/languages/lua";
  export let children;
  export let properties;

  const languages = {
    lua: lua
  };
  
  let language;
  if (properties && properties.class) {
    language = languages[properties.class.split('-')[1]];
  }
  let code = children[0].value;

  const copy = () => window.navigator.clipboard.writeText(children[0].value.trim());

  let copied = false;

  let jsOn = false;
  onMount(() => jsOn = true);
</script>

<style>
:global(.hljs) {
  border-radius: 8px;
  font-size: 0.9em;
  width: fit-content;
  padding-right: 50px !important;
  max-width: calc(100% - 1em - 50px);
}
div {
  position: relative;
  width: fit-content;
  max-width: 100%;
}
button {
  position: absolute;
  top: 37px;
  right: 0;
  border-radius: 8px;
  border: none;
  padding: 5px;
  background-color: rgba(205, 205, 205, 0.3);
  font-size: 0.8em;
  font-family: var(--font-regular);
  font-weight: 300;
  transition: 0.2s background-color;
  cursor: pointer;
}
button:hover {
  background-color: rgba(205, 205, 205, 0.4);
}
@media (prefers-color-scheme: dark) {
  button {
    background-color: rgba(105, 105, 105, 0.3);
    color: #eee;
  }
  button:hover {
    background-color: rgba(105, 105, 105, 0.4);
  }
}
div {
  margin-top: -34px;
}
.hidden {
  display: none;
}
.dumbhack {
  /* im so sorry for this dumb hack lmao */
  margin-top: -6em;
  margin-bottom: -2em;
  z-index: -999;
}
</style>

{#if properties.class}
  <div class:dumbhack={!jsOn}>
    <button
      on:click={() => {copied = true; copy()}}
      on:pointerleave={() => {copied = false}}
      class:hidden={!jsOn}
    >
      {copied ? 'copied!' : 'copy'}
    </button>
    <Highlight {language} {code}/>
  </div>
{:else}
  <code>{code}</code>
{/if}