import{x as u}from"./iframe-CMPv_g6-.js";import"./preload-helper-PPVm8Dsz.js";function v(e,t){if(e<=0)return t;let n,o=0;return function(){if(n)return;const r=Date.now(),s=e-r+o;s<=0?(o=r,t.apply(this,[...arguments])):n=setTimeout(()=>{o=r,n=void 0,t.apply(this,[...arguments])},s)}}const x={title:"Utilities/Throttle",tags:["autodocs"],parameters:{docs:{subtitle:"The `throttle` utility function limits how often a function can execute, ensuring it runs at most once per specified interval. Useful for high-frequency events like scroll, resize, or mousemove."},controls:{expanded:!0}},argTypes:{interval:{control:{type:"number",min:0,max:2e3,step:50},description:"Throttle interval in milliseconds"}},args:{interval:200}},d={render:e=>{const t=`throttle-${Math.random().toString(36).substring(2,9)}`;let n=0,o=0;const r=()=>{const m=document.getElementById(`${t}-normal-count`),h=document.getElementById(`${t}-throttled-count`);m&&(m.textContent=String(n)),h&&(h.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),a=()=>{n++,r()},l=()=>{a(),s()};return u`
      <div class="space-y-4">
        <div class="text-base">
          <p class="mb-2">
            Move your mouse over the box below to trigger events. The throttled handler executes at most once per
            ${e.interval}ms.
          </p>
        </div>

        <div @mousemove=${l} class="cursor-pointer rounded border-2 border-gray-300 bg-gray-50 p-8">
          <div class="space-y-2 text-center">
            <div class="text-sm text-gray-600">Hover over this area</div>
            <div class="mt-4 flex justify-around">
              <div>
                <div class="text-xs text-gray-500">Normal calls</div>
                <div id="${t}-normal-count" class="text-2xl font-bold text-gray-900">0</div>
              </div>
              <div>
                <div class="text-xs text-gray-500">Throttled calls (${e.interval}ms)</div>
                <div id="${t}-throttled-count" class="text-2xl font-bold text-primary-600">0</div>
              </div>
            </div>
          </div>
        </div>

        <button
          @click=${()=>{n=0,o=0,r()}}
          class="btu-button btu-button-gray btu-button-sm"
        >
          Reset Counters
        </button>
      </div>
    `},parameters:{docs:{description:{story:"Interactive example showing throttle in action. Move your mouse over the box to see how throttling reduces function calls."}}}},i={render:()=>{const e=`scroll-${Math.random().toString(36).substring(2,9)}`;let t=0,n=0;const o=()=>{const a=document.getElementById(`${e}-normal-count`),l=document.getElementById(`${e}-throttled-count`);a&&(a.textContent=String(t)),l&&(l.textContent=String(n))},r=v(300,()=>{n++,o()});return u`
      <div class="space-y-4">
        <div class="text-base">
          <p class="mb-2">
            Scroll the content below. The throttled handler executes at most once per 300ms, reducing unnecessary calls
            during continuous scrolling.
          </p>
        </div>

        <div @scroll=${()=>{t++,o(),r()}} class="h-64 overflow-y-scroll rounded border-2 border-gray-300 bg-gray-50 p-4">
          <div class="space-y-4">
            ${Array.from({length:50},(a,l)=>u` <div class="rounded border bg-white p-4">Item ${l+1}</div> `)}
          </div>
        </div>

        <div class="flex justify-around">
          <div>
            <div class="text-xs text-gray-500">Normal scroll events</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">Throttled calls (300ms)</div>
            <div id="${e}-throttled-count" class="text-2xl font-bold text-primary-600">0</div>
          </div>
        </div>

        <button
          @click=${()=>{t=0,n=0,o()}}
          class="btu-button btu-button-gray btu-button-sm"
        >
          Reset Counters
        </button>
      </div>
    `},parameters:{docs:{description:{story:"Example demonstrating throttle with scroll events. The throttled handler fires much less frequently than the raw scroll event."}}}},c={render:()=>u`
    <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 { throttle } from '@brightspot/ui/util/throttle.js'

const handleScroll = throttle(200, () => {
  console.log('Scroll handler - max once per 200ms')
})

window.addEventListener('scroll', handleScroll)</code></pre>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Common Use Cases</h3>
        <ul class="list-inside list-disc space-y-1 text-gray-700">
          <li>Scroll event handlers to update UI elements</li>
          <li>Window resize handlers for responsive layouts</li>
          <li>Mousemove handlers for drag operations</li>
          <li>Input event handlers for search-as-you-type</li>
          <li>API calls triggered by user interactions</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">interval</code> (number): The minimum time in milliseconds between
            function executions
          </li>
          <li><code class="rounded bg-gray-200 px-1">fn</code> (function): The function to throttle</li>
        </ul>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Returns</h3>
        <p class="text-gray-700">
          A throttled version of the input function that will execute at most once per interval, preserving the original
          function's
          <code class="rounded bg-gray-200 px-1">this</code> context and arguments.
        </p>
      </div>
    </div>
  `,parameters:{docs:{description:{story:"Code examples and documentation for using the throttle utility."}}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
  render: args => {
    const instanceId = \`throttle-\${Math.random().toString(36).substring(2, 9)}\`;
    let normalCount = 0;
    let throttledCount = 0;
    const updateCounts = () => {
      const normalEl = document.getElementById(\`\${instanceId}-normal-count\`);
      const throttledEl = document.getElementById(\`\${instanceId}-throttled-count\`);
      if (normalEl) normalEl.textContent = String(normalCount);
      if (throttledEl) throttledEl.textContent = String(throttledCount);
    };
    const handleThrottled = throttle(args.interval, () => {
      throttledCount++;
      updateCounts();
    });
    const handleNormal = () => {
      normalCount++;
      updateCounts();
    };
    const handleEvent = () => {
      handleNormal();
      handleThrottled();
    };
    return html\`
      <div class="space-y-4">
        <div class="text-base">
          <p class="mb-2">
            Move your mouse over the box below to trigger events. The throttled handler executes at most once per
            \${args.interval}ms.
          </p>
        </div>

        <div @mousemove=\${handleEvent} class="cursor-pointer rounded border-2 border-gray-300 bg-gray-50 p-8">
          <div class="space-y-2 text-center">
            <div class="text-sm text-gray-600">Hover over this area</div>
            <div class="mt-4 flex justify-around">
              <div>
                <div class="text-xs text-gray-500">Normal calls</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">Throttled calls (\${args.interval}ms)</div>
                <div id="\${instanceId}-throttled-count" class="text-2xl font-bold text-primary-600">0</div>
              </div>
            </div>
          </div>
        </div>

        <button
          @click=\${() => {
      normalCount = 0;
      throttledCount = 0;
      updateCounts();
    }}
          class="btu-button btu-button-gray btu-button-sm"
        >
          Reset Counters
        </button>
      </div>
    \`;
  },
  parameters: {
    docs: {
      description: {
        story: \`Interactive example showing throttle in action. Move your mouse over the box to see how throttling reduces function calls.\`
      }
    }
  }
}`,...d.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  render: () => {
    const instanceId = \`scroll-\${Math.random().toString(36).substring(2, 9)}\`;
    let scrollCount = 0;
    let throttledScrollCount = 0;
    const updateScrollCounts = () => {
      const normalEl = document.getElementById(\`\${instanceId}-normal-count\`);
      const throttledEl = document.getElementById(\`\${instanceId}-throttled-count\`);
      if (normalEl) normalEl.textContent = String(scrollCount);
      if (throttledEl) throttledEl.textContent = String(throttledScrollCount);
    };
    const handleThrottledScroll = throttle(300, () => {
      throttledScrollCount++;
      updateScrollCounts();
    });
    const handleScroll = () => {
      scrollCount++;
      updateScrollCounts();
      handleThrottledScroll();
    };
    return html\`
      <div class="space-y-4">
        <div class="text-base">
          <p class="mb-2">
            Scroll the content below. The throttled handler executes at most once per 300ms, reducing unnecessary calls
            during continuous scrolling.
          </p>
        </div>

        <div @scroll=\${handleScroll} class="h-64 overflow-y-scroll rounded border-2 border-gray-300 bg-gray-50 p-4">
          <div class="space-y-4">
            \${Array.from({
      length: 50
    }, (_, i) => html\` <div class="rounded border bg-white p-4">Item \${i + 1}</div> \`)}
          </div>
        </div>

        <div class="flex justify-around">
          <div>
            <div class="text-xs text-gray-500">Normal scroll events</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">Throttled calls (300ms)</div>
            <div id="\${instanceId}-throttled-count" class="text-2xl font-bold text-primary-600">0</div>
          </div>
        </div>

        <button
          @click=\${() => {
      scrollCount = 0;
      throttledScrollCount = 0;
      updateScrollCounts();
    }}
          class="btu-button btu-button-gray btu-button-sm"
        >
          Reset Counters
        </button>
      </div>
    \`;
  },
  parameters: {
    docs: {
      description: {
        story: \`Example demonstrating throttle with scroll events. The throttled handler fires much less frequently than the raw scroll event.\`
      }
    }
  }
}`,...i.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.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 { throttle } from '@brightspot/ui/util/throttle.js'

const handleScroll = throttle(200, () => {
  console.log('Scroll handler - max once per 200ms')
})

window.addEventListener('scroll', handleScroll)</code></pre>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Common Use Cases</h3>
        <ul class="list-inside list-disc space-y-1 text-gray-700">
          <li>Scroll event handlers to update UI elements</li>
          <li>Window resize handlers for responsive layouts</li>
          <li>Mousemove handlers for drag operations</li>
          <li>Input event handlers for search-as-you-type</li>
          <li>API calls triggered by user interactions</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">interval</code> (number): The minimum time in milliseconds between
            function executions
          </li>
          <li><code class="rounded bg-gray-200 px-1">fn</code> (function): The function to throttle</li>
        </ul>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Returns</h3>
        <p class="text-gray-700">
          A throttled version of the input function that will execute at most once per interval, preserving the original
          function's
          <code class="rounded bg-gray-200 px-1">this</code> context and arguments.
        </p>
      </div>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: \`Code examples and documentation for using the throttle utility.\`
      }
    }
  }
}`,...c.parameters?.docs?.source}}};const b=["Interactive","ScrollExample","UsageExample"];export{d as Interactive,i as ScrollExample,c as UsageExample,b as __namedExportsOrder,x as default};
