import '../Selector.scss';
import * as React from 'react';
import { SHOW_SELECTOR_TEXT } from '../../../../utils/default';

interface ISelectorProps {
  text: string
  x: number
  y: number
  width: number
  height: number
  scale: number
  style?: React.CSSProperties
}

export function Selector({ text, x, y, width, height, scale, style: overrideStyle }: ISelectorProps): JSX.Element {
  const xText = x + width / 2;
  const yText = y + height / 2;

  const style: React.CSSProperties = {
    stroke: '#3B82F6',
    strokeWidth: 4 / scale,
    fillOpacity: 0,
    transitionProperty: 'all',
    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
    transitionDuration: '150ms',
    animation: 'fadein 750ms ease-in alternate infinite',
    ...overrideStyle
  };

  return (
    <>
      <rect
        x={x}
        y={y}
        width={width}
        height={height}
        style={style}
      >
      </rect>
      {SHOW_SELECTOR_TEXT
        ? <text
          x={xText}
          y={yText}
          style={{
            transform: `scale(${1 / scale}) translateX(-50%)`,
            transformBox: 'fill-box'
          }}
        >
          { text }
        </text>
        : null}
    </>
  );
}