<template>
  <div class="row form-group mt-3" :key="$attrs.key">
    <label :for="localFormElement.key" :class="'col-md-12'"
      >{{ getLabel() }}:</label
    >
    <div class="mt-2" :class="'col-md-12'">
      <textarea
        :ref="localFormElement.key"
        class="form-control"
        @focus="clearErrors"
        @blur="validate"
        @change="validate"
        @paste="validate"
        :placeholder="localFormElement.placeholder"
        :id="localFormElement.key"
        :name="localFormElement.key"
        v-model="textValue"
        cols="40"
        :rows="getRows()"
      >
      </textarea>
    </div>
  </div>
</template>

<script>
import formBuilderMixin from "@mixins/formBuilderMixin";
// import HttpService from "@services/httpService";
// import VueTribute from "vue-tribute";
// import borhanApi from "@apis/borhanApi.js";

export default {
  props: {
    enableSuggestion: {
      default: false,
    },
    contextMenu: {
      default() {
        return [];
      },
    },
  },
  mixins: [formBuilderMixin],

  data() {
    return {
      // httpService: undefined,
    };
  },
  mounted() {
    // this.httpService = new HttpService();
  },
  methods: {
    getRows() {
      if (this.localFormElement?.rows) return this.localFormElement?.rows;
      return "5";
    },
    // noMatchFound(args) {
    //   console.info(args);
    // },
    // textReplaced(args) {
    //   console.info(args);
    // },
    // methodName(action, index = 0) {
    //   try {
    //     this[action](index);
    //   } catch (err) {
    //     this.$emit(action, index);
    //   }
    // },
    // remoteSearch(input, callback) {
    //   console.info(input);

    //   return this.httpService
    //     .getRequest(borhanApi.concept.annotations.read + "?ontology_id=" + input)
    //     .then((res) => {
    //       callback(res.data);
    //     })
    //     .catch((e) => {
    //       callback([]);
    //     })
    //     .finally(() => {
    //       this.fetchingData = false;
    //     });
    // },
  },
  components: {
    // VueTribute: () =>
    //   import( "vue-tribute"),
  },
};
</script>

<style scoped>
.form-control {
  height: auto !important;
}
</style>

<style>
.tribute-container {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  overflow: auto;
  max-height: 25em;
  overflow: auto;
  display: block;
  z-index: 999999;

  transform: translate(-80px, 7px);
  box-shadow: 0 9px 8px -3px rgba(64, 60, 67, 0.24),
    8px 0 8px -7px rgba(64, 60, 67, 0.24),
    -8px 0 8px -7px rgba(64, 60, 67, 0.24);

  box-shadow: 0px 0px 14px 0px #eee;

  border-radius: 0.3em;
  background: #ededed;
}

.tribute-container ul {
  margin: 0;
  margin-top: 2px;
  padding: 0;
  list-style: none;
  /* background: #efefef; */
}
.tribute-container li {
  padding: 0.5em 1em;
  cursor: pointer;
}
.tribute-container li.highlight {
  /* background: #ddd; */
}
.tribute-container li span {
  font-weight: bold;
}
.tribute-container li.no-match {
  cursor: default;
}
.tribute-container .menu-highlighted {
  font-weight: bold;
}
</style>
