import React from 'react'

let urlRegex = new RegExp(/([-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?)/gi)
let protocolRegex = /^https?:\/\//
let imgRegex = /\.(?:jpe?g|gif|png)$/

function splitEntities(message) {
  let messagePieces = message.split(' ')
  return messagePieces.map((entity, index) => {
    if(!entity || entity === '' || entity === ' ') {
      return null
    }
    if(entity.match(urlRegex)){
        var url = null
        if(protocolRegex.test(entity)) {
          url = entity
        } else {
          url = 'http://' + entity
        }
        if(imgRegex.test(entity)){
          return (
            <img style={{width: '100%'}} key={`img-${index}`} src={url} />
          )
        }
        return (
          <a key={`link-${index}`} href={url} target='_blank'>{entity} </a>
        )
    }

    return (
      <span key={`text-${index}`}>{entity} </span>
    )
    return {type: 'plain', content: entity}
  })
}

function spice(message) {
  return splitEntities(message)
}

module.exports = {
  spice: spice,
}

@@ -445,18 +445,16 @@
 %7B%0A      
-  
 var url 
@@ -460,18 +460,16 @@
  = null%0A
-  
       if
@@ -503,26 +503,24 @@
 ) %7B%0A        
-  
 url = entity
@@ -526,18 +526,16 @@
 y%0A      
- 
- 
 %7D else %7B
@@ -535,18 +535,16 @@
  else %7B%0A
-  
         
@@ -570,30 +570,26 @@
 ntity%0A      
-  %7D%0A  
+%7D%0A
       if(img
@@ -613,26 +613,24 @@
 ))%7B%0A        
-  
 return (%0A   
@@ -618,34 +618,32 @@
        return (%0A
-  
           %3Cimg s
@@ -711,18 +711,16 @@
     
-  
 )%0A      
   %7D%0A
@@ -711,30 +711,26 @@
     )%0A      
- 
- 
 %7D%0A
-  
       return
@@ -724,34 +724,32 @@
 %0A      return (%0A
-  
         %3Ca key=%7B
@@ -806,18 +806,16 @@
 y%7D %3C/a%3E%0A
-  
       )%0A
@@ -895,52 +895,8 @@
   )%0A
-    return %7Btype: 'plain', content: entity%7D%0A
   %7D)

fix indentation