import React from 'react';
const { filterChildren } = require('idyll-component-children');

class Annotation extends React.PureComponent {
  render() {
    const { children } = this.props;

    const annotationBox = filterChildren(children || [], c => {
      console.log(
        'filtering',
        c,
        c._idyll,
        c.type,
        c._idyll && c._idyll.name && c._idyll.name.toLowerCase() === 'graphic',
        c.type && c.type.name && c.type.name.toLowerCase() === 'graphic'
      );
      return (
        (c._idyll &&
          c._idyll.name &&
          c._idyll.name.toLowerCase() === 'graphic') ||
        (c.type && c.type.name && c.type.name.toLowerCase() === 'graphic')
      );
    });

    const inlineText = filterChildren(children || [], c => {
      return (
        !(
          c._idyll &&
          c._idyll.name &&
          c._idyll.name.toLowerCase() === 'graphic'
        ) && !(c.type && c.type.name && c.type.name.toLowerCase() === 'graphic')
      );
    });

    return (
      <div style={{ display: 'inline' }}>
        {' '}
        <div className="annotated-text">
          {inlineText} <div className="annotation-text">{annotationBox}</div>
        </div>{' '}
      </div>
    );
  }
}

Annotation._idyll = {
  name: 'Annotation',
  tagType: 'open',
  displayType: 'inline'
};

export default Annotation;

@@ -257,95 +257,45 @@
     
-console.log(%0A        'filtering',%0A        c,%0A        c._idyll,%0A        c.type,%0A        
+let name = '';%0A      name = name %7C%7C (
 c._i
@@ -299,18 +299,17 @@
 ._idyll 
-&&
+?
  c._idyl
@@ -319,71 +319,47 @@
 ame 
-&& c._idyll.name.toLowerCase() === 'graphic',%0A        
+: name);%0A      name = name %7C%7C (
 c.type 
-&&
+?
  c.t
@@ -371,74 +371,45 @@
 ame 
-&& c.type.name.toLowerCase() === 'graphic'
+: name);
 %0A      
-);
+name =
 %0A      
-return (
+  name %7C%7C
 %0A   
@@ -420,142 +420,88 @@
  (c.
-_idyll &&%0A          c._idyll.name &&%0A          c._idyll.name.toLowerCase() === 'graphic') %7C%7C%0A        (c.type && c.type.name && c.type.
+props && c.props.idyllASTNode ? c.props.idyllASTNode.name : name);%0A      return 
 name
@@ -524,33 +524,24 @@
 == 'graphic'
-)%0A      )
 ;%0A    %7D);%0A%0A 
@@ -610,176 +610,251 @@
     
-return (%0A        !(%0A          c._idyll &&%0A          c._idyll.name &&%0A          c._idyll.name.toLowerCase() === 'graphic'%0A        ) && !(c.type && c.type.name && c.type.
+let name = '';%0A      name = name %7C%7C (c._idyll ? c._idyll.name : name);%0A      name = name %7C%7C (c.type ? c.type.name : name);%0A      name =%0A        name %7C%7C%0A        (c.props && c.props.idyllASTNode ? c.props.idyllASTNode.name : name);%0A      return 
 name
@@ -860,33 +860,33 @@
 e.toLowerCase() 
-=
+!
 == 'graphic')%0A  
@@ -885,17 +885,8 @@
 hic'
-)%0A      )
 ;%0A  

fix filtering logic