/** @format */

import classnames from 'classnames';
import _, { merge } from 'lodash';
import React, { useState } from 'react';

import { Box } from './styled';

interface IframeProps {
  size?: Record<string, any>;
  [key: string]: any;
}

const Iframe = (props: IframeProps) => {
  const {
    size,
    iframeUrl = 'https://www.aliyun.com',
    closeIframe = false,
    showCloseBtn = false,
    scrolling = false,
    iframeSet = {},
  } = props;

  const delIframe = () => {
    const dom = document.getElementsByClassName('edata-iframe')[0];
    dom && dom.parentNode.removeChild(dom);
  };

  const showIframeStyle = _.merge(
    {
      frameborder: 0,
    },
    iframeSet,
  );

  return (
    <Box style={size}>
      <iframe
        src={iframeUrl}
        scrolling={scrolling ? 'yes' : 'no'}
        className="iframe-set"
        {...showIframeStyle}
      />
      {closeIframe && (
        <span
          style={showCloseBtn ? { display: 'block' } : {}}
          className={classnames('close_iframe', { hover_show: !showCloseBtn })}
          onClick={() => delIframe()}
        ></span>
      )}
    </Box>
  );
};

export default Iframe;