<template>
  <div class="position-relative">
    <form>
      <div class="form-row text__14">
        <label for="">لینک بیرونی </label>
        <span>{{ data.entity.title }}</span>
      </div>

      <div class="form-group form-row">
        <label class="col-2" for="title">لینک : </label>
        <input
          class="form-control col"
          placeholder="لینک را وارد کنید"
          type="text"
          id="title"
          name="title"
          v-on:change="linkChanged"
          v-model.trim="value.url"
        />
      </div>
      <div class="form-group form-row">
        <label class="col-2" for="title">عنوان: </label>
        <input
          class="form-control col"
          placeholder="عنوان را وارد کنید"
          type="text"
          id="title"
          name="title"
          v-model.trim="value.title"
        />
      </div>
      <div class="form-row">
        <label for="" class="col-2">نوع </label>
        <select v-model="value.type" name="" id="" class="form-control col-6">
          <option
            :selected="index == 0"
            v-for="(option, index) in link_types"
            :value="option.label"
            :key="option.id"
          >
            {{ option.label }}
          </option>
        </select>
      </div>
      <div class="popUp-tab__buttons">
        <div class="d-flex justify-content-between flex-grow-1">
          <button
            type="button"
            class="btn delete-btn btn-outline-danger button_delete_SocialEffects"
            @click.prevent="deleteProperty()"
          >
            حذف
          </button>

          <div class="d-flex">
            <button
              type="button"
              class="popUp-tab__clear btn"
              @click.prevent="closeModal"
              ref="closeLinksModal"
            >
              لغو
            </button>
            <button
              type="button"
              class="popUp-tab__submit btn"
              @click.prevent="saveProperty()"
            >
              ثبت
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import { propertyMixin } from "@chat/mixins/propertyMixin";
import commonMixin from "@chat/mixins/commonMixin";

export default {
  mixins: [propertyMixin, commonMixin],
  props: {
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      value: {
        title: null,
        url: null,
        type: null,
      },
    };
  },

  

  methods: {
    // closeModal() {
    //   this.$refs.closeLinksModal.click();
    // },
    linkChanged() {
      var ext = this.getFileExtension(this.value.url);
      if (["jpg", "jpeg", "png", "webp"].includes(ext))
        this.value.type = this.link_types[0].label;
      else if (["pdf", "docx", "xlsx", "zip"].includes(ext))
        this.value.type = this.link_types[1].label;
      else if (this.value.url.startsWith("https://www.aparat.com"))
        this.value.type = this.link_types[2].label;
    },
  },

  mounted() {
    const res = this.getPropertyValue(
      this.data.entity,
      this.data.keyName,
      this.data.index
    );

    if (res) this.value = res;
  },
};
</script>
