import TyComponent from '../common/component'

TyComponent({
  source: true,
  externalClasses: ['custom-class'],
  relations: {
    '../ht-collapse-item/index': {
      type: 'descendant',
      linked(child) {
        this.children.push(child)
      },
      unlinked(child) {
        this.children = this.children.filter(function (item) { return item !== child })
      }
    }
  },

  properties: {
    value: {
      type: null,
      observer: 'updateExpanded'
    },
    accordion: {
      type: Boolean,
      observer: 'updateExpanded'
    },
    border: {
      type: Boolean,
      value: true
    }
  },

  created() {
    this.children = []
  },

  methods: {
    updateExpanded() {
      this.children.forEach(function (child) {
        child.updateExpanded()
      })
    },

    switch(name, expanded) {
      const {accordion, value} = this.data
      if (!accordion) {
        name = expanded
          ? (value || []).concat(name)
          : (value || []).filter(
            (activeName) => activeName !== name
          )
      } else {
        name = expanded ? name : ''
      }
      this.$emit('change', name)
      this.$emit('input', name)
    }
  }
})
