text: /* global wp */
  
  import PropTypes from 'prop-types'
  import VisibilitySensor from 'react-visibility-sensor'
  
  const {
    Component
  } = wp.element
  
  class FontPreviewLink extends Component {
    constructor(props) {
      super(props)
  
      this.state = {
        previewWasRendered: false
      }
    }
  
    render() {
      const style = { fontFamily: this.props.fontFace + ', sans-serif' }
      return (
        <a onClick={(e) => {
          e.stopPropagation()
          this.props.onClick()
        }}
        >
          <span className='neve-font-family'>{this.props.label || this.props.fontFace}</span>
          <VisibilitySensor onChange={(isVisible) => {
            if (isVisible) {
              this.setState({ previewWasRendered: true })
            }
          }}
          >
            {
              (this.state.previewWasRendered || this.props.delayLoad ===
                false)
                ? <span className='neve-font-preview' style={style}>Abc</span>
                : <span className='neve-font-preview '>...</span>
            }
          </VisibilitySensor>
        </a>
      )
    }
  }
  
  FontPreviewLink.propTypes = {
    fontFace: PropTypes.string.isRequired,
    delayLoad: PropTypes.bool.isRequired,
    onClick: PropTypes.func.isRequired,
    label: PropTypes.string
  }
  
  export default FontPreviewLink
  