<template>
  <v-app>
    <v-container>
      <v-row dense>
        <v-col>
          <h1 class="text-subtitle-1">Native Progress Indicator Element</h1>
          <progress id="file" max="100" value="70" />
          <br>
          <progress id="progress-bar" aria-label="Content loading…" />
        </v-col>

        <v-col>
          <h1 class="text-subtitle-1">Vuetify Progress Indicator</h1>
          <v-progress-linear color="orange" model-value="20" />
          <br>
          <v-progress-linear color="green" indeterminate />
          <br>
          <v-progress-linear model-value="20" rounded />
          <br>
          <v-progress-linear indeterminate rounded />
          <br>
          <v-progress-linear
            v-model="value"
            :buffer-value="bufferValue"
            color="deep-orange"
          />
          <br>
          <v-progress-linear
            buffer-value="60"
            color="red-lighten-2"
            model-value="40"
            stream
          />
        </v-col>

      </v-row>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    setup () {
      return {
        //
      }
    },
    data () {
      return {
        value: 10,
        bufferValue: 20,
        interval: 0,
      }
    },

    watch: {
      value (val) {
        if (val < 100) return

        this.value = 0
        this.bufferValue = 10
        this.startBuffer()
      },
    },

    mounted () {
      this.startBuffer()
    },

    beforeUnmount () {
      clearInterval(this.interval)
    },

    methods: {
      startBuffer () {
        clearInterval(this.interval)

        this.interval = setInterval(() => {
          this.value += Math.random() * (15 - 5) + 5
          this.bufferValue += Math.random() * (15 - 5) + 6
        }, 2000)
      },
    },
  }
</script>