import React, { Component } from 'react'

export default class Obfuscate extends Component {
  constructor(props) {
    super(props)

    this.state = {
      humanInteraction: false,
    }
  }

  // Convert contact information to contact URL scheme
  createContactLink(props) {
    let link

    // Combine email header parameters for use with email
    const combineHeaders = (params = {}) => {
      return Object.keys(params)
        .map(key => `${key}=${encodeURIComponent(params[key])}`)
        .join('&')
    }

    if (props.email) {
      link = `mailto:${props.email}`

      if (props.headers) {
        link += `?${combineHeaders(props.headers)}`
      }
    } else if (props.tel) {
      link = `tel:${props.tel}`
    } else if (props.sms) {
      link = `sms:${props.sms}`
    } else if (props.facetime) {
      link = `facetime:${props.facetime}`
    } else {
      link = props.children
    }

    return link
  }

  handleClick(event) {
    const { onClick } = this.props

    event.preventDefault()

    // Allow instantiator to provide an onClick method to be called
    // before we change location (e.g. for analytics tracking)
    if (onClick && typeof onClick === 'function') {
      onClick()
    }
    
    window.location.href = this.createContactLink(this.props)
  }

  handleCopiability() {
    this.setState({
      humanInteraction: true,
    })
  }

  reverse(s) {
    return s
      .split('')
      .reverse()
      .join('')
      .replace('(', ')')
      .replace(')', '(')
  }

  render() {
    const { humanInteraction } = this.state
    const {
      element: Element = 'a',
      children,
      tel,
      sms,
      facetime,
      email,
      headers,
      obfuscate,
      linkText,
      style,
      ...others
    } = this.props

    const propsList = children || tel || sms || facetime || email

    const obsStyle = {
      ...(style || {}),
      unicodeBidi: 'bidi-override',
      direction:
        humanInteraction === true || obfuscate === false ? 'ltr' : 'rtl',
    }

    const link =
      humanInteraction === true || obfuscate === false
        ? propsList
        : this.reverse(propsList)

    const clickProps =
      Element === 'a'
        ? {
            href:
              humanInteraction === true || obfuscate === false
                ? this.createContactLink(this.props)
                : linkText || 'obfuscated',
            onClick: this.handleClick.bind(this),
          }
        : {}

    const props = {
      onFocus: this.handleCopiability.bind(this),
      onMouseOver: this.handleCopiability.bind(this),
      onContextMenu: this.handleCopiability.bind(this),
      ...others,
      ...clickProps,
      style: obsStyle,
    }

    return <Element {...props}>{link}</Element>
  }
}

@@ -872,37 +872,107 @@
 lse 
-%7B%0A      link = props.children
+if (typeof props.children !== 'object') %7B%0A      link = props.children%0A    %7D else %7B%0A      return '/'
 %0A   
@@ -1288,20 +1288,16 @@
 )%0A    %7D%0A
-    
 %0A    win
@@ -1453,24 +1453,29 @@
 everse(s
+tring
 ) %7B%0A    
 return s
@@ -1470,17 +1470,67 @@
     
-return s%0A
+if (typeof string !== 'undefined') %7B%0A      return string%0A  
     
@@ -1538,24 +1538,26 @@
  .split('')%0A
+  
       .rever
@@ -1563,24 +1563,26 @@
 rse()%0A      
+  
 .join('')%0A  
@@ -1575,24 +1575,26 @@
   .join('')%0A
+  
       .repla
@@ -1608,24 +1608,26 @@
  ')')%0A      
+  
 .replace(')'
@@ -1633,16 +1633,22 @@
 ', '(')%0A
+    %7D%0A
   %7D%0A%0A  r
@@ -2198,32 +2198,38 @@
 tion === true %7C%7C
+%0A     
  obfuscate === f
@@ -2224,32 +2224,94 @@
 uscate === false
+ %7C%7C%0A      typeof children === 'object' // Allow child elements
 %0A        ? props

Allow child elements to pass without obfuscation