<template>
  <div class="zone-music">
    <div class="pretty p-switch p-fill">
      <div>
        <label for="use-music" :class="{ disabled: withMusic }"
          >concentré</label
        >
      </div>
      <input
        type="checkbox"
        name="use-music"
        id="use-music"
        :checked="withMusic"
        @change="setWithMusic(!withMusic)"
      />
      <div class="state p-success">
        <label for="use-music" :class="{ disabled: !withMusic }">détente</label>
      </div>
    </div>
    <ChilledMusic v-if="withMusic" :play="play" @play="play" @pause="pause" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'
import { useMusic } from '@/hooks/useMusic'

export default defineComponent({
  name: 'ZoneMusic',
  components: {
    ChilledMusic: () => import('@/components/ChilledMusic.vue')
  },
  props: {
    play: {
      type: Boolean,
      required: true
    }
  },
  setup(_, { emit }) {
    const { withMusic, setWithMusic } = useMusic()

    const play = () => {
      emit('play')
    }

    const pause = () => {
      emit('pause')
    }

    return { withMusic, setWithMusic, play, pause }
  }
})
</script>

<style lang="scss" scoped>
@import '@/styles/variables';

.pretty {
  display: flex;
  justify-content: center;
}

label {
  margin: 0 1rem;
}

.disabled {
  color: darken($color, 60);
}
</style>
