import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import RulerWrapper from './RulerWrapper';

import './index.css';

export default class SketchRuler extends PureComponent {
  constructor(props) {
    super(props);
    const { fontColor, shadowColor, bgColor, fgColor, ratio } = props;
    this.canvasConfigs = {
      bgColor,
      fgColor,
      fontColor,
      shadowColor,
      ratio
    };
    this.state = {
      width: 600,
      height: 500
    };
  }
  handleLineChange = (arr, vertical, shouldPost) => {
    const { horLineArr, verLineArr, handleLine } = this.props;
    const newLines = vertical ? { h: horLineArr, v: [...arr] } : { h: [...arr], v: verLineArr };

    handleLine(newLines, shouldPost);
  };

  componentDidMount() {
    this.fixWidthAndHeight();
  }

  fixWidthAndHeight = () => {
    const { width, height } = this.ruler.getBoundingClientRect();
    this.setState({
      width: width - 18, // 18为标尺的粗细20px减去一头一尾2px
      height: height - 18
    });
  };

  render() {
    const { width, height } = this.state;
    const {
      scale,
      bgColor,
      thick,
      shadow,
      startX,
      startY,
      cornerActive,
      horLineArr,
      verLineArr,
      onCornerClick,
      handleShowLines
    } = this.props;

    const { x, y, width: w, height: h } = shadow;

    const commonProps = {
      scale,
      canvasConfigs: this.canvasConfigs,
      onLineChange: this.handleLineChange
    };
    return (
      <div id="mb-ruler" className="mb-ruler" ref={dom => (this.ruler = dom)}>
        {/* 水平方向 */}
        <RulerWrapper
          handleShowLines={handleShowLines}
          width={width}
          height={thick}
          start={startX}
          lines={horLineArr}
          selectStart={x}
          selectLength={w}
          {...commonProps}
        />
        {/* 竖直方向 */}
        <RulerWrapper
          handleShowLines={handleShowLines}
          width={thick}
          height={height}
          start={startY}
          lines={verLineArr}
          selectStart={y}
          selectLength={h}
          vertical
          {...commonProps}
        />
        <a className={`corner${cornerActive ? ' active' : ''}`} style={{ backgroundColor: bgColor }} onClick={onCornerClick}>
          <i className={`icon iconfont ${cornerActive ? 'icon-cankaoxianzhengyanbiyan-' : 'icon-cankaoxianzhengyanbiyan-1'}`} />
        </a>
      </div>
    );
  }
}
SketchRuler.propTypes = {
  scale: PropTypes.number,
  ratio: PropTypes.number,
  thick: PropTypes.number,
  bgColor: PropTypes.string,
  fgColor: PropTypes.string,
  fontColor: PropTypes.string,
  shadowColor: PropTypes.string,
  startX: PropTypes.number,
  startY: PropTypes.number,
  shadow: PropTypes.object,
  horLineArr: PropTypes.array,
  verLineArr: PropTypes.array,
  handleLine: PropTypes.func,
  cornerActive: PropTypes.bool,
  onCornerClick: PropTypes.func
};
SketchRuler.defaultProps = {
  thick: 20,
  bgColor: '#151620', // 背景颜色
  fgColor: '#404040', // 刻度颜色
  fontColor: '#BFBFBF', // 字体颜色
  shadowColor: '', // 阴影颜色
  horLineValue: [100, 200],
  verLineValue: [100, 200],
  scale: 1,
  startX: 0,
  startY: 0,
  ratio: window.devicePixelRatio || 1,
  shadow: {
    x: 200,
    y: 100,
    width: 200,
    height: 400
  }
};
