import React, {memo} from 'react';

const CENTER_X = 4;
const CENTER_Y = 0;

const ToolbarBlock = ({ type, label, inputCount, outputCount }) => {

  const blockHeight = 50 + (Math.max(inputCount, outputCount, 2) - 1) * 34;
  const blockWidth = blockHeight / 1.4;

  const renderBlock = () => {
    const textX = type === 'or' ? 32 : 24;
    const outputsCoord = [];
    const inputsCoord = [];

    if (inputCount === 1)
      inputsCoord.push(blockHeight / 2);
    else {
      const stepInput = (blockHeight - 50) / (inputCount - 1);
        for (let i = 0; i < inputCount; i++)
          inputsCoord.push(25 + i * stepInput);
    }

    if (outputCount === 1)
      outputsCoord.push(blockHeight / 2);
    else {
      const stepOutput = (blockHeight - 50) / (outputCount - 1);
      for (let i = 0; i < outputCount; i++)
        outputsCoord.push(25 + i * stepOutput);
    }

    return(
      <svg
        width={blockWidth + 2 * CENTER_X}
        height={blockHeight}
        viewBox={`0 0 ${blockWidth + 2 * CENTER_X} ${blockHeight}`}
        style={{ 
          overflow: 'visible',
          transform: `translate(${CENTER_X}px, ${CENTER_Y}px)`
        }}
      >
        <rect width = {blockWidth} height = {blockHeight} fill = "lightgray" stroke = "black"/>
        <text x = {textX} y = "20" textAnchor = "start" fontSize = "14" style = {{pointerEvents: 'none'}}>{label}</text>

        {//
        inputsCoord.map((coord, ind) => (
          <circle key = {`in-${ind + 1}`} cx = "0" cy = {coord} r = "4" fill = '#1717D8'/>
        ))}
        {outputsCoord.map((coord, ind) => (
          <circle key = {`out-${ind + 1}`} cx = {blockWidth} cy = {coord} r = "4" fill = '#D8000A'/>
        ))}
      </svg>
    );
  };

  return(renderBlock());
};

export default memo(ToolbarBlock);