<template>
  <div class="project-settings-window">
    <h1 class="headline">Project</h1>

    <div class="content">
      <h2>General</h2>
      <general-settings/>

      <h2>Model Interaction</h2>
      <model-interaction-settings v-if="model"
                                  :model="model"
                                  :jobs="jobs"/>

      <template v-if="$root.project['label_provider_id']">
        <h2>Label Provider</h2>
        <label-provider-settings :jobs="jobs"/>
      </template>

      <template v-if="$root.project['external_data']">
        <h2>External Storage</h2>
        <external-storage-settings :jobs="jobs"/>
      </template>
    </div>
  </div>
</template>

<script>
import GeneralSettings from "@/components/projects/settings/general-settings";
import ModelInteractionSettings from "@/components/projects/settings/model-interaction-settings";
import LabelProviderSettings from "@/components/projects/settings/label-provider-settings";
import ExternalStorageSettings from "@/components/projects/settings/external-storage-settings";

export default {
  name: "project-settings-window",
  components: {ExternalStorageSettings, LabelProviderSettings, ModelInteractionSettings, GeneralSettings},
  data: function () {
    return {
      model: false,
      jobs: []
    }
  },
  created: function () {
    // get jobs and subscribe to changes
    this.getJobs();

    this.$root.socket.on('connect', this.getJobs);
    this.$root.socket.on('create-job', this.addJob);
    this.$root.socket.on('remove-job', this.removeJob);
    this.$root.socket.on('edit-job', this.editJob);

    // get model
    this.$root.socket.get(`/projects/${this.$root.project.identifier}/model`)
        .then(response => response.json())
        .then(model => this.model = model);
  },
  destroyed: function () {
    this.$root.socket.off('connect', this.getJobs);
    this.$root.socket.off('create-job', this.addJob);
    this.$root.socket.off('remove-job', this.removeJob);
    this.$root.socket.off('edit-job', this.editJob);
  },
  methods: {
    getJobs: function () {
      this.$root.socket.get('/jobs')
          .then(response => response.json())
          .then(jobs => {
            this.jobs = [];
            jobs.forEach(this.addJob)
          });
    },
    addJob: function (job) {
      if (job['project_id'] !== this.$root.project.identifier)
        return;

      for (let j of this.jobs)
        if (j.identifier === job.identifier)
          return;

      this.jobs.push(job);
    },
    removeJob: function (job) {
      for (let i = 0; i < this.jobs.length; i++) {
        if (this.jobs[i].identifier === job.identifier) {
          this.jobs.splice(i, 1);
          return;
        }
      }
    },
    editJob: function (job) {
      for (let i = 0; i < this.jobs.length; i++) {
        if (this.jobs[i].identifier === job.identifier) {
          this.$set(this.jobs, i, job);
          return;
        }
      }
    }
  }
}
</script>

<style scoped>
.project-settings-window {
  padding: 1rem;
  overflow: auto;
}

h2 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

h2:first-of-type {
  margin-top: 0;
}

/deep/ .content textarea {
  height: 4rem;
}
</style>
