import * as React from 'react';

interface IContainerProps {
  id: string,
  // eslint-disable-next-line no-use-before-define
  children: Container[],
  x: number,
  y: number,
  width: number,
  height: number,
  style?: React.CSSProperties,
  userData?: Record<string, string | number>
}

export class Container extends React.Component<IContainerProps> {
  componentWillUnMount() {
  }

  public render(): React.ReactNode {
    const containersElements = this.props.children.map(child => child.render());
    return (
      <g
        transform={`translate(${this.props.x}, ${this.props.y})`}
        key={`container-${this.props.id}`}
      >
        <rect
          width={this.props.width}
          height={this.props.height}
          style={this.props.style}
        >
        </rect>
        { containersElements }
      </g>
    );
  }
}