import uniqueId from 'lodash/uniqueId';
import isBoolean from 'lodash/isBoolean';
import omit from 'lodash/omit';
import pick from 'lodash/pick';
import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equal';
import { formOptionsMixin } from '../../../../vendor/bootstrap-vue/src/mixins/form-options';
import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
import GlFormCheckbox from './form_checkbox';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

// Attributes to pass down to checks/radios instead of applying them to the group
const PASS_DOWN_ATTRS = ['aria-describedby', 'aria-labelledby'];
var script = {
  name: 'GlFormCheckboxGroup',
  components: {
    GlFormCheckbox
  },
  directives: {
    SafeHtml: SafeHtmlDirective
  },
  mixins: [formOptionsMixin],
  provide() {
    return {
      getGroup: () => this
    };
  },
  inheritAttrs: false,
  model: {
    prop: 'checked',
    event: 'input'
  },
  props: {
    /**
     * Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed.
     */
    id: {
      type: String,
      required: false,
      default: undefined
    },
    /**
     * The current value of the checkbox.
     */
    checked: {
      type: Array,
      required: false,
      default: () => []
    },
    /**
     * Array of items to render in the component
     */
    options: {
      type: Array,
      required: false,
      default: () => []
    },
    /**
     * When set to `true`, disables the component's functionality and places it in a disabled state.
     */
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    /**
     * Sets the value of the `name` attribute on the form control.
     */
    name: {
      type: String,
      required: false,
      default: undefined
    },
    /**
     * Adds the `required` attribute to the form control.
     */
    required: {
      type: Boolean,
      required: false,
      default: false
    },
    /**
     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state.
     */
    state: {
      type: Boolean,
      required: false,
      default: null
    },
    /**
     * Optional value to set for the 'aria-invalid' attribute. Supported values are 'true' and 'false'. If not set, the 'state' prop will dictate the value
     */
    ariaInvalid: {
      type: [Boolean, String],
      required: false,
      default: false
    }
  },
  data() {
    return {
      internalId: this.id ? this.id : uniqueId('gitlab_ui_checkbox_group_'),
      localChecked: this.checked
    };
  },
  computed: {
    computedState() {
      return isBoolean(this.state) ? this.state : null;
    },
    stateClass() {
      if (this.computedState === true) return 'is-valid';
      if (this.computedState === false) return 'is-invalid';
      return null;
    },
    computedAriaInvalid() {
      const {
        ariaInvalid
      } = this;
      if (ariaInvalid === true || ariaInvalid === 'true' || ariaInvalid === '') {
        return 'true';
      }
      return this.computedState === false ? 'true' : ariaInvalid;
    },
    computedAttrs() {
      return {
        ...omit(this.$attrs, PASS_DOWN_ATTRS),
        id: this.internalId,
        'aria-invalid': this.computedAriaInvalid,
        'aria-required': this.required || null
      };
    },
    passDownAttrs() {
      return pick(this.$attrs, PASS_DOWN_ATTRS);
    },
    groupName() {
      // Checks/Radios tied to the same model must have the same name,
      // especially for ARIA accessibility
      return this.name || this.internalId;
    }
  },
  watch: {
    checked(newValue) {
      if (!looseEqual(newValue, this.localChecked)) {
        this.localChecked = newValue;
      }
    },
    localChecked(newValue, oldValue) {
      if (!looseEqual(newValue, oldValue)) {
        this.$emit('input', newValue);
      }
    }
  }
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._b({staticClass:"gl-form-checkbox-group gl-outline-none",attrs:{"role":"group","tabindex":"-1"}},'div',_vm.computedAttrs,false),[_vm._t("first"),_vm._v(" "),_vm._l((_vm.formOptions),function(option,idx){return _c('gl-form-checkbox',_vm._b({key:idx,attrs:{"value":option.value,"disabled":option.disabled}},'gl-form-checkbox',_vm.passDownAttrs,false),[(option.html)?_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(option.html),expression:"option.html"}]}):_c('span',[_vm._v(_vm._s(option.text))])])}),_vm._v(" "),_vm._t("default")],2)};
var __vue_staticRenderFns__ = [];

  /* style */
  const __vue_inject_styles__ = undefined;
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

export { __vue_component__ as default };
