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

<span class="copy-container">
  <svg
    aria-hidden="true"
    focusable="false"
    role="img"
    class="copy-button"
    viewBox="0 0 16 16"
    width="16"
    height="16"
    style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible;"
    fill="currentColor"
    ><path
      d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"
    ></path><path
      d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
    ></path></svg
  >
  <svg
    style="display:none;user-select:none;vertical-align:text-bottom;overflow:visible;"
    aria-hidden="true"
    height="16"
    viewBox="0 0 16 16"
    version="1.1"
    width="16"
    data-view-component="true"
    class="copied-checkmark"
    ><path
      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
    ></path></svg
  >
  <span class="tooltipText">Copy</span>
</span>

<script define:vars={{ copyText }}>
  const commandCopyBtn = document.querySelector('.copy-button');
  const copiedCheckMark = document.querySelector('.copied-checkmark');
  const tooltipText = document.querySelector('.tooltipText');

  let timeout;
  commandCopyBtn.addEventListener('click', () => {
    navigator.clipboard.writeText(copyText);
    tooltipText.innerHTML = 'Copied';
    copiedCheckMark.style.display = 'inline-block';
    commandCopyBtn.style.display = 'none';
    //clear previous timeout
    clearTimeout(timeout);
    timeout = window.setTimeout(()=>{
    copiedCheckMark.style.display = 'none';
    commandCopyBtn.style.display = 'inline-block';
    tooltipText.innerHTML = 'Copy';
  }, 750)
  });
</script>

<style>
  .copy-button {
    fill: var(--sl-color-accent-high);
    margin-left: 0.5rem;
    cursor: pointer;
  }

  .copied-checkmark {
    fill: var(--sl-color-accent-high);
    margin-left: 0.5rem;
    display: none;
  }

  .copy-container:hover .tooltipText {
    visibility: visible;
  }
  .copy-container {
    position: relative;
  }

  .tooltipText {
    position: absolute;
    visibility: hidden;
    left: 0;
    width: max-content;
    background-color: white;
    display: block;
    color: black;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    top: 130%;
    font-size: 0.5rem;
  }
</style>
