import React from 'react';

export default class SlicerViewer extends React.Component {
  state = {
    slice: 0
  };

  changeSlider = (event) => {
    this.setState({
      ...this.state,
      slice: parseInt(event.target.value)
    });
  };

  render() {
    const { slice } = this.state;
    const { layerIntersectionPoints, settings, layerShapes } = this.props;

    const numLayers = settings.dimensionsZ / settings.layerHeight;

    const intersectionPoints = layerIntersectionPoints[slice + 1];
    const shape = layerShapes[slice];

    return (
      <div>
        <svg viewBox={`-20 -20 ${settings.dimensionsX + 40} ${settings.dimensionsX + 40}`}>
          <rect
            width={settings.dimensionsX}
            height={settings.dimensionsY}
            fill="lightGrey"
          />
          {intersectionPoints.map(({ x, y }, i) => <circle key={i} cx={x} cy={y} r="0.3"/>)}
          {shape && shape.closedShapes.map((closedShape, i) => (
            <polygon
              key={i}
              points={closedShape.map(({ x, y }) => `${x} ${y}`).join(' ')}
              fill="rgba(255, 0, 0, 0.5)"
            />
          ))}
        </svg>
        <input onChange={this.changeSlider} value={slice} type="range" min="0" max={numLayers} />
      </div>
    );
  }
}