<template>
  <section 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)"
      />
      <CancelButton class="back-button" @click="cancel" />
    </div>
  </section>
</template>

<script>
import LabelButton from "../PanelButtons/TextLabelButton";
import CancelButton from "../PanelButtons/CancelButton";
import { mapActions } from "vuex";

export default {
  props: ["role"],
  components: {
    LabelButton,
    CancelButton,
  },
  data() {
    return {
      pdb: "",
      chain: null,
    };
  },
  methods: {
    ...mapActions(["proposeProtein"]),
    proposeDownload() {
      this.proposeProtein({
        proteinInfo: {
          method: "rcsb",
          name: this.pdb.trim(),
          chain: this.chain ?? "A",
        },
        role: this.role,
      });
    },
    cancel() {
      this.proposeProtein({ proteinInfo: null, role: this.role });
      this.$emit("cancel");
    },
  },
  watch: {
    pdb: function () {
      this.proposeDownload();
    },
    chain: function () {
      this.proposeDownload();
    },
  },
};
</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;
}

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