---
interface Props {
  includeHashtag?: boolean
}
const { includeHashtag } = Astro.props
import { Icon } from 'astro-icon/components'
---

<section class="my-6">
  <div class="">
    <p class="text-lg">Select a color below to get the hex code:</p>
    <div class="flex">
      <fieldset>
        <input
          type="color"
          id="color-select"
          class="h-16 w-48 hover:cursor-pointer rounded-xl border-neutral-900 dark:border-neutral-100 border-4"
        />
      </fieldset>
      <button
        id="copy-button"
        class="button has-icon color-secondary ml-3 rounded-md text-white hover:cursor-pointer appearance-none h-16">
        <Icon id="copy-icon" name="ion:copy-outline" />
        <Icon id="success-icon" name="ion:checkmark-outline" class="hidden" />
        <p id="color-label">{includeHashtag ? '#' : ''}000000</p>
    </div>
  </div>
</section>

<script>
  // Get the 2 elements from above
  const colorLabel = document.getElementById("color-label");
  const colorSelect = document.getElementById("color-select");
  const copyButton = document.getElementById("copy-button");

  const copyIcon = document.getElementById("copy-icon");
  const successIcon = document.getElementById("success-icon");

  colorSelect?.addEventListener("change", async (e) => {
    const {
      target: { value }, // Returns the chosen color (already in hex format :D)
    } = e;
    if (colorLabel) colorLabel.innerText = colorLabel.innerText.startsWith('#') ? value : value.replace('#', '');
  });

  // Add event listener to copy the color to the clipboard
  if (colorLabel) copyButton?.addEventListener('click', () => copyString(colorLabel.innerText, copyButton));
  

  async function copyString(text: string, button: HTMLElement) {
    await navigator.clipboard.writeText(text);

    // visual feedback that task is completed
    if (button) {
      button.style.backgroundColor = "#"+text.replace('#', '');
      button.style.borderColor = "#"+text.replace('#', '');
    }
    if (copyIcon) copyIcon.style.display = 'none';
    if (successIcon) successIcon.style.display = 'initial';

    setTimeout(() => {
      if (button) {
        button.style.backgroundColor = 'var(--secondary-100)';
        button.style.borderColor = 'var(--secondary-100)';
      }
      if (copyIcon) copyIcon.style.display = 'initial';
      if (successIcon) successIcon.style.display = 'none';
    }, 1000);
  }

</script>