import * as React from 'react';
import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
import { Container } from './Elements/Container';
import { ContainerModel } from '../../Interfaces/ContainerModel';
import { Selector } from './Elements/Selector';

interface ISVGProps {
  width: number
  height: number
  children: ContainerModel | ContainerModel[] | null
  selected: ContainerModel | null
}

interface ISVGState {
  viewerWidth: number,
  viewerHeight: number,
}

export class SVG extends React.PureComponent<ISVGProps> {
  public static ID = 'svg';
  public state: ISVGState;

  constructor(props: ISVGProps) {
    super(props);
    this.state = {
      viewerWidth: window.innerWidth,
      viewerHeight: window.innerHeight
    };
  }

  resizeViewBox(): void {
    this.setState({
      viewerWidth: window.innerWidth,
      viewerHeight: window.innerHeight
    });
  }

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

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

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

    const properties = {
      width: this.props.width,
      height: this.props.height,
      xmlns
    };

    let children: React.ReactNode | React.ReactNode[] = [];
    if (Array.isArray(this.props.children)) {
      children = this.props.children.map(child => <Container key={`container-${child.properties.id}`} model={child}/>);
    } else if (this.props.children !== null) {
      children = <Container key={`container-${this.props.children.properties.id}`} model={this.props.children}/>;
    }

    return (
      <div id={SVG.ID}>
        <UncontrolledReactSVGPanZoom
          width={this.state.viewerWidth}
          height={this.state.viewerHeight}
          background={'#ffffff'}
          defaultTool='pan'
          miniatureProps={{
            position: 'left',
            background: '#616264',
            width: window.innerWidth - 12,
            height: 120
          }}
        >
          <svg {...properties}>
            { children }
            <Selector selected={this.props.selected} />
          </svg>
        </UncontrolledReactSVGPanZoom>
      </div>
    );
  };
}