import{x as c}from"./iframe-CMPv_g6-.js";import"./preload-helper-PPVm8Dsz.js";function p(n,e){if(n<=0)return e;let t;return function(){clearTimeout(t),t=setTimeout(()=>{t=void 0,e.apply(this,[...arguments])},n)}}const h={title:"Utilities/Debounce",tags:["autodocs"],parameters:{docs:{subtitle:"The `debounce` utility delays function execution until a specified wait period has elapsed since the last invocation. Useful for search inputs, form validation, and window resize handlers."},controls:{expanded:!0}},argTypes:{wait:{control:{type:"number",min:0,max:2e3,step:50},description:"Debounce wait time in milliseconds"}},args:{wait:300}},o={render:n=>{const e=`debounce-${Math.random().toString(36).substring(2,9)}`;let t=0,i=0;const a=()=>{const d=document.getElementById(`${e}-normal-count`),r=document.getElementById(`${e}-debounced-count`);d&&(d.textContent=String(t)),r&&(r.textContent=String(i))},l=p(n.wait,()=>{i++,a()}),u=()=>{t++,a(),l()};return c`
      <div class="space-y-4">
        <div class="text-base">
          <p class="mb-2">
            Type in the input below. The normal counter increments on every keystroke, while the debounced counter only
            fires after ${n.wait}ms of inactivity.
          </p>
        </div>

        <input
          @input=${u}
          type="text"
          placeholder="Start typing..."
          class="focus:border-blue-500 w-full rounded border-2 border-gray-300 px-4 py-2 focus:outline-none"
        />

        <div class="flex justify-around">
          <div>
            <div class="text-xs text-gray-500">Keystrokes</div>
            <div id="${e}-normal-count" class="text-2xl font-bold text-gray-900">0</div>
          </div>
          <div>
            <div class="text-xs text-gray-500">Debounced calls (${n.wait}ms)</div>
            <div id="${e}-debounced-count" class="text-2xl font-bold text-primary-600">0</div>
          </div>
        </div>

        <button
          @click=${()=>{t=0,i=0,a()}}
          class="btu-button btu-button-gray btu-button-sm"
        >
          Reset Counters
        </button>
      </div>
    `},parameters:{docs:{description:{story:"Interactive example showing debounce in action. Type rapidly in the input to see how the debounced handler waits for a pause before executing."}}}},s={render:()=>c`
    <div class="space-y-4 text-sm">
      <div>
        <h3 class="mb-2 font-bold">Basic Usage</h3>
        <pre
          class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
        ><code>import { debounce } from '@brightspot/ui/util/debounce.js'

const handleSearch = debounce(300, () => {
  console.log('Search triggered after 300ms of inactivity')
})

input.addEventListener('input', handleSearch)</code></pre>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Debounce vs Throttle</h3>
        <ul class="list-inside list-disc space-y-1 text-gray-700">
          <li><strong>Debounce</strong>: Waits until activity stops, then fires once</li>
          <li><strong>Throttle</strong>: Fires at regular intervals during activity</li>
          <li>Use debounce for search inputs, form validation, window resize end</li>
          <li>Use throttle for scroll handlers, mouse tracking, progress updates</li>
        </ul>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Parameters</h3>
        <ul class="space-y-2">
          <li>
            <code class="rounded bg-gray-200 px-1">wait</code> (number): Delay in milliseconds. If 0, the function
            passes through unchanged.
          </li>
          <li><code class="rounded bg-gray-200 px-1">fn</code> (function): The function to debounce</li>
        </ul>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Returns</h3>
        <p class="text-gray-700">
          A debounced version of the input function that delays execution until
          <code class="rounded bg-gray-200 px-1">wait</code> milliseconds have elapsed since the last call.
        </p>
      </div>
    </div>
  `,parameters:{docs:{description:{story:"Code examples and documentation for using the debounce utility."}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
  render: args => {
    const instanceId = \`debounce-\${Math.random().toString(36).substring(2, 9)}\`;
    let normalCount = 0;
    let debouncedCount = 0;
    const updateCounts = () => {
      const normalEl = document.getElementById(\`\${instanceId}-normal-count\`);
      const debouncedEl = document.getElementById(\`\${instanceId}-debounced-count\`);
      if (normalEl) normalEl.textContent = String(normalCount);
      if (debouncedEl) debouncedEl.textContent = String(debouncedCount);
    };
    const handleDebounced = debounce(args.wait, () => {
      debouncedCount++;
      updateCounts();
    });
    const handleInput = () => {
      normalCount++;
      updateCounts();
      handleDebounced();
    };
    return html\`
      <div class="space-y-4">
        <div class="text-base">
          <p class="mb-2">
            Type in the input below. The normal counter increments on every keystroke, while the debounced counter only
            fires after \${args.wait}ms of inactivity.
          </p>
        </div>

        <input
          @input=\${handleInput}
          type="text"
          placeholder="Start typing..."
          class="focus:border-blue-500 w-full rounded border-2 border-gray-300 px-4 py-2 focus:outline-none"
        />

        <div class="flex justify-around">
          <div>
            <div class="text-xs text-gray-500">Keystrokes</div>
            <div id="\${instanceId}-normal-count" class="text-2xl font-bold text-gray-900">0</div>
          </div>
          <div>
            <div class="text-xs text-gray-500">Debounced calls (\${args.wait}ms)</div>
            <div id="\${instanceId}-debounced-count" class="text-2xl font-bold text-primary-600">0</div>
          </div>
        </div>

        <button
          @click=\${() => {
      normalCount = 0;
      debouncedCount = 0;
      updateCounts();
    }}
          class="btu-button btu-button-gray btu-button-sm"
        >
          Reset Counters
        </button>
      </div>
    \`;
  },
  parameters: {
    docs: {
      description: {
        story: \`Interactive example showing debounce in action. Type rapidly in the input to see how the debounced handler waits for a pause before executing.\`
      }
    }
  }
}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div class="space-y-4 text-sm">
      <div>
        <h3 class="mb-2 font-bold">Basic Usage</h3>
        <pre
          class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
        ><code>import { debounce } from '@brightspot/ui/util/debounce.js'

const handleSearch = debounce(300, () => {
  console.log('Search triggered after 300ms of inactivity')
})

input.addEventListener('input', handleSearch)</code></pre>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Debounce vs Throttle</h3>
        <ul class="list-inside list-disc space-y-1 text-gray-700">
          <li><strong>Debounce</strong>: Waits until activity stops, then fires once</li>
          <li><strong>Throttle</strong>: Fires at regular intervals during activity</li>
          <li>Use debounce for search inputs, form validation, window resize end</li>
          <li>Use throttle for scroll handlers, mouse tracking, progress updates</li>
        </ul>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Parameters</h3>
        <ul class="space-y-2">
          <li>
            <code class="rounded bg-gray-200 px-1">wait</code> (number): Delay in milliseconds. If 0, the function
            passes through unchanged.
          </li>
          <li><code class="rounded bg-gray-200 px-1">fn</code> (function): The function to debounce</li>
        </ul>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Returns</h3>
        <p class="text-gray-700">
          A debounced version of the input function that delays execution until
          <code class="rounded bg-gray-200 px-1">wait</code> milliseconds have elapsed since the last call.
        </p>
      </div>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: \`Code examples and documentation for using the debounce utility.\`
      }
    }
  }
}`,...s.parameters?.docs?.source}}};const g=["Interactive","UsageExample"];export{o as Interactive,s as UsageExample,g as __namedExportsOrder,h as default};
