<template>
  <div>
    {{ getSolutionMeta ? getSolutionMeta.name : "" }}

    <div class="view">
      <Sequence
        v-if="getSolution != null"
        :enableSelection="false"
        :protein="getSolution"
        :from="Number.NEGATIVE_INFINITY"
        :to="Number.POSITIVE_INFINITY"
        :colorBy="
          (acid) =>
            getSolutionMeta.sequencePreview[acid.index] == 'I'
              ? '#179BAC'
              : '#AC2817'
        "
      />
    </div>
    <div class="downloads">
      <TextLabelButton @click="userDownloadSelectedSolution"
        >Download solution PDB</TextLabelButton
      >
    </div>
  </div>
</template>

<script>
import Sequence from "./StraightenedAcids/Sequence";
import { mapActions, mapGetters } from "vuex";
import TextLabelButton from "./PanelButtons/TextLabelButton";

export default {
  components: {
    Sequence,
    TextLabelButton,
  },
  computed: {
    ...mapGetters(["getSolution", "getSolutionMeta"]),
  },

  methods: {
    ...mapActions(["downloadSolution", "userDownloadSelectedSolution"]),
  },
};
</script>

<style scoped>
.view {
  background: white;
  border-radius: 10px;
  padding: 3px 10px;
}
.downloads {
  display: flex;
  margin: 4px;
}
</style>