<script>
import { mapState, mapActions } from 'vuex';
import { GlButton, GlLoadingIcon } from '@gitlab/ui';
import { s__ } from '~/locale';
import AddLicenseForm from './components/add_license_form.vue';
import LicenseManagementRow from './components/license_management_row.vue';
import DeleteConfirmationModal from './components/delete_confirmation_modal.vue';
import createStore from './store/index';

const store = createStore();

export default {
  name: 'LicenseManagement',
  components: {
    AddLicenseForm,
    DeleteConfirmationModal,
    LicenseManagementRow,
    GlButton,
    GlLoadingIcon,
  },
  props: {
    apiUrl: {
      type: String,
      required: true,
    },
  },
  data() {
    return { formIsOpen: false };
  },
  store,
  emptyMessage: s__(
    'LicenseManagement|There are currently no approved or blacklisted licenses in this project.',
  ),
  computed: {
    ...mapState(['managedLicenses', 'isLoadingManagedLicenses']),
  },
  mounted() {
    this.setAPISettings({
      apiUrlManageLicenses: this.apiUrl,
    });
    this.loadManagedLicenses();
  },
  methods: {
    ...mapActions(['loadManagedLicenses', 'setAPISettings', 'setLicenseApproval']),
    openAddLicenseForm() {
      this.formIsOpen = true;
    },
    closeAddLicenseForm() {
      this.formIsOpen = false;
    },
  },
};
</script>
<template>
  <div class="license-management">
    <delete-confirmation-modal />
    <gl-loading-icon v-if="isLoadingManagedLicenses" />
    <ul v-if="managedLicenses.length" class="list-group list-group-flush">
      <license-management-row
        v-for="license in managedLicenses"
        :key="license.name"
        :license="license"
      />
    </ul>
    <div v-else class="bs-callout bs-callout-warning">{{ $options.emptyMessage }}</div>
    <div class="prepend-top-default">
      <add-license-form
        v-if="formIsOpen"
        :managed-licenses="managedLicenses"
        @addLicense="setLicenseApproval"
        @closeForm="closeAddLicenseForm"
      />
      <gl-button v-else class="js-open-form" variant="default" @click="openAddLicenseForm">
        {{ s__('LicenseManagement|Add a license') }}
      </gl-button>
    </div>
  </div>
</template>
