<template>
  <div class="home">
    <IntervalInput
      :interval="interval"
      :editable="timeState === 'stopped'"
      @update="(int) => (interval = int)"
    />
    <section class="developers">
      <DevSession
        position="1"
        :is-turn="isProgrammer1Turn"
        :session="session"
      />
      <DevSession
        position="2"
        :is-turn="!isProgrammer1Turn"
        :session="session"
      />
    </section>
    <div class="global-time">{{ time }}</div>
    <div class="actions">
      <button v-show="timeState === 'stopped'" @click="start">commencer</button>
      <button v-show="timeState === 'started'" @click="clear">arrêter</button>
    </div>
    <ChilledMusic :play="timeState === 'started'" @pause="clear" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onUnmounted } from '@vue/composition-api'
import { useTimer } from '@/hooks/useTimer'
import DevSession from '@/components/DevSession.vue'
import ChilledMusic from '@/components/ChilledMusic.vue'
import IntervalInput from '@/components/IntervalInput.vue'

export default defineComponent({
  name: 'Home',
  components: {
    DevSession,
    ChilledMusic,
    IntervalInput
  },
  setup() {
    const {
      interval,
      start,
      clear,
      timeState,
      time,
      session,
      isProgrammer1Turn
    } = useTimer()

    onUnmounted(clear)

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

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

.developers {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.global-time {
  font-size: calc(3em + 10vw);
}
</style>
