<template>
  <section @keyup.enter="downloadFromRcbs" id="wannabe-pdbs-section">
    <div id="wannabepdbs" class="pdb-menu">
      <input
        :example-act="
          role == 'scaffold' ? 'scaffold-download-pdb' : 'insert-download-pdb'
        "
        :refs="
          role == 'scaffold' ? 'scaffold-download-pdb' : 'insert-download-pdb'
        "
        type="text"
        v-model="pdb"
        class="pdb censor"
        name="pdb"
        placeholder="4-letter PDB ID, i.e. 2FUJ"
      />
      <input
        :example-act="
          role == 'scaffold'
            ? 'scaffold-download-chain'
            : 'insert-download-chain'
        "
        type="text"
        v-model="chain"
        class="chain"
        name="chain"
        placeholder="Chain (A)"
      />
      <LabelButton
        :example-act="
          role == 'scaffold'
            ? 'scaffold-download-confirm'
            : 'insert-download-confirm'
        "
        class="load-button"
        @click="downloadFromRcbs"
      >
        Download PDB
      </LabelButton>
      <CancelButton class="back-button" @click="$emit('cancel')" />
    </div>
  </section>
</template>

<script>
import LabelButton from "../PanelButtons/TextLabelButton";
import CancelButton from "../PanelButtons/CancelButton";

export default {
  props: ["role"],
  components: {
    LabelButton,
    CancelButton,
  },
  data() {
    return {
      pdb: "",
      chain: null,
    };
  },
  methods: {
    downloadFromRcbs() {
      this.$store
        .dispatch("addRCBSProtein", {
          proteinName: this.pdb.trim(),
          config: { chain: this.chain ?? "A", computeLoops: false },
          role: this.role,
        })
        .then(() => this.$emit("loaded", this.pdb.trim()));
    },
  },
};
</script>

<style scoped>
input[type="text"] {
  padding: 10px;
  border: 1px solid gray;
  outline: 0;
}

.chain {
  flex: 1;
  width: 60px;
}

.pdb {
  flex: 100;
  border-radius: 10px 0px 0px 10px;
}

button {
  flex: 20;
  color: #fff;
  border: 1px #ff7f0e solid;
  cursor: pointer;
}

.load-button {
  border-radius: 0px 0px 0px 0px;

  height: auto;
}

.back-button {
  border-radius: 0px 10px 10px 0px;
  height: auto;
}

.pdb-menu {
  display: flex;
}
.censor {
  /* filter: blur(4px) */
}
</style>