import * as React from 'react';
import { IContainerModel, getAbsolutePosition } from './ContainerModel';

interface ISelectorProps {
  selected: IContainerModel | null
}

export const Selector: React.FC<ISelectorProps> = (props) => {
  if (props.selected === undefined || props.selected === null) {
    return (
      <rect visibility={'hidden'}>
      </rect>
    );
  }

  const [x, y] = getAbsolutePosition(props.selected);
  const [width, height] = [
    props.selected.properties.width,
    props.selected.properties.height
  ];
  const style = {
    stroke: '#3B82F6', // tw blue-500
    strokeWidth: 4,
    fillOpacity: 0,
    transitionProperty: 'all',
    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
    transitionDuration: '150ms',
    animation: 'fadein 750ms ease-in alternate infinite'
  } as React.CSSProperties;

  return (
    <rect
      x={x}
      y={y}
      width={width}
      height={height}
      style={style}
    >
    </rect>
  );
};