import { forwardRef } from 'react';
import { Resource } from '../types';
import { Node2D } from '../ui/graph';
import { ResourceDescriptions } from '../ui/resource';
import { Game } from '../engine/game';

interface Props {
  game: Game;
  node2d: Node2D;
  selected: boolean;
  onSelect: () => void;
  onSocketRef?: (type: 'input' | 'output', index: number, el: HTMLDivElement | null) => void;
}

const NodeCard = forwardRef<HTMLDivElement, Props>(function NodeCard({ node2d, selected, onSelect, onSocketRef }, ref) {
  const node = node2d.node;
  function handleClick() {
    onSelect();
  }

  const info = node.behaviour.getDisplayInfo();
  const inputSockets = info.sockets.filter((s) => s.type === 'input');
  const outputSockets = info.sockets.filter((s) => s.type === 'output');

  return (
    <div
      ref={ref}
      className={`node node--${node.behaviour.kind}${selected ? ' is-selected' : ''}`}
      style={{ left: node2d.position.x, top: node2d.position.y }}
      onClick={handleClick}
    >
      <div className="node__sockets node__sockets--input">
        {
          inputSockets.map((socket) => (
            <div
              key={`input.${socket.index}`}
              ref={(el) => onSocketRef?.('input', socket.index, el)}
              className="node__socket"
              style={{ background: ResourceDescriptions[socket.resource].color }}
              title={`${ResourceDescriptions[socket.resource].label} (вход)`}
            />
          ))
        }
      </div>
      <div className="node__sockets node__sockets--output">
        {
          outputSockets.map((socket) => (
            <div
              key={`output.${socket.index}`}
              ref={(el) => onSocketRef?.('output', socket.index, el)}
              className="node__socket"
              style={{ background: ResourceDescriptions[socket.resource].color }}
              title={`${ResourceDescriptions[socket.resource].label} (выход)`}
            />
          ))
        }
      </div>
      <div className="node__id">#{node.id}</div>
      <div className="node__title">{node.name}</div>
      <div className="node__kind">{node.behaviour.kind}</div>
      {
        Object.entries(info.storages).map(([name, storage]) => (
          <div className="node__resources" key={name}>
            <div>{name}</div>
            {
              Object.entries(storage)
                .map(([rt, v]) => `${ResourceDescriptions[rt as Resource].icon}${v.toStringWithDecimalPlaces(4)}`).join(' ')
            }
          </div>
        ))
      }
      <div className="node__links">
        {
          info.links.map((link) => <div key={`${link.target}/${link.resource}`}>→{link.target}/{link.resource}</div>)
        }
      </div>
      <div className="node__debug" style={{fontSize: '8px', whiteSpace: 'pre'}}>{JSON.stringify(info.raw, undefined, 4)}</div>
    </div>
  );
});

export default NodeCard;