import { NAME_AVATAR_GROUP } from '../../constants/components';
import { PROP_TYPE_NUMBER_STRING, PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props';
import { normalizeSlotMixin } from '../../mixins/normalize-slot';
import { mathMin, mathMax } from '../../utils/math';
import { toFloat } from '../../utils/number';
import { makePropsConfigurable, makeProp } from '../../utils/props';
import { extend } from '../../vue';
import { computeSize } from './avatar';

// --- Props ---

const props = makePropsConfigurable({
  overlap: makeProp(PROP_TYPE_NUMBER_STRING, 0.3),
  // Child avatars will prefer this prop (if set) over their own
  rounded: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
  // Child avatars will always use this over their own size
  size: makeProp(PROP_TYPE_STRING),
  // Child avatars will prefer this prop (if set) over their own
  square: makeProp(PROP_TYPE_BOOLEAN, false),
  tag: makeProp(PROP_TYPE_STRING, 'div'),
  // Child avatars will prefer this variant over their own
  variant: makeProp(PROP_TYPE_STRING)
}, NAME_AVATAR_GROUP);

// --- Main component ---

// @vue/component
const BAvatarGroup = /*#__PURE__*/extend({
  name: NAME_AVATAR_GROUP,
  mixins: [normalizeSlotMixin],
  provide() {
    return {
      getBvAvatarGroup: () => this
    };
  },
  props,
  computed: {
    computedSize() {
      return computeSize(this.size);
    },
    overlapScale() {
      return mathMin(mathMax(toFloat(this.overlap, 0), 0), 1) / 2;
    },
    paddingStyle() {
      let value = this.computedSize;
      value = value ? `calc(${value} * ${this.overlapScale})` : null;
      return value ? {
        paddingLeft: value,
        paddingRight: value
      } : {};
    }
  },
  render(h) {
    const $inner = h('div', {
      staticClass: 'b-avatar-group-inner',
      style: this.paddingStyle
    }, this.normalizeSlot());
    return h(this.tag, {
      staticClass: 'b-avatar-group',
      attrs: {
        role: 'group'
      }
    }, [$inner]);
  }
});

export { BAvatarGroup, props };
