import React  from 'react';
import classnames from 'classnames';
import { Link } from 'react-router-dom';

import Tile from './tile';


export default class BasicTile extends React.PureComponent {

  render() {
    const { props } = this;

    const children = (
      <span>
        <p className="black white-d absolute f9"
           style={{left: 8, top: 8}}>{props.title}</p>
         <img
           className="absolute invert-d"
           style={{ left: 38, top: 38 }}
           src={props.iconUrl}
           width={48}
           height={48} />
      </span>
    );

    const routeList = ['/~chat', '/~publish', '/~link', '/~groups', '/~dojo'];

    const tile =  ( routeList.indexOf(props.linkedUrl) !== -1 ) ? (
      <Link className="w-100 h-100 db pa2 no-underline" to={props.linkedUrl}>
       {children}
      </Link>
    ) : (
      <a className="w-100 h-100 db pa2 no-underline" href={props.linkedUrl}>
       {children}
      </a>
    );

    return (
      <Tile>
        <div className={"w-100 h-100 relative bg-white bg-gray0-d ba " +
                        "b--black b--gray1-d"}>{tile}</div>
      </Tile>
    );
  }

}

@@ -128,17 +128,16 @@
 tile';%0A%0A
-%0A
 export d
@@ -189,17 +189,16 @@
 onent %7B%0A
-%0A
   render
@@ -292,35 +292,149 @@
 ame=
-%22black white-d absolute f9%22
+%7B%0A           classnames('absolute f9',%0A           %7B 'black white-d': props.title !== 'Dojo',%0A             'white': props.title === 'Dojo' %7D)%7D
 %0A   
@@ -449,16 +449,17 @@
 style=%7B%7B
+ 
 left: 8,
@@ -469,11 +469,32 @@
 p: 8
+ 
 %7D%7D
-%3E
+%0A        %3E%0A          
 %7Bpro
@@ -502,16 +502,25 @@
 s.title%7D
+%0A        
 %3C/p%3E%0A   
@@ -555,27 +555,83 @@
 ame=
-%22absolute invert-d%22
+%7Bclassnames('absolute',%0A           %7B 'invert-d': props.title !== 'Dojo' %7D)%7D
 %0A   
@@ -743,16 +743,25 @@
 ght=%7B48%7D
+%0A        
  /%3E%0A    
@@ -1210,17 +1210,28 @@
 ssName=%7B
-%22
+classnames('
 w-100 h-
@@ -1248,46 +1248,89 @@
 ve b
-g-white bg
+a b--black b-
 -gray
-0
+1
 -d b
-a %22 +%0A            
+g-gray0-d',%0A        %7B 'bg-white': props.title !== 'Dojo',%0A
     
@@ -1339,32 +1339,55 @@
     
-  %22b-
+'bg
 -black
- b--gray1-d%22%7D
+': props.title === 'Dojo' %7D)%7D%0A        
 %3E%7Bti
@@ -1421,11 +1421,10 @@
  );%0A  %7D%0A
-%0A
 %7D%0A

add class exemptions for Dojo tile