<template>
  <div class="protein-flexibility multiselector">
    <div class="protein-name censor">
      {{ protein.displayName }}
    </div>
    <Multiselect
      v-model="pickedBFactorSources"
      :options="availableBFactorSources"
      :multiple="true"
      :close-on-select="false"
      :searchable="false"
      :hide-selected="true"
      label="description"
      track-by="name"
      placeholder="B-factor sources"
      example-act="flexibility-select"
    />
    <VueFileAgent
      v-if="uploadsCustomBFactors"
      class="pdb"
      :theme="'list'"
      :multiple="true"
      :deletable="true"
      helpText="Click or drag to choose custom B-factor file."
      v-model="customBFactorFiles"
    >
      <template v-slot:file-preview="slotProps">
        <div :key="slotProps.index" class>
          <strong>{{ slotProps.fileRecord.name() }}</strong>
          <span class="text-muted">({{ slotProps.fileRecord.size() }})</span>
        </div>
      </template>
      <template v-slot:file-preview-new>
        <div key="new">Click or drag & drop here</div>
      </template>
    </VueFileAgent>

    <div class="finalize">
      <LabelButton
        example-act="flexibility-select-confirm"
        :spinTillResolved="computation"
        @click="getBFactors"
      >
        Compute Flexibility
      </LabelButton>
    </div>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";
import MultiselectStyles from "vue-multiselect/dist/vue-multiselect.min.css";
import VueFileAgentPlugin from "vue-file-agent";
import VueFileAgentStyles from "vue-file-agent/dist/vue-file-agent.css";
import LabelButton from "../PanelButtons/TextLabelButton";
import _ from "lodash";
import { mapActions } from "vuex";

export default {
  props: ["protein"],
  components: {
    Multiselect,
    VueFileAgent: VueFileAgentPlugin.VueFileAgent,
    LabelButton,
  },
  data() {
    return {
      pickedBFactorSources: [
        {
          name: "pdb",
          description: "Original PDB",
          /* Hack - don't allow Original PDB to be deselected */
          $isDisabled: true,
        },
        {
          name: "anm",
          description: "ANM",
        },
        {
          name: "gnm",
          description: "GNM",
        },
      ],
      availableBFactorSources: [
        {
          name: "pdb",
          description: "Original PDB",
        },
        {
          name: "anm",
          description: "ANM",
        },
        {
          name: "gnm",
          description: "GNM",
        },
        // {
        //   name: "file",
        //   description: "Custom File",
        // },
      ],
      customBFactorFiles: [],
      computation: null
    };
  },
  computed: {
    uploadsCustomBFactors() {
      return _.some(this.pickedBFactorSources, (b) => b.name == "file");
    },
  },
  methods: {
    ...mapActions(["computeFlexibility"]),
    async getBFactors() {
      this.computation = this.computeFlexibility({
        protein: this.protein,
        bfactors: this.pickedBFactorSources.map((b) => b.name),
        files: this.customBFactorFiles.map((f) => f.file),
      });
      await this.computation
    },
  },
};
</script>


<style scoped>
.protein-flexibility {
  background: var(--neutral);
  padding: 3px 5px;
  display: flex;
  flex-direction: column;
}

.protein-flexibility > * {
  margin: 2px 0px;
}

.protein-flexibility >>> .multiselect__tag,
.protein-flexibility >>> .multiselect__option--highlight {
  background: grey;
  border-radius: 0px;
}

.protein-flexibility >>> .multiselect__tag-icon {
  background: var(--cancel-grey);
  border-radius: 0px;
}

.protein-flexibility >>> .multiselect__tag-icon::after {
  color: white;
}

.protein-flexibility >>> .multiselect__tag-icon:hover {
  background: var(--accent);
}

.protein-flexibility >>> .multiselect__tag {
  border-radius: 5px;
}

.protein-flexibility >>> .multiselect__option--highlight:after {
  display: none;
}

.protein-flexibility >>> .multiselect__spinner:after {
  border-color: var(--accent) transparent transparent;
}

.protein-flexibility >>> .vue-file-agent,
.protein-flexibility >>> .file-preview-wrapper {
  border: none;
  padding: 0px;
}

.finalize {
  align-self: flex-end;
  display: flex;
  align-items: center;
}

.finalize > * {
  margin: 3px;
}

/* Hack - don't allow Original PDB to be deselected */
.protein-flexibility
  >>> div.multiselect__tags
  > div.multiselect__tags-wrap
  > span:first-child {
  padding: 4px 10px;
}
.protein-flexibility
  >>> div.multiselect__tags
  > div.multiselect__tags-wrap
  > span:first-child
  > i {
  display: none;
}
</style>