import React, {memo} from 'react';

export const ToolbarBlock = memo(({ block, onDragStart, scale = 1 }) => {
  const inputCount = block.inputs.length
  const outputCount = block.outputs.length
  let countForHeight = Math.max(inputCount, outputCount, 2)
  let blockHeight = (50 + (countForHeight - 1) * 34) / scale
  let blockWidth = 60 / scale
  if (['input', 'output', 'const', 'switch_type'].includes(block.type)) {
    countForHeight = Math.max(inputCount, outputCount)
    blockHeight = (40 + (countForHeight - 1) * 34) / scale
    blockWidth = blockHeight * 2
  }
  block.widthPrew = blockWidth
  block.heightPrew = blockHeight

  function getCoords(count) {
    const coords = []
    if (count === 1)
      coords.push(50)
    else if (count < countForHeight) {
      const step = blockHeight / (count + 1)
      for (let i = 0; i < count; i++) {
        const y = (i + 1) * step
        coords.push((y / blockHeight) * 100)
      }
    }
    else {
      const step = (blockHeight - (50 / scale)) / (count - 1)
      for (let i = 0; i < count; i++) {
        const y = 25 / scale + i * step
        coords.push((y / blockHeight) * 100)
      }
    }
    return coords
  }

  const inputsCoords = getCoords(inputCount)
  const outputsCoords = getCoords(outputCount)

  return (
    <div
      className = "toolbar-block"
      draggable
      onDragStart = {(e) => onDragStart(e, block)}
      style = {{
        width: `${blockWidth}px`,
        height: `${blockHeight}px`
      }}
    >
      <div className = "preview-title" style = {{ fontSize: `${13 / scale}px` }}>{block.label}</div>
      {inputsCoords.map((coord, ind) => (
        <div key = {`t-in-${ind}`}
          className = "preview-port"
          style = {{
            top: `${coord}%`,
            left: 0,
            backgroundColor: '#1717D8',
            transform: 'translate(-50%, -50%)'
          }}
        />
      ))}

      {outputsCoords.map((coord, ind) => (
        <div key = {`t-out-${ind}`}
          className = "preview-port"
          style = {{
            top: `${coord}%`,
            right: 0, 
            backgroundColor: '#D8000A',
            transform: 'translate(50%, -50%)'
          }}
        />
      ))}
    </div>
  );
})