import React from 'react';

const Rect = ({ y = 4, fill = 'white', stroke = '#b5b5b5' }) => (
  <rect y={y} width="8" height="8" fill={fill} stroke={stroke} style={{ fillOpacity: 0.3 }} />
);

const TwoZoneView = ({ accessZones }) => (
  <g>
    { accessZones.outside.color && <Rect fill={accessZones.outside.color} stroke={accessZones.outside.color} /> }
    { !accessZones.outside.color && <Rect /> }
    { accessZones.inside.color && <Rect y="15" fill={accessZones.inside.color} stroke={accessZones.inside.color} /> }
    { !accessZones.inside.color && <Rect y="15" /> }
  </g>
);

const OneZoneView = ({ accessZones }) => (
  <g>
    { accessZones.outside.color && <Rect fill={accessZones.outside.color} stroke={accessZones.outside.color} /> }
    { !accessZones.outside.color && <Rect /> }
  </g>
);

// a component can only have two componentAccessZones
export default function AccessZoneIcon(props) {
  const { componentAccessZones = {}, slots } = props;
  return (
    <g>
      { slots === 1 &&
        <OneZoneView accessZones={componentAccessZones} />
      }

      { slots === 2 &&
        <TwoZoneView accessZones={componentAccessZones} />
      }
    </g>
  );
}