<!--
  - Copyright 2014-2018 the original author or authors.
  -
  - Licensed under the Apache License, Version 2.0 (the "License");
  - you may not use this file except in compliance with the License.
  - You may obtain a copy of the License at
  -
  -     http://www.apache.org/licenses/LICENSE-2.0
  -
  - Unless required by applicable law or agreed to in writing, software
  - distributed under the License is distributed on an "AS IS" BASIS,
  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  - See the License for the specific language governing permissions and
  - limitations under the License.
  -->

<template>
  <section class="section" :class="{ 'is-loading' : !hasLoaded }">
    <div class="container" v-if="hasLoaded">
      <div v-if="error" class="message is-danger">
        <div class="message-body">
          <strong>
            <font-awesome-icon class="has-text-danger" icon="exclamation-triangle"/>
            Fetching Liquibase migrations failed.
          </strong>
          <p v-text="error.message"/>
        </div>
      </div>
      <template v-for="(context, ctxName) in contexts">
        <h3 class="title" v-text="ctxName" :key="ctxName"/>
        <template v-for="(report, name) in context.liquibaseBeans">
          <sba-panel :key="`${ctxName}-${name}`" :title="`name`" class="change-set">
            <table class="table is-hoverable is-fullwidth">
              <thead>
                <tr>
                  <th>Id</th>
                  <th>Execution</th>
                  <th>Description</th>
                  <th>Tag</th>
                  <th>Contexts</th>
                  <th>Labels</th>
                </tr>
              </thead>
              <tbody>
                <template v-for="changeSet in report.changeSets">
                  <tr :key="`${ctxName}-${name}-${changeSet.id}`" class="is-selectable"
                      @click="showDetails[changeSet.checksum] ? $delete(showDetails, changeSet.checksum) : $set(showDetails, changeSet.checksum, true)">
                    <td v-text="changeSet.id"/>
                    <td>
                      <span v-text="changeSet.execType" class="tag" :class="execClass(execType)"/>
                    </td>
                    <td v-text="changeSet.description"/>
                    <td v-text="changeSet.tag"/>
                    <td v-text="changeSet.contexts.join(', ')"/>
                    <td>
                      <span v-for="label in changeSet.labels" :key="`${ctxName}-${name}-${changeSet.id}-${label}`"
                            class="tag is-info" v-text="label"/>
                    </td>
                  </tr>
                  <tr v-if="showDetails[changeSet.checksum]" :key="`${ctxName}-${name}-${changeSet.id}-details`">
                    <td colspan="6">
                      <table class="table is-fullwidth">
                        <tr>
                          <th>Changelog</th>
                          <td colspan="3" v-text="changeSet.changeLog"/>
                          <th>Author</th>
                          <td v-text="changeSet.author"/>
                        </tr>
                        <tr>
                          <th>Checksum</th>
                          <td v-text="changeSet.checksum"/>
                          <th>Comments</th>
                          <td colspan="3" v-text="changeSet.comments"/>
                        </tr>
                        <tr>
                          <th>Execution Order</th>
                          <td v-text="changeSet.orderExecuted"/>
                          <th>ExecutionDate</th>
                          <td v-text="changeSet.dateExecuted"/>
                          <th>DeploymentId</th>
                          <td v-text="changeSet.deploymentId"/>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </template>
              </tbody>
            </table>
          </sba-panel>
        </template>
      </template>
    </div>
  </section>
</template>

<script>
  import Instance from '@/services/instance';

  export default {
    props: {
      instance: {
        type: Instance,
        required: true
      }
    },
    data: () => ({
      hasLoaded: false,
      error: null,
      contexts: null,
      showDetails: {}
    }),
    computed: {},
    created() {
      this.fetchLiquibase();
    },
    methods: {
      async fetchLiquibase() {
        if (this.instance) {
          this.error = null;
          try {
            const res = await this.instance.fetchLiquibase();
            this.contexts = res.data.contexts;
          } catch (error) {
            console.warn('Fetching Liquibase changeSets failed:', error);
            this.error = error;
          }
          this.hasLoaded = true;
        }
      },
      execClass(execType) {
        switch (execType) {
          case 'EXECUTED':
            return 'is-success';
          case 'FAILED':
            return 'is-danger';
          case 'SKIPPED':
            return 'is-light';
          case 'RERAN':
          case 'MARK_RAN':
            return 'is-warning';
          default:
            return 'is-info';
        }
      }
    }
  }
</script>

<style lang="scss">
  @import "~@/assets/css/utilities";

  .change-set .card-header {
    position: sticky;
    background: $white;
    top: ($navbar-height-px + $tabs-height-px);
  }
</style>