<template>
  <select :value="value">
    <option
      value=""
      disabled
      selected
    >
      Bitte wählen
    </option>
    <slot />
  </select>
</template>

<script>
export default {
  name: "MaterializeSelect",
  props: {
    value: {
      type: [Number, String],
      default: "",
    },
  },

  /**
   * @description Component local variables
   * @return {Object} data
   * @return {undefined|FormSelect} data.instance
   */
  data() {
    return {
      instance: undefined,
    };
  },

  watch: {
    value() {
      this.instance.destroy();

      this.$nextTick(() => (this.instance = this.initializeSelect()));
    },
  },

  mounted() {
    this.instance = this.initializeSelect();

    this.$el.addEventListener("change", this.changeHandler);
  },

  destroyed() {
    this.$el.removeEventListener("change", this.changeHandler);
  },

  methods: {
    /**
     * @description Initialize a new Materialize select component
     * @param {Object} options
     * @return {FormSelect}
     * @see https://materializecss.com/select.html#options
     */
    initializeSelect(options = {}) {
      return M.FormSelect.init(this.$el, options);
    },

    /**
     * @description Send the proper input event to the parents components
     * @param {Event} event
     * @param {HTMLSelectElement} target
     * @see https://developer.mozilla.org/fr/docs/Web/API/Event/target
     */
    changeHandler({ target }) {
      this.$emit("input", target.value);
    },
  },
};
</script>
