<template>
  <div class="flex no-wrap ui-gap-x-sm items-center q-ml-xl">
    <ui-input-material
      v-model.number="hoursValue"
      maxlength="2"
      label="Час"
      class="time-input"
    />
    <ui-input-material
      v-model.number="minutesValue"
      maxlength="2"
      label="Мин"
      class="time-input"
    />
    <ui-btn-icon
      icon="la la-clock"
      color="secondary"
      class="self-center q-ml-sm"
      size="lg"
      dense
      flat
    >
      <q-popup-proxy @before-show="setTimePickerValue" v-model="isShowPiker">
        <ui-time-picker
          v-model="timePickerValue"
          @input="updateValueFromPicker"
        />
      </q-popup-proxy>
    </ui-btn-icon>
  </div>
</template>

<style scoped lang="sass">
.time-input
  width: 48px
</style>

<script lang="ts">
import { Component, PropSync, Vue } from 'vue-property-decorator'
import UiInputMaterial from '@/lib-components/form/UiInputMaterial.vue'
import UiBtnIcon from '@/lib-components/buttons/UiBtnIcon.vue'
import UiTimePicker from '@/lib-components/form/UiTimePicker.vue'
import { QPopupProxy } from 'quasar'

@Component({
  components: { UiTimePicker, UiBtnIcon, UiInputMaterial, QPopupProxy },
  inheritAttrs: false,
})
export default class TimePicker extends Vue {
  @PropSync('hours')
  hoursValue!: number

  @PropSync('minutes')
  minutesValue!: number

  isShowPiker = false
  timePickerValue = ''

  setTimePickerValue() {
    this.timePickerValue = `${this.hoursValue}:${this.minutesValue}`
  }

  updateValueFromPicker(value: string) {
    this.isShowPiker = false

    const [hour, minutes] = value.split(':')

    this.hoursValue = parseInt(hour)
    this.minutesValue = parseInt(minutes)
  }
}
</script>
