<!-- 
  @component Triggers upstream data refresh in selectable intervals

  Properties:
  - `initially Number?`: Initial refresh interval on component mount, in seconds [Default: null]
  - `presetClass String?`: Custom class to apply to main <InputGroup>
  - `onRefresh Func`: The callback function to perform at refresh times
-->

<script>
  import { Button, Icon, Input, InputGroup } from "@sveltestrap/sveltestrap";

  /* Svelte 5 Props */
  let {
    initially = null,
    presetClass = "",
    hideSelector = false,
    onRefresh
  } = $props();

  /* Var Init */
  let refreshIntervalId = null;

  /* Derived */
  let refreshInterval = $derived(initially ? initially * 1000 : null);

  /* Functions */
  function refreshIntervalChanged() {
    if (refreshIntervalId != null) clearInterval(refreshIntervalId);
    if (refreshInterval == null) return;
    refreshIntervalId = setInterval(() => onRefresh(refreshInterval), refreshInterval);
  }

  /* Svelte 5 onMount */
  $effect(() => {
    refreshIntervalChanged();
  });
</script>

{#if !hideSelector}
  <InputGroup class={presetClass}>
    <Input
      type="select"
      title="Periodic refresh interval"
      bind:value={refreshInterval}
      onchange={refreshIntervalChanged}
    >
      <option value={null}>No Interval</option>
      <option value={30 * 1000}>30 Seconds</option>
      <option value={60 * 1000}>60 Seconds</option>
      <option value={2 * 60 * 1000}>Two Minutes</option>
      <option value={5 * 60 * 1000}>5 Minutes</option>
    </Input>
    <Button
      outline
      onclick={() => onRefresh(refreshInterval)}
      disabled={refreshInterval != null}
      >
      <Icon name="arrow-clockwise" /> Refresh
    </Button>
  </InputGroup>
{/if}

