import '../Selector.scss';
import * as React from 'react';
import { SYMBOL_MARGIN } from '../../../../utils/default';
import { type ISymbolModel } from '../../../../Interfaces/ISymbolModel';
import { Selector } from '../Selector/Selector';

interface ISelectorSymbolProps {
  symbols: Map<string, ISymbolModel>
  selected?: ISymbolModel
}

export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element {
  if (props.selected === undefined || props.selected === null) {
    return (
      <rect visibility={'hidden'}>
      </rect>
    );
  }

  let x, y: number;

  const scaledHeight = props.selected.height;
  const scaledWidth = props.selected.width;

  if (props.selected.isVertical) {
    x = -SYMBOL_MARGIN - props.selected.width;
    y = props.selected.offset;
  } else {
    x = props.selected.offset;
    y = -SYMBOL_MARGIN - props.selected.height;
  }

  return (
    <Selector
      text={props.selected.displayedText}
      x={x}
      y={y}
      width={scaledWidth}
      height={scaledHeight}
      scale={1}
    />
  );
}