import { warn } from '../../utils'
import { idMixin, formStateMixin } from '../../mixins'
import bFormRow from '../layout/form-row'
import bFormText from '../form/form-text'
import bFormInvalidFeedback from '../form/form-invalid-feedback'
import bFormValidFeedback from '../form/form-valid-feedback'

export default {
  mixins: [idMixin, formStateMixin],
  components: { bFormRow, bFormText, bFormInvalidFeedback, bFormValidFeedback },
  render (h) {
    const t = this
    const $slots = t.$slots
    // Label
    let legend = h(false)
    if (t.label || $slots.label || t.horizontal) {
      const domProps = $slots.label ? {} : { innerHTML: t.label || '' }
      legend = h(
        'legend',
        { class: t.labelClasses, attrs: { id: t.labelId }, domProps: domProps },
        $slots.label
      )
    }
    // Invalid feeback text
    let invalidFeedback = h(false)
    if (t.invalidFeedback || t.feedback || $slots['invalid-feedback'] || $slots['feedback']) {
      let domProps = {}
      if (!$slots['invalid-feedback'] && !$slots['feedback']) {
        domProps = { innerHTML: t.invalidFeedback || t.feedback || '' }
      }
      invalidFeedback = h(
        'b-form-invalid-feedback',
        {
          directives: [
            {
              name: 'show',
              rawName: 'v-show',
              value: Boolean(t.invalidFeedback || t.feedback || $slots['invalid-feedback'] || $slots['feedback']),
              expression: "Boolean(t.invalidFeedback || t.feedback || $slots['invalid-feedback'] || $slots['feedback'])"
            }
          ],
          attrs: {
            id: t.invalidFeedbackId,
            role: 'alert',
            'aria-live': 'assertive',
            'aria-atomic': 'true'
          },
          domPRops: domProps
        },
        $slots['invalid-feedback'] || $slots['feedback']
      )
    }
    // Valid feeback text
    let validFeedback = h(false)
    if (t.validFeedback || $slots['valid-feedback']) {
      const domProps = $slots['valid-feedback'] ? {} : { innerHTML: t.validFeedback || '' }
      validFeedback = h(
        'b-form-valid-feedback',
        {
          directives: [
            {
              name: 'show',
              rawName: 'v-show',
              value: Boolean(t.validFeedback || $slots['valid-feedback']),
              expression: "Boolean(t.validFeedback || $slots['valid-feedback'])"
            }
          ],
          attrs: {
            id: t.validFeedbackId,
            role: 'alert',
            'aria-live': 'assertive',
            'aria-atomic': 'true'
          },
          domProps: domProps
        },
        $slots['valid-feedback']
      )
    }
    // Form help text (description)
    let description = h(false)
    if (t.description || $slots['description']) {
      const domProps = $slots['description'] ? {} : { innerHTML: t.description || '' }
      description = h(
        'b-form-text',
        { attrs: { id: t.descriptionId }, domProps: domProps },
        $slots['description']
      )
    }
    // Build layout
    const content = h(
      'div',
      { ref: 'content', class: t.inputLayoutClasses },
      [ $slots.default, invalidFeedback, validFeedback, description ]
    )
    // Generate fieldset wrapper
    return h(
      'fieldset',
      {
        class: t.groupClasses,
        attrs: { id: t.safeId(), 'aria-describedby': t.describedByIds }
      },
      [ h('b-form-row', {}, [ legend, content ]) ]
    )
  },
  props: {
    horizontal: {
      type: Boolean,
      default: false
    },
    labelCols: {
      type: Number,
      default: 3,
      validator (value) {
        if (value >= 1 && value <= 11) {
          return true
        }
        warn('b-form-group: label-cols must be a value between 1 and 11')
        return false
      }
    },
    breakpoint: {
      type: String,
      default: 'sm'
    },
    labelTextAlign: {
      type: String,
      default: null
    },
    label: {
      type: String,
      default: null
    },
    labelSize: {
      type: String,
      default: null
    },
    labelSrOnly: {
      type: Boolean,
      default: false
    },
    labelClass: {
      type: [String, Array],
      default: null
    },
    description: {
      type: String,
      default: null
    },
    invalidFeedback: {
      type: String,
      default: null
    },
    feedback: {
      // Deprecated in favor of invalid-feedback
      type: String,
      default: null
    },
    validFeedback: {
      type: String,
      default: null
    },
    validated: {
      type: Boolean,
      value: false
    }
  },
  computed: {
    inputState () {
      return this.stateClass
    },
    groupClasses () {
      return [
        'b-form-group',
        'form-group',
        this.validated ? 'was-validated' : null,
        this.inputState
      ]
    },
    labelClasses () {
      return [
        this.labelSrOnly ? 'sr-only' : (this.labelSize ? 'col-form-label' : 'col-form-legend'),
        this.labelLayout,
        this.labelAlignClass,
        this.labelSizeClass,
        this.labelClass
      ]
    },
    labelLayout () {
      if (this.labelSrOnly) {
        return null
      }
      return this.horizontal ? `col-${this.breakpoint}-${this.labelCols}` : 'col-12'
    },
    labelAlignClass () {
      if (this.labelSrOnly) {
        return null
      }
      return this.labelTextAlign ? `text-${this.labelTextAlign}` : null
    },
    labelSizeClass () {
      if (this.labelSrOnly) {
        return null
      }
      return this.labelSize ? `col-form-label-${this.labelSize}` : null
    },
    inputLayoutClasses () {
      return [
        this.horizontal ? `col-${this.breakpoint}-${12 - this.labelCols}` : 'col-12'
      ]
    },
    labelId () {
      return (this.label || this.$slots['label']) ? this.safeId('_BV_label_') : null
    },
    descriptionId () {
      if (this.description || this.$slots['description']) {
        return this.safeId('_BV_description_')
      }
      return null
    },
    invalidFeedbackId () {
      if (this.invalidFeedback || this.feedback || this.$slots['invalid-feedback'] || this.$slots['feedback']) {
        return this.safeId('_BV_feedback_invalid_')
      }
      return null
    },
    validFeedbackId () {
      if (this.validFeedback || this.$slots['valid-feedback']) {
        return this.safeId('_BV_feedback_valid_')
      }
      return null
    },
    describedByIds () {
      return [
        this.labelId,
        this.descriptionId,
        this.computedState === false ? this.invalidFeedbackId : null,
        this.computedState === true ? this.validFeedbackId : null
      ].filter(i => i).join(' ') || null
    }
  }
}

