<template lang="pug">
  .input-modal

    .input-group(ref="inputGroup")
        .input-group-prepend(v-if="inputIcon || imgIcon")
          span.input-group-text
            i(v-if="inputIcon" :class="inputIcon")
            img(v-if="imgIcon" :src="imgIcon")

        input.form-control(
          type="text" :placeholder="placeholder"
          v-model="input" :class="[classInput, {'is-invalid': errors.has(name)}]"
          @focus="focus(true)" autocomplete="off"
          v-validate="validations" :name="name"
          )
        .invalid-feedback(v-if="errors.has(name)") {{ errors.first(name) }}

    <!-- modal -->
    transition(name="fade")
      .modal(v-show="focused" ref="modal")
        .modal-dialog.modal-lg(role="document")
          .modal-content
            .modal-header.bg-primary.text-white.justify-content-between
              h6.modal-title Pilih Nama
              button.btn.btn-link.p-0(@focus="focus(false)")
                .h5.m-0.text-white x

            .modal-body
              .row
                .col-md-6.col-12
                  ul.list
                    li.list-item(
                      v-for="name in data"
                      :key="name.username"
                      @click="select(name.username)"
                      )
                      .name
                        span.mr-3 {{ name.username }}
                        span.text-muted {{ name.name }}
</template>

<script>
import { mapGetters } from "vuex";

export default {
  inject: ["$validator"],
  props: {
    inputIcon: { type: String, required: false, default: "" },
    imgIcon: { type: String, required: false, default: "" },
    placeholder: { type: String, required: false, default: "" },
    classInput: { type: String, required: false, default: "" },
    username: { type: String, required: true },
    validations: { type: [String, Object], default: "" },
    name: { type: String, required: true }
  },

  data: () => ({
    focused: false,
    input: "",
    selected: ""
  }),

  computed: {
    ...mapGetters({
      data: "names/nameAll"
    })
  },

  watch: {
    errors: function(error) {
      this.$emit("has-error");
    }
  },

  created() {
    this.input = this.username || "";
    console.log("username", this.username);
    // if (this.username !== "") this.select(this.username);
  },

  mounted() {
    console.log("username mount", this.username);
    // if (this.username !== "") this.select(this.username);
  },

  updated() {
    this.$emit("input", this.selected);
  },

  methods: {
    focus(bol) {
      this.focused = bol;
    },
    select(username) {
      console.log("select", username);
      this.input = this.nameInfo(username);
      this.selected = username;
      this.focus(false);
    },
    nameInfo(username) {
      console.log("nameInfo", this.data); // nameInfo kosong pertama kali load page
      let names = this.data.filter(name => name.username == username);

      // console.log("filter", names);
      if (names.length) return `${names[0].name} (${names[0].username})`;
    }
  }
};
</script>