import * as React from 'react';
import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
import { Container } from './Elements/Container';

interface ISVGProps {
  children: Container | Container[] | null,
}

interface ISVGState {
  viewBox: number[],
  value: Value,
  tool: Tool
}

export class SVG extends React.Component<ISVGProps> {
  public state: ISVGState;
  public svg: React.RefObject<SVGSVGElement>;

  constructor(props: ISVGProps) {
    super(props);
    this.state = {
      viewBox: [
        0,
        0,
        window.innerWidth,
        window.innerHeight
      ],
      value: {
        viewerWidth: window.innerWidth,
        viewerHeight: window.innerHeight
      } as Value,
      tool: TOOL_PAN
    };
    this.svg = React.createRef<SVGSVGElement>();
  }

  resizeViewBox() {
    this.setState({
      viewBox: [
        0,
        0,
        window.innerWidth,
        window.innerHeight
      ]
    });
  }

  componentDidMount() {
    window.addEventListener('resize', this.resizeViewBox.bind(this));
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeViewBox.bind(this));
  }

  render() {
    const xmlns = '<http://www.w3.org/2000/svg>';

    const properties = {
      viewBox: this.state.viewBox.join(' '),
      xmlns
    };

    let children: React.ReactNode | React.ReactNode[] = [];
    if (Array.isArray(this.props.children)) {
      children = this.props.children.map(child => child.render());
    } else if (this.props.children !== null) {
      children = this.props.children.render();
    }

    return (
      <ReactSVGPanZoom
        width={window.innerWidth}
        height={window.innerHeight}
        background={'#ffffff'}
        defaultTool='pan'
        value={this.state.value} onChangeValue={value => this.setState({ value })}
        tool={this.state.tool} onChangeTool={tool => this.setState({ tool })}
      >
        <svg ref={this.svg} {...properties}>
          { children }
        </svg>
      </ReactSVGPanZoom>
    );
  };
}