<script>
import { s__ } from '~/locale';
import IntegrationsTable from './integrations_table.vue';

export default {
  name: 'IntegrationsList',
  components: {
    IntegrationsTable,
  },
  props: {
    integrations: {
      type: Array,
      required: true,
    },
  },
  computed: {
    integrationsGrouped() {
      return this.integrations.reduce(
        (integrations, integration) => {
          if (integration.active) {
            integrations.active.push(integration);
          } else {
            integrations.inactive.push(integration);
          }

          return integrations;
        },
        { active: [], inactive: [] },
      );
    },
  },
  i18n: {
    activeTableEmptyText: s__("Integrations|You haven't activated any integrations yet."),
    inactiveTableEmptyText: s__("Integrations|You've activated every integration 🎉"),
    activeIntegrationsHeading: s__('Integrations|Active integrations'),
    inactiveIntegrationsHeading: s__('Integrations|Add an integration'),
  },
};
</script>

<template>
  <div>
    <h4>{{ $options.i18n.activeIntegrationsHeading }}</h4>
    <integrations-table
      class="gl-mb-7!"
      :integrations="integrationsGrouped.active"
      :empty-text="$options.i18n.activeTableEmptyText"
      show-updated-at
      data-testid="active-integrations-table"
    />

    <h4>{{ $options.i18n.inactiveIntegrationsHeading }}</h4>
    <integrations-table
      :integrations="integrationsGrouped.inactive"
      :empty-text="$options.i18n.inactiveTableEmptyText"
      data-testid="inactive-integrations-table"
    />
  </div>
</template>
