<template>
  <div :class="contentClasses" ac:if="pullStyle === 'ios'">
    <div :class="iconClasses"></div>
    <span>{{ text }}</span>
  </div>
  <material-pull-hook ac:else
    :state="state"
    :translate="translate"
    :type="type">
  </material-pull-hook>
</template>

<script>

const PullText = {
  'pull-down': {
    1: 'ui.pulldownrefresh.pull',
    2: 'ui.pulldownrefresh.release',
    3: 'ui.pulldownrefresh.refreshing',
    4: 'ui.pulldownrefresh.success',
    5: 'ui.pulldownrefresh.cancel'
  },
  'pull-up': {
    0: 'ui.pullupload.pull_load_more',
    1: 'ui.pullupload.pull',
    2: 'ui.pullupload.release',
    3: 'ui.pullupload.refreshing',
    4: 'ui.pullupload.success',
    5: 'ui.pullupload.cancel'
  }
}

const PullIcon = {
  'pull-down': {
    1: 'arrow down',
    2: 'arrow up',
    3: 'loading',
    4: 'none'
  },
  'pull-up': {
    1: 'arrow up',
    2: 'arrow down',
    3: 'loading',
    4: 'none'
  }
}

import MaterialPullHook from './material-pull-hook'

export default {
  props: {
    type: {
      type: String,
      default: 'pull-down'
    },
    state: {
      type: Number,
      default: 0
    },
    translate: {
      type: Number,
      default: 0
    },
    pullStyle: {
      type: String,
      default: 'ios'
    }
  },
  components: {
    MaterialPullHook
  },
  computed: {
    text () {
      return this.$t(PullText[this.type][this.state])
    },
    contentClasses () {
      return [this.type + '-content']
    },
    iconClasses () {
      return [
        this.type + '-icon',
        PullIcon[this.type][this.state]
      ]
    }
  }
}
</script>
