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
}

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

  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={window.innerWidth}
          height={window.innerHeight}
          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>
    );
  };
}