import { initDefaultProps } from '../../_util/props-util';
import { cloneElement } from '../../_util/vnode';
import warning from '../../_util/warning';
import BaseMixin from '../../_util/BaseMixin';
import { ITouchProps } from './PropTypes';

export default {
  name: 'TouchFeedback',
  mixins: [BaseMixin],
  props: initDefaultProps(ITouchProps, {
    disabled: false,
  }),
  data() {
    return {
      active: false,
    };
  },
  mounted() {
    this.$nextTick(() => {
      if (this.disabled && this.active) {
        this.setState({
          active: false,
        });
      }
    });
  },
  methods: {
    triggerEvent(type, isActive, ev) {
      // 暂时仅有input-number用到，事件直接到挂载到Touchable上，不需要像antd那样从子组件触发
      this.$emit(type, ev);
      if (isActive !== this.active) {
        this.setState({
          active: isActive,
        });
      }
    },
    onTouchStart(e) {
      this.triggerEvent('touchstart', true, e);
    },
    onTouchMove(e) {
      this.triggerEvent('touchmove', false, e);
    },
    onTouchEnd(e) {
      this.triggerEvent('touchend', false, e);
    },
    onTouchCancel(e) {
      this.triggerEvent('touchcancel', false, e);
    },
    onMouseDown(e) {
      // pc simulate mobile
      this.triggerEvent('mousedown', true, e);
    },
    onMouseUp(e) {
      this.triggerEvent('mouseup', false, e);
    },
    onMouseLeave(e) {
      this.triggerEvent('mouseleave', false, e);
    },
  },
  render() {
    const { disabled, activeClassName = '', activeStyle = {} } = this.$props;

    const child = this.$slots.default;
    if (child.length !== 1) {
      warning(false, 'm-feedback组件只能包含一个子元素');
      return null;
    }
    let childProps = {
      on: disabled
        ? {}
        : {
            touchstart: this.onTouchStart,
            touchmove: this.onTouchMove,
            touchend: this.onTouchEnd,
            touchcancel: this.onTouchCancel,
            mousedown: this.onMouseDown,
            mouseup: this.onMouseUp,
            mouseleave: this.onMouseLeave,
          },
    };

    if (!disabled && this.active) {
      childProps = {
        ...childProps,
        ...{
          style: activeStyle,
          class: activeClassName,
        },
      };
    }

    return cloneElement(child, childProps);
  },
};