<script>
  import { ProgressBar, ButtonSet, Button } from "carbon-components-svelte";

  let max = 328;
  let value = 0;

  $: helperText =
    value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
  $: if (value === max) helperText = "Done";
</script>

<ProgressBar
  labelText="Upload status"
  value="{value}"
  max="{max}"
  helperText="{helperText}"
/>

<ButtonSet style="margin-top: var(--cds-spacing-08)">
  <Button
    disabled="{value > 0}"
    on:click="{() => {
      const interval = setInterval(() => {
        const delta = Math.random() * 10;

        if (value + delta < max) {
          value += delta;
        } else {
          value = max;
          clearInterval(interval);
        }
      }, 30);
    }}"
  >
    Start
  </Button>
  <Button
    kind="tertiary"
    disabled="{value !== max}"
    on:click="{() => (value = 0)}"
  >
    Reset
  </Button>
</ButtonSet>
