import { html } from '@design.estate/dees-element';

export const demoFunc = () => {
  const onChanged = (e: CustomEvent) => {
    // find the demo wrapper and update the 'changed' log inside it
    const wrapper = (e.target as HTMLElement).closest('.demoWrapper');
    const el = wrapper?.querySelector('#changed');
    if (el) el.textContent = `search-changed: ${e.detail.value}`;
  };
  const onSubmit = (e: CustomEvent) => {
    // find the demo wrapper and update the 'submitted' log inside it
    const wrapper = (e.target as HTMLElement).closest('.demoWrapper');
    const el = wrapper?.querySelector('#submitted');
    if (el) el.textContent = `search-submit: ${e.detail.value}`;
  };
  return html`
    <style>
      .demoWrapper {
        display: block;
        flex-direction: column;
        align-items: center;
        
        background: #888888;
      }
      .logs {
        padding: 16px;
        width: 600px;
        color: #fff;
        font-family: monospace;
      }
      .logs div {
        margin: 4px 0;
      }
    </style>
    <div class="demoWrapper">
      <dees-searchbar
        @search-changed=${onChanged}
        @search-submit=${onSubmit}
      ></dees-searchbar>
      <div class="logs">
        <div id="changed">search-changed:</div>
        <div id="submitted">search-submit:</div>
      </div>
    </div>
  `;
};