<!-- for demo only -->
<tk-highlight id="exampleSearchOutput"
></tk-highlight>

<tk-search
  id="exampleSearch"
  placeholder="Search"
  full-width="false"
>
  <tk-search-overlay id="exampleSearchOverlay" slot="search-overlay">
    <tk-search-overlay-section>
      <span slot="header">Recent Searches</span>
      <tk-button
        alignment="trailing"
        slot="header-action"
        size="compact"
        type="ghost"
        id="clearRecentBtn"
      >
        Clear recent
      </tk-button>
      <tk-search-overlay-item icon="search">
        analytics
      </tk-search-overlay-item>
    </tk-search-overlay-section>
    <tk-search-overlay-section>
      <span slot="header">Tests</span>
      <tk-search-overlay-item url="https://www.usertesting.com/" icon="record">
        New <strong>concept</strong> workflow
      </tk-search-overlay-item>
      <tk-search-overlay-item url="https://www.usertesting.com/" icon="unmoderated">
        Updated <strong>concept</strong>
      </tk-search-overlay-item>
      <tk-search-overlay-item url="https://www.usertesting.com/" icon="unmoderated">
        [WorkspaceName] > Updated <strong>concept</strong>  >  Note: third concept was preferred
      </tk-search-overlay-item>
      <tk-search-overlay-item url="https://www.usertesting.com/" icon="record">
        UX Research - Dashboard <strong>Concept</strong>
      </tk-search-overlay-item>
      <tk-search-overlay-item url="https://www.usertesting.com/" icon="unmoderated">
        <strong>Concept</strong> Information Architecture
      </tk-search-overlay-item>
    </tk-search-overlay-section>
    <tk-search-overlay-section>
      <span slot="header">Drafts</span>
      <tk-search-overlay-item url="https://www.usertesting.com/" icon="document">
        <strong>Concept</strong> validation
      </tk-search-overlay-item>
      <tk-search-overlay-item url="https://www.usertesting.com/" icon="document">
        Customer environment and <strong>concept</strong>s
      </tk-search-overlay-item>
    </tk-search-overlay-section>
    <tk-search-overlay-section>
      <span slot="header">Highlight reels</span>
      <tk-search-overlay-item url="https://www.usertesting.com/" icon="highlight-reel">
        New customers like the report <strong>concept</strong>
      </tk-search-overlay-item>
      <tk-search-overlay-item url="https://www.usertesting.com/" icon="highlight-reel">
        Customer mental models &amp; <strong>concept</strong>s aren’t consistent across personas
      </tk-search-overlay-item>
    </tk-search-overlay-section>
  </tk-search-overlay>
</tk-search>

<script>
  const displayInputSearchEventChange = (outputElement, amount) => {
    outputElement.innerText = `📣 valueChanged emitted: ${amount}`;
  }

  const clearRecent = () => {
    const recentSearches = document.querySelector('tk-search-overlay-section:nth-child(1)');
    if (recentSearches) {
      recentSearches.remove();
    }
  }

  const hideSearchOverlay = () => {
    exampleSearchOverlay.removeAttribute('is-visible');
  }

  exampleSearch.addEventListener('valueChanged', ($event) => {
    displayInputSearchEventChange(exampleSearchOutput, $event.detail);
    if ($event.detail === null || !$event.detail.length) {
      hideSearchOverlay();
    }
  });

  exampleSearch.addEventListener('submitEvent', ($event) => {
    exampleSearch.setAttribute("full-width", true);
  });

  exampleSearch.addEventListener('expanded', ($event) => exampleSearchOverlay.setAttribute('is-visible', 'true'));
  exampleSearch.addEventListener('close', ($event) => hideSearchOverlay());
  clearRecentBtn.addEventListener('click', ($event) => clearRecent());
</script>