<template>
  <div class="home">
    <IntervalInput :editable="timeState === 'stopped'" />
    <section class="developers">
      <DevSession position="1" :is-turn="isDev1Turn" :session="session" />
      <DevSession position="2" :is-turn="!isDev1Turn" :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="pause">pause</button>
      <button v-show="timeState === 'started'" @click="clear">arrêter</button>
    </div>
    <ZoneMusic
      class="music"
      :play="timeState === 'started'"
      @play="start"
      @pause="pause"
    />
  </div>
</template>

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

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

    return {
      interval,
      start,
      pause,
      clear,
      timeState,
      time,
      session,
      isDev1Turn
    }
  }
})
</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;
}

button {
  margin: 0 1rem;
}

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

.music {
  margin: 1rem 0;
}
</style>
