import PropTypes from '../../_util/vue-types';
import { initDefaultProps } from '../../_util/props-util';
import enhancer from './enhancer';
import { propTypes, defaultProps } from './types';

const circlePropTypes = {
  ...propTypes,
  gapPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
  gapDegree: PropTypes.number,
};

const circleDefaultProps = {
  ...defaultProps,
  gapPosition: 'top',
};

const Circle = {
  props: initDefaultProps(circlePropTypes, circleDefaultProps),
  methods: {
    getPathStyles() {
      const { percent, strokeWidth, strokeColor, gapDegree = 0, gapPosition } = this.$props;
      const radius = 50 - strokeWidth / 2;
      let beginPositionX = 0;
      let beginPositionY = -radius;
      let endPositionX = 0;
      let endPositionY = -2 * radius;
      switch (gapPosition) {
        case 'left':
          beginPositionX = -radius;
          beginPositionY = 0;
          endPositionX = 2 * radius;
          endPositionY = 0;
          break;
        case 'right':
          beginPositionX = radius;
          beginPositionY = 0;
          endPositionX = -2 * radius;
          endPositionY = 0;
          break;
        case 'bottom':
          beginPositionY = radius;
          endPositionY = 2 * radius;
          break;
        default:
      }
      const pathString = `M 50,50 m ${beginPositionX},${beginPositionY}
       a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY}
       a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
      const len = Math.PI * 2 * radius;
      const trailPathStyle = {
        strokeDasharray: `${len - gapDegree}px ${len}px`,
        strokeDashoffset: `-${gapDegree / 2}px`,
        transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s',
      };
      const strokePathStyle = {
        stroke: strokeColor,
        strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${len}px`,
        strokeDashoffset: `-${gapDegree / 2}px`,
        transition:
          'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s', // eslint-disable-line
      };
      return { pathString, trailPathStyle, strokePathStyle };
    },
  },
  render() {
    const {
      prefixCls,
      strokeWidth,
      trailWidth,
      trailColor,
      strokeLinecap,
      percent,
      ...restProps
    } = this.$props;
    const { pathString, trailPathStyle, strokePathStyle } = this.getPathStyles();
    delete restProps.percent;
    delete restProps.gapDegree;
    delete restProps.gapPosition;
    delete restProps.strokeColor;
    const pathFirst = {
      attrs: {
        d: pathString,
        stroke: trailColor,
        'stroke-linecap': strokeLinecap,
        'stroke-width': trailWidth || strokeWidth,
        'fill-opacity': '0',
      },
      class: `${prefixCls}-circle-trail`,
      style: trailPathStyle,
    };
    const pathSecond = {
      attrs: {
        d: pathString,
        'stroke-linecap': strokeLinecap,
        'stroke-width': percent === 0 ? 0 : strokeWidth,
        'fill-opacity': '0',
      },
      class: `${prefixCls}-circle-path`,
      style: strokePathStyle,
      ref: 'svgPathRef',
    };
    return (
      <svg class={`${prefixCls}-circle`} viewBox="0 0 100 100" {...restProps}>
        <path {...pathFirst} />
        <path {...pathSecond} />
      </svg>
    );
  },
};

export default enhancer(Circle);