<template>
  <div class="wrapper" v-if="from">
    <button
      class="control"
      @click="$emit('findloop', { segmentName, from, to })"
      v-if="protein.hasSuperloops"
    >
      <span class="findloop">S</span>
    </button>

    <div class="segment-creator">
      From
      <span class="number">{{ from.pdb_number }}</span> to
      <span class="number">{{ to.pdb_number }}</span>
      <input
        class="name"
        type="text"
        v-model="segmentName"
        @click="segmentName = ''"
      />
      <input
        class="confirm control"
        type="button"
        value="✓"
        @click="$emit('confirm', { name: segmentName, from, to })"
      />
      <input class="cancel control" type="button" value="✕" @click="cancel" />
    </div>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";
export default {
  data() {
    return {
      from: null,
      to: null,
      segmentName: "MyLoop",
    };
  },

  props: ["protein", "acids"],
  components: {
    Multiselect,
  },
  methods: {
    init() {
      this.from = null;
      this.to = null;
      this.segmentName = "MyLoop";
    },
    cancel() {
      this.init();
      this.$emit("cancel");
    },
  },

  watch: {
    acids(acidSelection) {
      if (acidSelection?.first == null) {
        this.init();
        return;
      }
      this.from = acidSelection?.first;
      this.to = acidSelection?.last;
    },
  },
};
</script>

<style scoped>
.wrapper {
  display: flex;
  width: 100%;
}
.mode-select {
  width: 10em;
  height: 1em;
}
.segment-creator {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  font-size: 0.8em;
  border: 1px solid var(--accent);
  padding: 1px 1px;
}
.name {
  border: none;

  text-align: center;
  font-weight: bolder;
  color: white;
  background: var(--accent50);
}
.name:focus {
  outline: none;
}

.control {
  background: var(--neutral);
  border: none;
}

.cancel:hover {
  background: var(--cancel-grey);
}
.confirm:hover {
  background: var(--accent);
}

.cancel {
  justify-self: self-start;
}
.number {
  color: var(--accent);
  margin: 0px 1ex;
}

.findloop {
  font-family: "EBI-Conceptual";
  font-size: 25px;
}

button {
  display: flex;
  align-items: center;
  padding: 1px;
  margin-right: 4px;
}
</style>