<template>
  <div class="wrapper" v-if="from">
    <div class="ss-editor">
      From
      <span class="number">{{ from.pdb_number }}</span> to
      <span class="number">{{ to.pdb_number }}</span>

      <input
        class="confirm control"
        type="button"
        value="Sheet"
        @click="
          setSecondaryStructures({
            proteinName: protein.name,
            from,
            to,
            type: 'E',
          })
        "
      />
      <input
        class="confirm control"
        type="button"
        value="Helix"
        @click="
          setSecondaryStructures({
            proteinName: protein.name,
            from,
            to,
            type: 'H',
          })
        "
      />
      <input
        class="confirm control"
        example-act="make-coil-button"
        type="button"
        value="Coil"
        @click="
          setSecondaryStructures({
            proteinName: protein.name,
            from,
            to,
            type: 'C',
          })
        "
      />
      <input class="cancel control" type="button" value="✕" @click="cancel" />
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
      from: null,
      to: null,
    };
  },

  props: ["protein", "acids"],

  methods: {
    ...mapActions(["setSecondaryStructures"]),
    init() {
      this.from = null;
      this.to = null;
    },
    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;
}
.ss-editor {
  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;
}

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

.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>