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

const Line = {
  props: initDefaultProps(propTypes, defaultProps),
  render() {
    const {
      percent,
      prefixCls,
      strokeColor,
      strokeLinecap,
      strokeWidth,
      trailColor,
      trailWidth,
      ...restProps
    } = this.$props;

    delete restProps.gapPosition;

    const pathStyle = {
      strokeDasharray: '100px, 100px',
      strokeDashoffset: `${100 - percent}px`,
      transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s linear',
    };

    const center = strokeWidth / 2;
    const right = 100 - strokeWidth / 2;
    const pathString = `M ${strokeLinecap === 'round' ? center : 0},${center}
           L ${strokeLinecap === 'round' ? right : 100},${center}`;
    const viewBoxString = `0 0 100 ${strokeWidth}`;

    const pathFirst = {
      attrs: {
        d: pathString,
        'stroke-linecap': strokeLinecap,
        stroke: trailColor,
        'stroke-width': trailWidth || strokeWidth,
        'fill-opacity': '0',
      },
      class: `${prefixCls}-line-trail`,
    };
    const pathSecond = {
      attrs: {
        d: pathString,
        'stroke-linecap': strokeLinecap,
        stroke: strokeColor,
        'stroke-width': strokeWidth,
        'fill-opacity': '0',
      },
      class: `${prefixCls}-line-path`,
      style: pathStyle,
      ref: 'svgPathRef',
    };
    return (
      <svg
        class={`${prefixCls}-line`}
        viewBox={viewBoxString}
        preserveAspectRatio="none"
        {...restProps}
      >
        <path {...pathFirst} />
        <path {...pathSecond} />
      </svg>
    );
  },
};

export default enhancer(Line);