import Konva from 'konva';
import { Transformer } from 'react-konva';
import React from 'react';

export interface TransformerProps extends Konva.TransformerConfig {
  selectedShapeId: string;
  padding?: number;
  anchorCornerRadius?: number;
}

class TransformerComponent extends React.Component<TransformerProps> {
  transformer: any;
  componentDidMount() {
    this.checkNode();
  }
  componentDidUpdate() {
    this.checkNode();
  }
  checkNode() {
    // here we need to manually attach or detach Transformer node
    const stage = this.transformer.getStage();
    const { selectedShapeId } = this.props;
    const selectedNode = stage.findOne('.' + selectedShapeId);
    // do nothing if selected node is already attached
    if (selectedNode === this.transformer.node()) {
      return;
    }

    if (selectedNode) {
      // attach to another node
      this.transformer.attachTo(selectedNode);
    } else {
      // remove transformer
      this.transformer.detach();
    }
    this.transformer.getLayer().batchDraw();
  }
  render() {
    return (
      <Transformer
        {...this.props}
        ref={(node:Konva.Transformer) => {
          this.transformer = node;
        }}
      />
    );
  }
}

export default TransformerComponent;