<template>
  <div class="zone-music plume">
    <div class="pm-field">
      <label for="use-music" data-pm-holder>
        <span :class="{ selected: !withMusic, disabled: withMusic }"
          >focus</span
        >
        <input
          type="checkbox"
          name="use-music"
          id="use-music"
          :checked="withMusic"
          @change="setWithMusic(!withMusic)"
          data-pm-checkbox-toggle
        />
        <span :class="{ selected: withMusic, disabled: !withMusic }"
          >chill</span
        >
      </label>
    </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';

label[data-pm-holder] {
  display: flex;
  justify-content: center;
  margin: auto;
  max-width: 300px;

  span {
    flex: 1;
    &.selected {
      font-weight: bold;
    }
  }
}
.disabled {
  color: desaturate($color, 70%);
}
</style>
