import React, { memo, useEffect, useRef } from 'react';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import Iframe from 'react-iframe';
import Empty from '@wisdom-components/empty';
import styles from './index.less';
import Hoc from './HocContainer';
import useFullScreen from './useFullScreen';

const TabWidget = props => {
  const params = Object.assign({}, props.params, {
    fullscreen: !(props.params !== undefined && props.params.fullscreen === 'true'),
  });
  const { linkUrl, fullscreen } = params;
  const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(fullscreen);

  return (
    <div className={styles['tab-iframe']} ref={ref}>
      <div className={styles['oper-wrap']}>
        <div className={styles['oper-btn']}>
          {isFullscreen ? (
            <FullscreenExitOutlined className={styles['btn-fullscreen_exit']} onClick={handleExitFullScreen} />
          ) : (
            <FullscreenOutlined className={styles['btn-fullscreen']} onClick={handleFullScreen} />
          )}
        </div>
      </div>

      {linkUrl ? (
        <Iframe
          url={linkUrl}
          width="100%"
          height="100%"
          display="block"
          position="relative"
          styles={{ border: 'none' }}
        />
      ) : (
        <Empty description="配置url链接才能显示哦!" />
      )}
    </div>
  );
};

export default memo(Hoc(TabWidget));