<template>
    <div class="ion-searchbar searchbar"
         :class="[
         modeClass,colorClass,
         {'searchbar-has-focus': sbHasFocus},
         {'searchbar-has-value':theValue},
         {'searchbar-animated':shouldAnimated},
         {'searchbar-active':sbHasFocus},
         {'searchbar-show-cancel':showCancelButton},
         {'searchbar-left-aligned':shouldAlignLeft}
         ]">
        <div class="searchbar-input-container" @touchstart="setFocus">
            <!--在md模式下，md的取消按钮是在这里的，当点击inputs输入时，返回按钮将覆盖search按钮-->
            <vm-button mode="md"
                       @click="cancelSearchbar($event)"
                       clear
                       color="dark"
                       class="searchbar-md-cancel"
                       role="button">
                <Icon mode="md" name="md-arrow-back"></Icon>
            </vm-button>

            <!--input左边的search按钮-->
            <div ref="searchbarIcon" class="searchbar-search-icon"></div>
            <input ref="searchbarInput" class="searchbar-input" id="searchbarInput"
                   @input="onInputHandler($event)"
                   @blur="onBlurHandler($event)"
                   @focus="onFocusHandler($event)"
                   :value="theValue"
                   :placeholder="placeholder"
                   :type="type"
                   :autocomplete="autocompleteValue"
                   :autocorrect="autocorrectValue"
                   :spellcheck="spellcheckValue">
            <!--input右边的关闭按钮-->
            <vm-button clear
                       class="searchbar-clear-icon"
                       :mode="mode"
                       @click="clearInput($event)"
                       role="button"></vm-button>
        </div>

        <!--取消按钮，点击input时出现，只对IOS，md在search icon位置显示，wp没有-->
        <vm-button ref="cancelButton"
                   mode="ios"
                   clear
                   @click="cancelSearchbar($event)"
                   class="searchbar-ios-cancel"
                   role="button">
            <span>{{cancelButtonText}}</span>
        </vm-button>
    </div>
