import * as React from 'react';

interface IDimensionProps {
  id: string
  xStart: number
  xEnd: number
  y: number
  text: string
  strokeWidth: number
}

export class Dimension extends React.PureComponent<IDimensionProps> {
  public render(): JSX.Element {
    const style: React.CSSProperties = {
      stroke: 'black'
    };
    return (
      <g key={this.props.id}>
        <line
          x1={this.props.xStart}
          y1={this.props.y - 4 * this.props.strokeWidth}
          x2={this.props.xStart}
          y2={this.props.y + 4 * this.props.strokeWidth}
          strokeWidth={this.props.strokeWidth}
          style={style}
        />
        <line
          x1={this.props.xStart}
          y1={this.props.y}
          x2={this.props.xEnd}
          y2={this.props.y}
          strokeWidth={this.props.strokeWidth}
          style={style}
        />
        <line
          x1={this.props.xEnd}
          y1={this.props.y - 4 * this.props.strokeWidth}
          x2={this.props.xEnd}
          y2={this.props.y + 4 * this.props.strokeWidth}
          strokeWidth={this.props.strokeWidth}
          style={style}
        />
        <text
          x={(this.props.xStart + this.props.xEnd) / 2}
          y={this.props.y}
        >
          {this.props.text}
        </text>
      </g>
    );
  }
}