@@ -1207,370 +1207,8 @@
   %7B%0A
-          directives: %5B%0A            %7B%0A              name: 'show',%0A              rawName: 'v-show',%0A              value: Boolean(t.invalidFeedback %7C%7C t.feedback %7C%7C $slots%5B'invalid-feedback'%5D %7C%7C $slots%5B'feedback'%5D),%0A              expression: %22Boolean(t.invalidFeedback %7C%7C t.feedback %7C%7C $slots%5B'invalid-feedback'%5D %7C%7C $slots%5B'feedback'%5D)%22%0A            %7D%0A          %5D,%0A
     
@@ -1214,32 +1214,32 @@
        attrs: %7B%0A
+
             id: 
@@ -1385,17 +1385,17 @@
     domP
-R
+r
 ops: dom
@@ -1738,32 +1738,32 @@
 alid-feedback',%0A
+
         %7B%0A      
@@ -1760,290 +1760,8 @@
   %7B%0A
-          directives: %5B%0A            %7B%0A              name: 'show',%0A              rawName: 'v-show',%0A              value: Boolean(t.validFeedback %7C%7C $slots%5B'valid-feedback'%5D),%0A              expression: %22Boolean(t.validFeedback %7C%7C $slots%5B'valid-feedback'%5D)%22%0A            %7D%0A          %5D,%0A
     

Update _form-group.js