import React from 'react'
import { isSafe } from 'exotic'
import { Portal } from '@skava/ui/dist/components/features/Portal'
import { toValidHTML } from 'presets/Studio/deps'
import { AdSpotProps } from './typings'
import { AdSpotDataElement, StyledBlink } from './styled'

class AdSpot extends React.PureComponent<AdSpotProps> {
  static defaultProps = {
    className: '',
    identifier: 'adSpot-identifier',
    htmlContent: '',
  }

  render() {
    const { identifier, htmlContent } = this.props
    const validHTML = toValidHTML(htmlContent)

    const children = (isSafe(validHTML) === true)
    ? <AdSpotDataElement dangerouslySetInnerHTML={{ __html: validHTML }} />
    : <StyledBlink>AdSpot will be rendered here...!</StyledBlink>

    return <Portal id={identifier}>{children}</Portal>
  }
}

export { AdSpot }
export default AdSpot