---
import Icon from 'astro-iconify';

export interface Props {
  url: string;
}

const { url } = Astro.props;
const placeholder = 'Type the article URL here';
---

<div class="address-bar">
  <form>
    <button aria-label="Back" class="left-buttons" type="button" id="app-back" name="app-back" onclick="history.go(-1); return false;" hidden>
      <Icon name="ic:round-arrow-back-ios" />
    </button>
    <input type="url" id="app-url" name="url" value={url} placeholder={placeholder} required />
    <button aria-label="Submit" class="right-buttons" type="submit" id="submit">
      <Icon name="ri:ai-generate" />
    </button>
    <button aria-label="Home" class="right-buttons" type="button" id="app-home" name="app-home" onclick="window.location.href='/'; return false;" hidden>
      <Icon name="ic:round-library-books" />
    </button>
    <button aria-label="GitHub" class="right-buttons" type="button" id="gh-link" onclick="window.open('https://github.com/ayoayco/cozy', '_blank');" hidden>
      <Icon name="mdi:github" />
    </button>
  </form>
</div>

<script>
  const ghLink = document.getElementById('gh-link') as HTMLButtonElement;
  const backLink = document.getElementById('app-back') as HTMLButtonElement;
  const homeLink = document.getElementById('app-home') as HTMLButtonElement;
  const urlInput = document.getElementById('app-url') as HTMLInputElement;
  const submitBtn = document.getElementById('submit') as HTMLButtonElement;

  // if js is enabled, show the back button and github link
  ghLink.removeAttribute('hidden');
  backLink.removeAttribute('hidden');
  homeLink.removeAttribute('hidden');

  if (urlInput.value === '') {
    backLink.setAttribute('disabled', 'true');
    submitBtn.setAttribute('disabled', 'true');
    homeLink.setAttribute('disabled', 'true');
  }

  urlInput.addEventListener('input', (e) => {
    const target = e.target as HTMLInputElement;
    if (target.value === '') {
      submitBtn.setAttribute('disabled', 'true');
    } else {
      submitBtn.removeAttribute('disabled');
    }
  });
</script>

<style lang="scss">
  .address-bar {
    text-align: center;
    width: 100%;
  }

  :global(form) {
    width: 100%;
    border: 0px;
    padding: 0.5rem;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    box-shadow: 0 1px 3px 1px #eee;
    display: flex;

    :global(input[type="url"]) {
      flex: 3;
      background-color: white;
      border-radius: 5px;
      border: 1px solid #eee;
      padding: 0.5rem;
      color: #555;
    }

    :global(button#app-home),
    :global(button#app-back),
    :global(button#submit),
    :global(button#gh-link) {
      border: 0px;
      background-color: transparent;
      padding: 0px;
      cursor: pointer;
      color: black;

      :global(svg) {
          border: 0px;
          background-color: transparent;
          width: 1.5rem;
          height: 1.5rem;
      }
    }

    :global(.left-buttons) {
      margin-right: 0.5rem;
    }
    :global(.right-buttons) {
      margin-left: 0.5rem;
    }

    :global(button:hover),
    :global(button.primary-button) {
      color: blue !important;
    }

    :global(button[disabled="true"]) {
      color: #ccc !important;
      cursor: default !important;
    }
  }
</style>