<template>
  <span
    :class="themeClasses"
    class="mm-time-picker">
    <single-selector
      ref="selector"
      :visible.sync="visible"
      :value="localValue"
      :disabled="realDisabled"
      :readonly="readonly"
      :clearable="clearable"
      v-bind="$attrs"
      :on-blur="handleEdit"
      :on-clear="clearHandler">
      <ui-icon
        slot="suffix-icon"
        name="clock"
        size="12px"></ui-icon>
    </single-selector>

    <ui-popper
      ref="popper"
      :visible.sync="visible"
      :placement="placement"
      class="mm-time-picker-popper"
      target="selector">
      <ui-time-picker-panel
        v-model="time"
        :format="format"
        :visible="visible"
        :use12hour="use12hour"
        :disabled-hours="disabledHours"
        :disabled-minutes="disabledMinutes"
        :disabled-seconds="disabledSeconds"
        tabindex="0"
        @input="timeChange"
        @focusin.native="dropdownFocusHandler"></ui-time-picker-panel>
    </ui-popper>
  </span>
</template>

<script>
import Icon from "../icon"
import Popper from "../popper"
import TimePickerPanel from "./time-picker-panel"
import { formatDate, parseDate } from "../../utils/date"
import input from "../../mixins/input"
import themeSelect from "../../mixins/theme-select"
import SingleSelector from "../selector/single"
import config from "../../managers/config"

config.defaults({
  "TimePicker.format": "HH:mm:ss",
  "TimePicker.use12hour": false,
  "TimePicker.placement": "bottom-start",
  "TimePicker.clearable": true,
})

export default {
  name: "mm-time-picker",
  components: {
    "ui-icon": Icon,
    "ui-popper": Popper,
    "ui-time-picker-panel": TimePickerPanel,
    SingleSelector,
  },
  mixins: [input, themeSelect],
  inheritAttrs: false,
  props: {
    value: {
      type: String,
    },
    format: {
      type: String,
      default: () => config.get("TimePicker.format"),
    },
    suffixIcon: {
      type: String,
      default: "clock",
    },
    use12hour: {
      type: Boolean,
      default: () => config.get("TimePicker.use12hour"),
    },
    placement: {
      type: String,
      default: () => config.get("TimePicker.placement"),
    },
    disabledHours: Function,
    disabledMinutes: Function,
    disabledSeconds: Function,
    clearable: {
      type: Boolean,
      default: () => config.get("TimePicker.clearable"),
    },
  },
  data() {
    return {
      visible: false,
      localValue: "",
      time: "",
      searchValue: "",
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(value) {
        const val = value.trim()
        if (val) {
          this.localValue = val
          const date = parseDate(val, this.format)
          date && (this.time = date)
        } else {
          this.time = this.localValue
        }
      },
    },
    time(value) {
      this.localValue = value ? formatDate(value, this.format) : ""
      this.$emit("input", this.localValue)
    },
    visible(value) {
      if (value) {
        this.searchValue = this.localValue
      }
    },
  },
  methods: {
    handleEdit() {
      const val = this.searchValue

      if (val) {
        const date = parseDate(val, this.format) || this.time
        this.time = date
      } else {
        this.time = ""
      }

      this.localValue = this.time ? formatDate(this.time, this.format) : ""
      this.searchValue = ""
    },
    timeChange(value) {
      this.searchValue = value ? formatDate(value, this.format) : ""
    },
    dropdownFocusHandler() {
      this.$refs.selector.focus()
    },
    clearHandler() {
      this.time = ""
    },
  },
}
</script>
