<template>
  <div class="dropdown sci-dropdown protocol-options-dropdown">
    <button
      class="btn btn-secondary dropdown-toggle"
      type="button"
      id="dropdownProtocolOptions"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="true"
    >
      <span class="fas fa-cog"></span>
      <span>{{ i18n.t("my_modules.protocol.options_dropdown.title") }}</span>
      <span class="caret"></span>
    </button>
    <ul
      class="dropdown-menu dropdown-menu-right"
      aria-labelledby="dropdownProtocolOptions"
    >
      <li>
        <a
          ref="loadProtocol"
          data-action="load-from-repository"
          @click="loadProtocol"
          :class="{ disabled: !protocol.attributes.urls.load_from_repo_url }"
        >
          <span class="fas fa-edit"></span>
          <span>{{ i18n.t("my_modules.protocol.options_dropdown.load_from_repo") }}</span>
        </a>
      </li>
      <li>
        <a
          ref="saveProtocol"
          data-action="copy-to-repository"
          @click="saveProtocol"
          :class="{ disabled: !protocol.attributes.urls.save_to_repo_url }"
        >
          <span class="fas fa-check"></span>
          <span>{{
            i18n.t("my_modules.protocol.options_dropdown.save_to_repo")
          }}</span>
        </a>
      </li>
      <li>
        <a data-action="load-from-file"
           class="btn-open-file"
           :class="{ disabled: !protocol.attributes.urls.import_url }">
          <span class="fas fa-download"></span>
          <span>{{ i18n.t("my_modules.protocol.options_dropdown.import") }}</span>
          <input type="file" value="" accept=".eln" data-turbolinks="false">
        </a>
      </li>
      <li>
        <a
          data-turbolinks="false"
          :href="protocol.attributes.urls.export_url"
          :class="{ disabled: !protocol.attributes.urls.export_url }"
        >
          <span class="fas fa-upload"></span>
          <span>{{
            i18n.t("my_modules.protocol.options_dropdown.export")
          }}</span>
        </a>
      </li>
    </ul>
  </div>
</template>

 <script>
export default {
  name: "ProtocolOptions",
  props: {
    protocol: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    // Legacy global functions from app/assets/javascripts/my_modules/protocols.js
    initLoadFromRepository();
    initCopyToRepository();
    initImport();
  },
  methods: {
    loadProtocol() {
      $.get(
        this.protocol.attributes.urls.load_from_repo_url + "?type=recent"
      ).success((data) => {
        $(this.$refs.loadProtocol).trigger("ajax:success", data);
      });
    },
    saveProtocol() {
      $.get(this.protocol.attributes.urls.save_to_repo_url).success((data) => {
        $(this.$refs.saveProtocol).trigger("ajax:success", data);
      });
    }
  },
};
</script>