/**
 * @author Martin Karkowski
 * @email m.karkowski@zema.de
 * @create date 2021-04-20 18:51:42
 * @modify date 2021-04-20 18:55:10
 * @desc [description]
 */

import React from "react";

/**
 * A Component, used to Render the Staus of a Host.
 *
 */
export class CustomIFrame extends React.Component<
  {
    height?: number;
    width?: number;
    link: string;
    altText?: string;
  },
  {
    height: number;
    width: number;
  }
> {
  ref: React.RefObject<HTMLDivElement>;

  /**
   * Create the Status to Render.
   * @param props
   */
  constructor(props) {
    super(props);
    this.ref = React.createRef();
    this.state = {
      height: 200,
      width: 500
    };
  }

  protected _handleResize: () => void;

  componentDidMount() {
    const _this = this;
    this._handleResize = () => {
      setTimeout(() => {
        const size = {
          width:
            _this.props.width |
            (_this.ref.current.parentElement.clientWidth - 40),
          height:
            _this.props.height |
            (_this.ref.current.parentElement.clientHeight - 40)
        };
        console.log(size, _this.ref);
        _this.setState(size);
      }, 200);
    };

    this._handleResize();
    window.addEventListener("resize", this._handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this._handleResize);
  }

  render(): JSX.Element {
    return (
      <div ref={this.ref}>
        <iframe
          src={this.props.link}
          height={this.state.height}
          width={this.state.width}
        ></iframe>
      </div>
    );
  }
}