import React, { useRef, useEffect, useState } from 'react';
import './Example.less';

export default (props: { route: any }) => {
  const elm = useRef<HTMLIFrameElement>();
  const [height, setHeight] = useState(0);

  useEffect(() => {
    setHeight(elm.current.contentWindow.document.documentElement.scrollHeight);
  }, [elm]);

  return (
    props.route.meta.examplePath && (
      <div className="__dumi-default-example-wrapper">
        <div className="__dumi-default-example-wrapper-toolbar">
          {props.route.meta.description || props.route.meta.title}
          <span>
            <button
              className="__dumi-default-icon"
              onClick={() => elm.current.contentWindow.location.reload()}
            />
            <a
              target="_blank"
              rel="noopener noreferrer"
              href={props.route.meta.examplePath}
              className="__dumi-default-icon"
            />
          </span>
        </div>
        <iframe src={props.route.meta.examplePath} ref={elm} style={{ height }} title="dumi" />
      </div>
    )
  );
};