<script>
import { GlButton } from '@gitlab/ui';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { LICENSE_APPROVAL_STATUS } from '../constants';
import AddLicenseFormDropdown from './add_license_form_dropdown.vue';
import { s__ } from '~/locale';

export default {
  name: 'AddLicenseForm',
  components: {
    AddLicenseFormDropdown,
    GlButton,
  },
  mixins: [glFeatureFlagsMixin()],
  LICENSE_APPROVAL_STATUS,
  approvalStatusOptions: [
    {
      value: LICENSE_APPROVAL_STATUS.ALLOWED,
      label: s__('LicenseCompliance|Allow'),
      description: s__('LicenseCompliance|Acceptable license to be used in the project'),
    },
    {
      value: LICENSE_APPROVAL_STATUS.DENIED,
      label: s__('LicenseCompliance|Deny'),
      description: s__(
        'LicenseCompliance|Disallow merge request if detected and will instruct developer to remove',
      ),
    },
  ],
  props: {
    managedLicenses: {
      type: Array,
      required: false,
      default: () => [],
    },
    knownLicenses: {
      type: Array,
      required: true,
    },
    loading: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      approvalStatus: '',
      licenseName: '',
    };
  },
  computed: {
    isInvalidLicense() {
      return this.managedLicenses.some(({ name }) => name === this.licenseName);
    },
    submitDisabled() {
      return this.isInvalidLicense || this.licenseName.trim() === '' || this.approvalStatus === '';
    },
    isDescriptionEnabled() {
      return Boolean(this.glFeatures.licenseComplianceDeniesMr);
    },
  },
  methods: {
    addLicense() {
      this.$emit('addLicense', {
        newStatus: this.approvalStatus,
        license: { name: this.licenseName },
      });
    },
    closeForm() {
      this.$emit('closeForm');
    },
  },
};
</script>
<template>
  <div class="col-sm-6 js-add-license-form">
    <div class="form-group">
      <label class="label-bold" for="js-license-dropdown">
        {{ s__('LicenseCompliance|Add license and related policy') }}
      </label>
      <add-license-form-dropdown
        id="js-license-dropdown"
        v-model="licenseName"
        :known-licenses="knownLicenses"
        :placeholder="s__('LicenseCompliance|License name')"
      />
      <div class="invalid-feedback" :class="{ 'd-block': isInvalidLicense }">
        {{ s__('LicenseCompliance|This license already exists in this project.') }}
      </div>
    </div>
    <div class="form-group">
      <div
        v-for="option in $options.approvalStatusOptions"
        :key="option.value"
        class="form-check"
        :class="{ 'mb-3': isDescriptionEnabled }"
      >
        <input
          :id="`js-${option.value}-license-radio`"
          v-model="approvalStatus"
          class="form-check-input"
          type="radio"
          :data-qa-selector="`${option.value}_license_radio`"
          :value="option.value"
          :aria-describedby="`js-${option.value}-license-radio`"
        />
        <label :for="`js-${option.value}-license-radio`" class="form-check-label pt-1">
          {{ option.label }}
        </label>
        <div v-if="isDescriptionEnabled" class="text-secondary">
          {{ option.description }}
        </div>
      </div>
    </div>
    <div class="gl-display-flex">
      <gl-button
        class="js-submit"
        :disabled="submitDisabled"
        :loading="loading"
        category="primary"
        variant="success"
        data-qa-selector="add_license_submit_button"
        @click="addLicense"
      >
        {{ __('Submit') }}
      </gl-button>
      <gl-button class="js-cancel ml-2" :disabled="loading" @click="closeForm">
        {{ __('Cancel') }}
      </gl-button>
    </div>
  </div>
</template>
