import React from 'react'
import { StyledIFrame, StyledIFrameWrap } from './styled'
import { IframeProps } from './typings'

class IFrame extends React.PureComponent<IframeProps> {
  static defaultProps = {
    src: '',
    layout: 'responsive',
    sandbox: 'allow-scripts allow-same-origin allow-popups',
    frameBorder: '0',
    width: '70%',
    height: '500px',
    nowrap: false,
  }

  render() {
    const { width, height, nowrap, ...remainingProps } = this.props
    const wrapperProps = { width, height }

    if (nowrap === true) {
      return <StyledIFrame {...remainingProps} />
    } else {
      return (
        <StyledIFrameWrap {...wrapperProps}>
          <StyledIFrame {...remainingProps} />
        </StyledIFrameWrap>
      )
    }
  }
}

export { IFrame }
export default IFrame