import React,{Component} from 'react';
import { Image } from 'react-konva';

export interface YImageProps { 
  src?: string;
  name?: string;
  x?: number;
  y?: number;
  width?: number;
  height?: number;
  scale?: {
    x: number;
    y: number;
  };
  rotation?: number;
  offset?: {
    x: number;
    y: number;
  }
  draggable?: boolean;
  onDragEnd?: any;
  onTransformEnd?: any;
  onTransform?: any;
  id: string;
  label?: string;
  [propName: string]: any;
}
interface YImageState { 
  image: HTMLImageElement;
  // [propName: string]: any;
}

class YImage extends Component<YImageProps, YImageState> {
  constructor(props: YImageProps) {
    super(props)
    this.state = {
      image: null
    };
    this.image = document.createElement("img");
  }
  image: HTMLImageElement;
  componentDidMount() {
    this.image.src = this.props.src;
    this.image.onload = () => {
      this.setState({
        image: this.image
      });
    };
  }
  componentWillUnmount() {
    this.image.onload = null
  }
  render() {
    return <Image image={this.state.image} {...this.props}/>;
  }
}

export default YImage;