import TyComponent from '../common/component'

const nextTick = () => new Promise(resolve => setTimeout(resolve, 20))

TyComponent({
  source: true,
  externalClasses: ['title-class', 'content-class', 'custom-class'],

  relations: {
    '../ht-collapse/index': {
      type: 'ancestor',
      linked(parent) {
        this.parent = parent
      }
    }
  },

  properties: {
    name: null,
    title: null,
    value: null,
    icon: String,
    label: String,
    disabled: Boolean,
    clickable: Boolean,
    border: {
      type: Boolean,
      value: true
    },
    isLink: {
      type: Boolean,
      value: true
    }
  },

  data: {
    contentHeight: 0,
    expanded: false,
    transition: false
  },

  ready() {
    this.updateExpanded()
      .then(nextTick)
      .then(() => {
        const data = {transition: true}

        if (this.data.expanded) {
          data.contentHeight = 'auto'
        }

        this.setData(data)
      })
  },

  methods: {
    updateExpanded() {
      if (!this.parent) {
        return Promise.resolve()
      }

      const {value, accordion} = this.parent.data
      const {children = []} = this.parent
      const {name} = this.data

      const index = children.indexOf(this)
      const currentName = name == null ? index : name

      const expanded = accordion
        ? value === currentName
        : (value || []).some((name) => name === currentName)

      const stack = []

      if (expanded !== this.data.expanded) {
        stack.push(this.updateStyle(expanded))
      }

      stack.push(this.set({index, expanded}))

      return Promise.all(stack)
    },

    updateStyle(expanded) {
      return this.getRect('.ht-collapse-item__content')
        .then((rect) => rect.height)
        .then((height) => {
          if (expanded) {
            return this.set({
              contentHeight: height ? `${height}px` : 'auto'
            })
          }

          return this.set({contentHeight: `${height}px`})
            .then(nextTick)
            .then(() => this.set({contentHeight: 0}))
        })
    },

    onClick() {
      if (this.data.disabled) {
        return
      }

      const {name, expanded} = this.data
      const index = this.parent.children.indexOf(this)
      const currentName = name == null ? index : name

      this.parent.switch(currentName, !expanded)
    },

    onTransitionEnd() {
      if (this.data.expanded) {
        this.setData({
          contentHeight: 'auto'
        })
      }
    }
  }
})
