<template>
  <div>
    <div class="job-information-field">
      <div>Job Description (optional):</div>
      <textarea rows="3" cols="45" v-model="jobDescription"></textarea>
    </div>
    <div class="job-information-field">
      <div>E-mail (optional):</div>
      <input type="email" v-model="email" />
    </div>

    <div class="dividor"></div>

    <div>
      <div>Licence Agreement:</div>
      <div>
        <form>
          <label class="block"
            ><input
              type="radio"
              name="license-type"
              value="GRAFTED_SEQUENCES_ONLY"
              v-model="license"
            />I agree that I am commercial user and do not own MODELLER
            licence.</label
          >

          <label class="block">
            <input
              type="radio"
              name="license-type"
              value="MODELLER_ONLY"
              v-model="license"
            />I agree that I am commercial user and I own a commercial licence
            for MODELLER only.
          </label>

          <label class="block"
            ><input
              type="radio"
              name="license-type"
              value="FULL"
              v-model="license"
            />I agree that I am commercial user and I own a commercial licence
            for both Rosetta and MODELLER.</label
          >

          <label class="block"
            ><input
              type="radio"
              name="license-type"
              value="FULL"
              v-model="license"
            />I agree with the academic licence agreement and confirm that I
            will use the software exclusively for non-commercial purposes.
          </label>

          <div
            v-if="license == 'GRAFTED_SEQUENCES_ONLY'"
            class="licence-warning"
          >
            Only sequences for grafted designs will be generated. 3D models of
            the grafted designs will not be produced.
          </div>
          <div v-if="license == 'MODELLER_ONLY'" class="licence-warning">
            Sequences for all grafted designs will be generated. 3D models of
            the grafted designs will be evaluated using only MODELLER scores.
          </div>
        </form>
      </div>
    </div>
    <LabelButton
      @click="beginGraftDesign"
      :spinTillResolved="graftDesignState"
      class="labelButton"
    >
      Launch Graft Design
    </LabelButton>
  </div>
</template>

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

export default {
  components: {
    LabelButton,
  },

  data() {
    return {
      license: "FULL",
      jobDescription: null,
      email: null,

      graftDesignState: null,
    };
  },

  methods: {
    ...mapActions(["resolveProposedProteins"]),

    async beginGraftDesign() {
      this.graftDesignState = this.resolveProposedProteins({
        license: this.license,
        jobDescription: this.jobDescription,
        email: this.email,
      });

      await this.graftDesignState;
      this.$router.push({ name: "graft-design" });
    },
  },
};
</script>

<style scoped>
.block {
  display: block;
}

.labelButton {
  width: fit-content; /* palko kurva nemen to, takto to vyzera dobre, ked tam najebes percenta tak to bude napicu ked sa zmeni co i len pismenko */
  /* height: 30px; */
  margin: 10px;
  /* background: var(--gradient); */
}

.job-information-field {
  margin: 0px 10px;
}

.licence-warning {
  color: var(--scaffold);
}
</style>