</template>
<style lang="scss" src="./style.scss"></style>
<script type="text/javascript">
  /**
   * @component Searchbar
   * @description
   * 搜索条
   *
   * ## 表单组件 / SearchBar搜索条组件
   *
   * 搜索组件, 一般是放在Header组件的Toolbar组件中, 当然也可以放置在任何位置
   *
   *
   * ### 如何引入
   * ```
   * // 引入
   * import { Searchbar } from 'vimo'
   * // 安装
   * Vue.component(Searchbar.name, Searchbar)
   * // 或者
   * export default{
   *   components: {
   *    Searchbar
   *  }
   * }
   * ```
   *
   * @props {String} [color]                        - 颜色
   * @props {String} [mode='ios']                   - 模式
   * @props {String} [cancelButtonText='Cancel']    - 取消按钮的文本
   * @props {Boolean} [showCancelButton=false]      - 是否显示cancelButton(只在focus状态才显示cancelBtn, 且cancelBtn只对组件作用, 如果要赋予业务能力, 请在右侧自己实现cancelBtn)
   * @props {Number} [debounce=0]                   - 等待多久触发onInput事件
   * @props {String} [placeholder='Search']         - 设置placeholder的值.
   * @props {String} [autocomplete]                 - 自动完成
   * @props {String} [autocorrect]                  - 自动纠错
   * @props {String|Boolean} [autofocus]            - 如果是boolean类型, 则立即判断, 如果是Number, 则等待dom完毕定时后自动focus
   * @props {Boolean} [spellcheck]                  - 拼写检查
   * @props {String} [type='search']                - 设置input配型, 可以是: "text", "password", "email", "number", "search", "tel", "url".
   * @props {Boolean} [animated=false]              - 是否启动点击动画
   *
   *
   * @fires component:Searchbar#onInput
   * @fires component:Searchbar#onFocus
   * @fires component:Searchbar#onBlur
   * @fires component:Searchbar#onClear
   * @fires component:Searchbar#onCancel
   *
   *
   * @demo #/searchbar
   *
   * @usage
   * <template>
   *    <Page>
   *    <Header>
   *        <Navbar>
   *            <Title>Searchbar</Title>
   *        </Navbar>
   *        <Toolbar>
   *            <Searchbar :animated="true"
   *                placeholder="Search"
   *                :debounce="0"
   *                v-model="myInput"
   *                :showCancelButton="true"
   *                cancelButtonText="取消"
   *                @onInput="onInput"
   *                @onFocus="onFocus"
   *                @onBlur="onBlur"
   *                @onCancel="onCancel"
   *                @onClear="onClear"></Searchbar>
   *         </Toolbar>
   *     </Header>
   *    <Content padding>
   *        <p>Search debounce: 100</p>
   *        <p>Search Value: {{myInput}}</p>
   *    </Content>
   *    </Page>
   * </template>
   * */
  import Button from '../button'
  import Icon from '../icon'
  import { isNumber, isBoolean } from '../../util/type'

  // TODO: use padding-left to  animate is not prefect , hah
  export default {
    name: 'Searchbar',
    data () {
      return {
        isCancelVisible: false,
        sbHasFocus: false,
        shouldAlignLeft: true,
        shouldBlur: true,
        shouldAnimated: false,

        // 三个元素的id的document实例
        searchbarIconElement: '',
        searchbarInputElement: '',
        cancelButtonElement: '',

        // 外部的value映射
        theValue: this.value,
        timer: '',

        placeHolderTextWidth: null // number eg: 44

      }
    },
    props: {
      /**
       * The predefined color to use. For example: "primary", "secondary", "danger".
       * */
      color: String,
      /**
       * The mode to apply to this component. Mode can be ios, wp, or md.
       * */
      mode: {
        type: String,
        default () { return this.$config && this.$config.get('mode') || 'ios' }
      },
      /**
       * Set the the cancel button text. Default: "Cancel".
       * */
      cancelButtonText: {
        type: String,
        default: 'Cancel'
      },
      /**
       * Whether to show the cancel button or not. Default: "false".
       * */
      showCancelButton: [Boolean],
      /**
       * How long, in milliseconds, to wait to trigger the onInput event after each keystroke. Default 250.
       * */
      debounce: {
        type: Number,
        default: 0
      },
      /**
       * Set the input's placeholder. Default "Search".
       * */
      placeholder: {
        type: String,
        default: 'Search'
      },
      /**
       * Set the input's autocomplete property. Values: "on", "off". Default "off".
       * */
      autocomplete: {
        type: String,
        default: 'off'
      },
      /**
       * Set the input's autocorrect property. Values: "on", "off". Default "off".
       * */
      autocorrect: {
        type: String,
        default: 'off'
      },

      autofocus: [Boolean, Number],
      /**
       * Set the input's spellcheck property. Values: true, false. Default false.
       * */
      spellcheck: {
        type: [String, Boolean],
        default: false
      },
      /**
       * Set the type of the input. Values: "text", "password", "email", "number", "search", "tel", "url". Default "search".
       * */
      type: {
        type: String,
        default: 'search'
      },
      /**
       * Configures if the searchbar is animated or no. By default, animation is false.
       * */
      animated: {
        type: Boolean,
        default: false
      },
      /**
       * Set the input value.
       * */
      value: String
    },
    watch: {
      value (val) {
        this.theValue = val
        this.positionElements()
      }
    },
    computed: {
      // props处理
      autocompleteValue () {
        return (this.autocomplete === '' || this.autocomplete === 'on') ? 'on' : 'off'
      },
      autocorrectValue () {
        return (this.autocorrect === '' || this.autocorrect === 'on') ? 'on' : 'off'
      },
      spellcheckValue () {
        return this.spellcheck === '' || this.spellcheck === 'true' || this.spellcheck === true
      },
      // class处理
      modeClass () {
        return this.mode ? `searchbar-${this.mode}` : ''
      },
      colorClass () {
        return this.color ? `searchbar-${this.mode}-${this.color}` : ''
      }
    },
    methods: {

      // -------- public --------
      /**
       * @function setFocus
       * @description
       * 手动设置当前input的focus状态
       */
      setFocus () {
        this.searchbarInputElement.focus()
      },

      // -------- private --------
      /**
       * Update the Searchbar input value when the input changes
       * @private
       */
      onInputHandler ($event) {
        let _valueInner = $event.target ? $event.target.value : ''
        if (_valueInner) {
          this.theValue = _valueInner
        } else {
          this.theValue = null
        }

        if (this.debounce > 16) {
          window.clearTimeout(this.timer)
          this.timer = window.setTimeout(() => {
            // 通知父组件的v-model
            this.$emit('input', this.theValue)

            this.$emit('onInput', $event)
          }, this.debounce)
        } else {
          /**
           * @event component:Searchbar#onInput
           * @description input事件
           * @property {object} $event - 事件对象
           */
          this.$emit('input', this.theValue)
          this.$emit('onInput', $event)
        }
      },

      /**
       * Sets the Searchbar to focused and active on input focus.
       * @private
       */
      onFocusHandler ($event) {
        /**
         * @event component:Searchbar#onFocus
         * @description focus事件
         * @property {object} $event - 事件对象
         */
        this.$emit('onFocus', $event)
        this.sbHasFocus = true
        this.positionElements()
      },

      /**
       * Sets the Searchbar to not focused and checks if it should align left
       * based on whether there is a value in the searchbar or not.
       * @private
       */
      onBlurHandler ($event) {
        // shouldBlur: 是否真正的blur, 因为当点击clearBtn时, 需要再次focus, 所以等到16*4ms后, 判断是否blue
        // shouldBlur determines if it should blur
        // if we are clearing the input we still want to stay focused in the input
        // wait for DOM update, because of focus method
        window.setTimeout(() => {
          if (!this.shouldBlur) {
            this.sbHasFocus = true
            this.searchbarInputElement.focus()
          } else {
            /**
             * @event component:Searchbar#onBlur
             * @description blur事件
             * @property {object} $event - 事件对象
             */
            this.$emit('onBlur', $event)
            this.sbHasFocus = false
            this.positionElements()
          }
          this.shouldBlur = true
        }, 16 * 4)
      },
      /**
       * Clears the input field and triggers the control change.
       * @private
       */
      clearInput ($event) {
        this.searchbarInputElement.focus()
        /**
         * @event component:Searchbar#onClear
         * @description clear事件
         * @property {object} $event - 事件对象
         */
        this.$emit('onClear', $event)
        this.shouldBlur = false
        if (this.theValue) {
          this.theValue = null
          this.$emit('input', this.theValue)
          this.$emit('onInput', $event)
        }
      },
      /**
       * Clears the input field and tells the input to blur since
       * the clearInput function doesn't want the input to blur
       * then calls the custom cancel function if the user passed one in.
       * @private
       */
      cancelSearchbar ($event) {
        /**
         * @event component:Searchbar#onCancel
         * @description cancel事件
         * @property {object} $event - 事件对象
         */
        this.$emit('onCancel', $event)
        if (this.theValue) {
          this.theValue = null
          this.$emit('input', this.theValue)
          this.$emit('onInput', $event)
        }
        this.shouldBlur = true
      },

      /**
       * 当focus时, 设置搜索框的icon/placeholder/cancel button的位置 (ios only)
       * @private
       */
      positionElements () {
        let isAnimated = this.animated
        let prevAlignLeft = this.shouldAlignLeft
        let shouldAlignLeft = (!isAnimated || (this.theValue && this.theValue.toString().trim() !== '') || this.sbHasFocus === true)
        this.shouldAlignLeft = shouldAlignLeft

        if (this.mode !== 'ios') {
          return
        }

        if (prevAlignLeft !== shouldAlignLeft) {
          this.positionPlaceholder()
        }
        if (isAnimated) {
          this.positionCancelButton()
        }
        this.shouldAnimated = this.animated
      },

      positionPlaceholder () {
        let inputEle = this.searchbarInputElement
        let iconEle = this.searchbarIconElement
        console.assert(inputEle, 'The input element is undefined, please check!::<Function>positionPlaceholder():inputEle')
        console.assert(iconEle, 'The icon element is undefined, please check!::<Function>positionPlaceholder():iconEle')
        if (!inputEle || !iconEle) {
          return
        }

        if (this.shouldAlignLeft) {
          inputEle.removeAttribute('style')
          iconEle.removeAttribute('style')
        } else {
          if (this.sbHasFocus) {
            this.searchbarInputElement.blur()
          }

          if (this.placeHolderTextWidth === null) {
            // Create a dummy span to get the placeholder width
            if (!this.placeholder) {
              this.placeHolderTextWidth = 0
            } else {
              let tempSpan = document.createElement('span')
              tempSpan.innerHTML = this.placeholder
              tempSpan.style.fontSize = window.getComputedStyle(inputEle).fontSize
              tempSpan.style.display = 'inline'
              document.body.appendChild(tempSpan)

              // Get the width of the span then remove it
              this.placeHolderTextWidth = tempSpan.offsetWidth
              tempSpan.remove()
            }
          }

          // Set the input padding left
          let inputLeft = 'calc(50% - ' + (this.placeHolderTextWidth / 2) + 'px)'
          inputEle.style.paddingLeft = inputLeft

          let paddingLeft = this.placeHolderTextWidth === 0 ? 14 : 30
          // Set the icon margin left
          let iconLeft = 'calc(50% - ' + ((this.placeHolderTextWidth / 2) + paddingLeft) + 'px)'
          iconEle.style.marginLeft = iconLeft
        }
      },

      /**
       * Show the iOS Cancel button on focus, hide it offscreen otherwise
       * @private
       */
      positionCancelButton () {
        if (!this.cancelButtonElement) {
          return
        }
        let showShowCancel = this.sbHasFocus
        if (showShowCancel !== this.isCancelVisible) {
          let cancelStyleEle = this.cancelButtonElement
          let cancelStyle = cancelStyleEle.style
          this.isCancelVisible = showShowCancel
          if (showShowCancel) {
            cancelStyle.marginRight = '0'
          } else {
            let offset = cancelStyleEle.offsetWidth
            if (offset > 0) {
              cancelStyle.marginRight = -offset + 'px'
            }
          }
        }
      }
    },
    mounted () {
      this.searchbarIconElement = this.$refs.searchbarIcon
      this.searchbarInputElement = this.$refs.searchbarInput
      this.cancelButtonElement = this.$refs.cancelButton.$el
      this.positionElements()

      if (isBoolean(this.autofocus) && this.autofocus) {
        this.setFocus()
      }

      if (isNumber(this.autofocus) && this.autofocus > 0) {
        window.setTimeout(() => {
          this.setFocus()
        }, this.autofocus)
      }
    },
    components: {
      'vm-button': Button, Icon
    }
  }
</script>
