---
import Copy from "@/assets/copy.svg";

interface Props {
  colours: { text: string; border: string };
}

const { colours } = Astro.props;
---

<template id="code-heading">
  <span class="lang"><slot is:inline>.txt</slot></span>
  <span id="copied" style="visibility:hidden" role="alert">Copied!</span>
  <button id="copy"><Copy /></button>

  <!-- define:vars didnt work :( -->
  <style
    set:html={`
      :host {
        --text: ${colours.text};
        --border: ${colours.border};
      }
  `}
  ></style>

  <style>
    @keyframes teeter {
      from,
      to {
        rotate: 0deg;
      }
      25% {
        rotate: 15deg;
      }
      75% {
        rotate: -15deg;
      }
    }

    .lang {
      color: var(--text);
    }

    button {
      border: none;
      background: none;
      aspect-ratio: 1;
      border-radius: 100%;

      display: flex;
      align-items: center;
      justify-content: center;

      &:hover,
      &:focus {
        scale: 1.2;
        outline: none;
        background-color: #ffffff20;
      }

      &:active {
        scale: 1.4;
        animation: teeter 0.2s;
      }

      & svg {
        stroke: var(--text);
        margin: 2px;
      }
    }

    :host {
      display: flex block;
      justify-content: space-between;
      align-items: center;
      /* gets overridden by * because why not ig */
      padding: 5px 15px !important;
      position: sticky;
      top: 0;
      left: 0;
      border-bottom: 4px solid var(--border);
      user-select: none;
    }
  </style>
</template>

<script>
  class CodeHeading extends HTMLElement {
    contents = "";
    static observedAttributes = ["contents"];

    template: HTMLTemplateElement;
    content: DocumentFragment;
    shadowRoot: ShadowRoot;

    constructor() {
      super();
      const template = document.getElementById("code-heading");
      if (!template || !(template instanceof HTMLTemplateElement))
        throw new Error("Could not get #code-heading");
      this.template = template;
      this.content = template.content;

      this.shadowRoot = this.attachShadow({ mode: "open" });
      this.shadowRoot.appendChild(this.content.cloneNode(true));

      const copy = this.shadowRoot.getElementById("copy");
      if (!copy) throw new Error("No #copy in #code-heading");

      const copied = this.shadowRoot.getElementById("copied");
      if (!copied) throw new Error("No #copied in #code-heading");

      const copied_animation = {
        opacity: [0, 1],
        visibility: ["hidden", "visible"],
      };

      copy.addEventListener("click", () => {
        navigator.clipboard
          .writeText(this.contents)
          .catch((e) => {
            console.error("Encountered error copying to clipboard;", e);
          })
          .then(async () => {
            await copied.animate(copied_animation, {
              duration: 200,
              fill: "forwards",
            }).finished;

            copied.animate(copied_animation, {
              duration: 200,
              delay: 2000,
              fill: "forwards",
              direction: "reverse",
            });
          });
      });
    }

    attributeChangedCallback(name: string, _: any, newV?: string) {
      if (name == "contents") {
        this.contents = newV ?? "";
      }
    }
  }

  customElements.define("code-heading", CodeHeading);
</script>