import React from 'react';
import PropTypes from 'prop-types';
import polylabel from 'polylabel';
import areapolygon from 'area-polygon';
import _ from 'lodash';

const STYLE_TEXT = {
  textAnchor: 'middle',
  fontSize: '12px',
  fontFamily: '"Courier New", Courier, monospace',
  pointerEvents: 'none',
  fontWeight: 'bold',
  zIndex: 100,

  //http://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css
  WebkitTouchCallout: 'none', /* iOS Safari */
  WebkitUserSelect: 'none', /* Chrome/Safari/Opera */
  MozUserSelect: 'none', /* Firefox */
  MsUserSelect: 'none', /* Internet Explorer/Edge */
  userSelect: 'none'
};


export default function Area({ layer, area, catalog, fontSize }) {

  let rendered = catalog.getElement(area.type).render2D(area, layer);
  let center;


  let polygon = area.vertices.toArray().map(vertexID => {
    let { x, y } = layer.vertices.get(vertexID);
    return [x, y];
  });

  let polygonWithHoles = polygon;

  area.holes.forEach(holeID => {

    let polygonHole = layer.areas.get(holeID).vertices.toArray().map(vertexID => {
      let { x, y } = layer.vertices.get(vertexID);
      return [x, y];
    });

    polygonWithHoles = polygonWithHoles.concat(polygonHole.reverse());
  });

  center = polylabel([polygonWithHoles], 1.0);
  const renderAreaName = (
    <text x="0" y="0" transform={`translate(${center[0]} ${center[1]}) scale(1, -1)`} style={{ ...STYLE_TEXT, fontSize: fontSize + 'px' }}>
      {area.getIn(['properties', 'name'])}
    </text>
  );

  return (

    <g
      data-element-root
      data-prototype={area.prototype}
      data-id={area.id}
      data-selected={area.selected}
      data-layer={layer.id}
      data-name={area.properties.get('name')}
    >
      {rendered}
      {renderAreaName}

      );
    </g>
  )

}

Area.propTypes = {
  area: PropTypes.object.isRequired,
  layer: PropTypes.object.isRequired,
  catalog: PropTypes.object.isRequired,
};