<template>
  <v-container fluid fill-height class="ma-0 pa-0">
    <v-row no-gutters align="stretch" class="fill-height">
      <v-col cols="12" v-if="projectFound">
        <!-- Show component here according to selected route -->
        <keep-alive>
          <router-view :key="$route.path"></router-view>
        </keep-alive>
      </v-col>
      <v-col cols="12" v-else>
        <v-card>
          <v-card-text>
            Project does not exist.
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import AccessMixin from '@/mixins/access';

export default {
  name: 'Project',

  mixins: [
    AccessMixin
  ],

  components: {
  },
  data () {
    return {
    //
    }
  },

  computed: {

    projectFound () {
      return this.loading || this.projectId;
    },

    ...mapGetters(["loading", "projectId", "projectSchema"])
  },

  methods: {

    handleEvents (context, {payload}) {
      if (payload.pid != this.projectId) {
        console.warn(`${this.projectId} ignoring notification for ${payload.pid}`);
        return;
      }

      this.refreshEvents();
    },

    handleLines (context, {payload}) {
      if (payload.pid != this.projectId) {
        console.warn(`${this.projectId} ignoring notification for ${payload.pid}`);
        return;
      }

      this.refreshLines();
    },

    handlePlannedLines (context, {payload}) {
      if (payload.pid != this.projectId) {
        console.warn(`${this.projectId} ignoring notification for ${payload.pid}`);
        return;
      }

      this.refreshPlan();
    },

    handleSequences (context, {payload}) {
      if (payload.pid != this.projectId) {
        console.warn(`${this.projectId} ignoring notification for ${payload.pid}`);
        return;
      }

      console.log("handleSequences");
      this.refreshSequences();
    },

    registerNotificationHandlers (action = "registerHandler") {


      this.$store.dispatch(action, {
        table: 'event',

        handler: (context, message) => {
          this.handleEvents(context, message);
        }
      });

      ["preplot_lines", "preplot_points"].forEach( table => {
        this.$store.dispatch(action, {
          table,

          handler: (context, message) => {
            this.handleLines(context, message);
          }
        })
      });


      this.$store.dispatch(action, {
        table: 'planned_lines',

        handler: (context, message) => {
          this.handlePlannedLines(context, message);
        }
      });

      ["raw_lines", "raw_shots", "final_lines", "final_shots"].forEach( table => {
        this.$store.dispatch(action, {
          table,

          handler: (context, message) => {
            this.handleSequences(context, message);
          }
        })
      });

    },

    unregisterNotificationHandlers () {
      return this.registerNotificationHandlers("unregisterHandler");
    },

    ...mapActions(["getProject", "refreshLines", "refreshSequences", "refreshEvents", "refreshLabels", "refreshPlan"])
  },

  async mounted () {
    await this.getProject(this.$route.params.project);
    if (this.projectFound) {
      this.registerNotificationHandlers();

      this.refreshLines();
      this.refreshSequences();
      this.refreshEvents();
      this.refreshLabels();
      this.refreshPlan();
    }
  },

  beforeDestroy () {
    this.unregisterNotificationHandlers();
  }


}
</script>
