<template>
  <div class="interval-input">
    <button v-show="editable" @click="minus">-</button>
    <h3>{{ interval }} {{ label }}</h3>
    <button v-show="editable" @click="plus">+</button>
  </div>
</template>

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

const MIN_INTERVAL = 1

export default defineComponent({
  name: 'IntervalInput',
  props: {
    editable: { type: Boolean, required: true }
  },
  setup() {
    const { interval, setInterval } = useInterval()

    const minus = () => {
      if (interval.value > MIN_INTERVAL) {
        setInterval(interval.value - 1)
      }
    }
    const plus = () => {
      setInterval(interval.value + 1)
    }

    const label = computed(() =>
      interval.value > MIN_INTERVAL ? 'minutes' : 'minute'
    )

    return {
      interval,
      minus,
      plus,
      label
    }
  }
})
</script>

<style lang="scss" scoped>
$button-size: 50px;

.interval-input {
  margin: 0 auto;
  max-width: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 1rem;
    font-size: 2rem;
    width: $button-size;
    height: $button-size;
  }
}
</style>
