<template>
  <div class="home">
    <section class="brogrammers">
      <DreamMaker
        position="1"
        :is-turn="isProgrammer1Turn"
        :session="session"
      />
      <DreamMaker
        position="2"
        :is-turn="!isProgrammer1Turn"
        :session="session"
      />
    </section>
    <div class="global-time">{{ time }}</div>
    <div class="actions">
      <button v-if="timeState === 'stopped'" @click="start">play</button>
      <button v-if="timeState === 'started'" @click="stop">stop</button>
    </div>
    <youtube-video
      v-show="false"
      src="https://www.youtube-nocookie.com/embed/5qap5aO4i9A"
    />
  </div>
</template>

<script lang="ts">
import 'youtube-video-js'
import {
  ref,
  watchEffect,
  defineComponent,
  onMounted,
  computed,
  onUnmounted
} from '@vue/composition-api'
import DreamMaker from '@/components/DreamMaker.vue'
import { notify } from '@/utils/notification'

type Stopwatch = 'stopped' | 'started'
const INTERVAL = 120

export default defineComponent({
  name: 'Home',
  components: {
    DreamMaker
  },
  setup() {
    let chilledcow: HTMLVideoElement | null = null
    let stopwatchId: number | null = null
    const isProgrammer1Turn = ref(true)
    let stopWatchSessionId: number | null = null
    const seconds = ref(0)
    const time = computed(() => {
      const m = Math.floor(seconds.value / 60)
      const s = seconds.value % 60

      return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
    })
    const sessionSeconds = ref(INTERVAL)
    const session = computed(() => {
      const m = Math.floor(sessionSeconds.value / 60)
      const s = sessionSeconds.value % 60

      return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
    })
    const timeState = ref<Stopwatch>('stopped')
    const start = () => {
      timeState.value = 'started'
      notify('Session started!')

      stopwatchId = setInterval(() => {
        seconds.value++
        if (seconds.value % INTERVAL === 0) {
          sessionSeconds.value = INTERVAL
          isProgrammer1Turn.value = !isProgrammer1Turn.value

          const programmer = isProgrammer1Turn.value
            ? 'Programmer 1'
            : 'Programmer 2'

          notify(`Time to change, ${programmer}, your turn!`)
        }
      }, 1000)
      stopWatchSessionId = setInterval(() => {
        sessionSeconds.value--
      }, 1000)
    }
    const stop = () => {
      timeState.value = 'stopped'
    }

    onMounted(() => {
      chilledcow = document.querySelector('youtube-video')
    })

    const clear = () => {
      if (stopwatchId) {
        clearInterval(stopwatchId)
      }
      if (stopWatchSessionId) {
        clearInterval(stopWatchSessionId)
      }
      seconds.value = 0
      sessionSeconds.value = INTERVAL
    }

    onUnmounted(clear)

    watchEffect(() => {
      switch (timeState.value) {
        case 'started':
          if (chilledcow) {
            chilledcow.play()
          }
          break
        case 'stopped':
          if (chilledcow) {
            chilledcow.pause()
          }
          clear()
      }
    })

    return {
      start,
      stop,
      timeState,
      time,
      session,
      isProgrammer1Turn
    }
  }
})
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
}
.brogrammers {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.global-time {
  font-size: 80pt;
  padding: 1rem;
}
</style>
