<script>
  import { onMount } from 'svelte';
    import { sendMessage, stream_state, loading, play_btn_state } from '../../store.js';
    import { intervalID, increment, countDelay } from '../canvas_properties'
    let btn_state_text;

    onMount(() => {
      btn_state_text = "play";
      $stream_state = false;
    })

    const toggle = () => {
        if (!$stream_state) {
          clearInterval($intervalID);
          $intervalID = setInterval(increment, countDelay());
        } else {
          clearInterval($intervalID);
        }

        btn_state_text = $stream_state === true ? "pause" : "play";
        $stream_state = $stream_state === true ? false : true;  // order is important. This would change the value before the setting
        const msg = {
          type: "stream",
          value: btn_state_text
        };
        sendMessage(msg);
    }

    $: console.log("SS: ", $stream_state);

</script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<button type="button"
      class="text-white w-1/2 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      class:bg-blue-700={$loading == false || ! $play_btn_state}
      class:bg-secondary={$loading == true || ! $play_btn_state}
      on:click={toggle}
      disabled={($loading == true || ! $play_btn_state)}>
  {#if  $stream_state}
    <i class="material-icons">pause</i>Pause
  {:else}
    <i class="material-icons">play_arrow</i>Play
  {/if}
</button>
