<script>
import { GlTabs, GlTab, GlCard } from '@gitlab/ui';
import { s__ } from '~/locale';
import SurveyRequestBanner from '../survey_request_banner.vue';
import VulnerabilityReportHeader from './vulnerability_report_header.vue';
import VulnerabilityReport from './vulnerability_report.vue';
import { REPORT_TAB } from './constants';

const OPERATIONAL_TAB_INDEX = 1;

export default {
  components: {
    GlTabs,
    GlTab,
    GlCard,
    SurveyRequestBanner,
    VulnerabilityReportHeader,
    VulnerabilityReport,
  },
  props: {
    query: {
      type: Object,
      required: true,
    },
    showProjectFilter: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      tabIndex: this.$route.query.tab === REPORT_TAB.OPERATIONAL ? OPERATIONAL_TAB_INDEX : 0,
    };
  },
  watch: {
    tabIndex(index) {
      // Set tab querystring value to 'OPERATIONAL' if it's the operational tab, otherwise remove it
      // for the development tab.
      const query = {
        ...this.$route.query,
        tab: index === OPERATIONAL_TAB_INDEX ? REPORT_TAB.OPERATIONAL : undefined,
      };

      this.$router.push({ query });
    },
  },
  i18n: {
    developmentTab: s__('SecurityReports|Development vulnerabilities'),
    operationalTab: s__('SecurityReports|Operational vulnerabilities'),
    operationalTabMessage: s__(
      'SecurityReports|These vulnerabilities were detected in external sources. They are not necessarily tied to your GitLab project. For example, running containers, URLs, and so on.',
    ),
  },
  REPORT_TAB,
};
</script>

<template>
  <div>
    <survey-request-banner class="gl-mt-5" />

    <vulnerability-report-header />

    <gl-tabs v-model="tabIndex" class="gl-mt-5" content-class="gl-pt-0">
      <gl-tab :title="$options.i18n.developmentTab" lazy>
        <slot name="header-development"></slot>

        <vulnerability-report
          :type="$options.REPORT_TAB.DEVELOPMENT"
          :query="query"
          :show-project-filter="showProjectFilter"
        />
      </gl-tab>

      <gl-tab :title="$options.i18n.operationalTab" lazy>
        <gl-card body-class="gl-p-6">{{ $options.i18n.operationalTabMessage }}</gl-card>

        <slot name="header-operational"></slot>

        <vulnerability-report
          :type="$options.REPORT_TAB.OPERATIONAL"
          :query="query"
          :show-project-filter="showProjectFilter"
        />
      </gl-tab>
    </gl-tabs>
  </div>
</template>
