// @flow
import React from 'react';
import TestRenderer from 'react-test-renderer';

import { resetStyled, expectCSSMatches } from './utils';

let styled;

describe('extending', () => {
  /**
   * Make sure the setup is the same for every test
   */
  beforeEach(() => {
    styled = resetStyled();
  });

  it('should let you use another component in a css rule', () => {
    const Inner = styled.div`
      color: blue;
      font-weight: light;
    `;
    const Outer = styled.div`
      padding: 1rem;
      > ${Inner} {
        font-weight: bold;
      }
    `;
    TestRenderer.create(<Inner />);
    TestRenderer.create(<Outer />);
    expectCSSMatches(`
      .c { color:blue; font-weight:light; }
      .d { padding:1rem; }
      .d > .sc-a { font-weight:bold; }
    `);
  });

  describe('inheritance', () => {

    const setupParent = () => {
      const colors = {
        primary: 'red',
        secondary: 'blue',
        tertiary: 'green',
      }
      const Parent = styled.h1`
        position: relative;
        color: ${props => colors[props.color]};
      `;
      return Parent;
    }

    const addDefaultProps = (Parent, Child, Grandson) => {
      Parent.defaultProps = {
        color: 'primary',
      }
      Child.defaultProps = {
        color: 'secondary',
      }
      Grandson.defaultProps = {
        color: 'tertiary',
      }
    }

    it('should override parents defaultProps', () => {
      const Parent = setupParent();
      const Child = styled(Parent)``;
      const Grandson = styled(Child)``;
      addDefaultProps(Parent, Child, Grandson);
      TestRenderer.create(<Parent />);
      TestRenderer.create(<Child />);
      TestRenderer.create(<Grandson />);
      expectCSSMatches(`
        .d{ position:relative; color:red; }
        .e{ position:relative; color:blue; }
        .f{ position:relative; color:green; }
      `);
    });

    describe('when overriding with another component', () => {
      it('should override parents defaultProps', () => {
        const Parent = setupParent();
        const Child = styled(Parent.withComponent('h2'))``;
        const Grandson = styled(Child.withComponent('h3'))``;
        console.log
        addDefaultProps(Parent, Child, Grandson);
        TestRenderer.create(<Parent />);
        TestRenderer.create(<Child />);
        TestRenderer.create(<Grandson />);
        expectCSSMatches(`
          .f{ position:relative; color:red; }
          .g{ position:relative; color:blue; }
          .h{ position:relative; color:green; }
        `);
      });
      it('should evaluate grandsons props', () => {
        const Parent = setupParent();
        const Child = styled(Parent.withComponent('h2'))``;
        const Grandson = styled(Child.withComponent('h3'))``;
        addDefaultProps(Parent, Child, Grandson);
        TestRenderer.create(<Parent />);
        TestRenderer.create(<Child />);
        TestRenderer.create(<Grandson color="primary" />);
        expectCSSMatches(`
          .f{ position:relative; color:red; }
          .g{ position:relative; color:blue; }
          .h{ position:relative; color:red; }
        `);
      });
    });
  });
});

@@ -2070,36 +2070,34 @@
 d(Parent
-.withComponent(
+).attrs(%7Bas: 
 'h2'
-)
+%7D
 )%60%60;%0A   
@@ -2130,36 +2130,34 @@
 ed(Child
-.withComponent(
+).attrs(%7Bas: 
 'h3'
-)
+%7D
 )%60%60;%0A   
@@ -2377,33 +2377,33 @@
 es(%60%0A          .
-f
+d
 %7B position:relat
@@ -2423,33 +2423,33 @@
 d; %7D%0A          .
-g
+e
 %7B position:relat
@@ -2470,33 +2470,33 @@
 e; %7D%0A          .
-h
+f
 %7B position:relat
@@ -2666,28 +2666,26 @@
 rent
-.withComponent(
+).attrs(%7Bas: 
 'h2'
-)
+%7D
 )%60%60;
@@ -2726,28 +2726,26 @@
 hild
-.withComponent(
+).attrs(%7Bas: 
 'h3'
-)
+%7D
 )%60%60;
@@ -2965,33 +2965,33 @@
 es(%60%0A          .
-f
+d
 %7B position:relat
@@ -3019,17 +3019,17 @@
        .
-g
+e
 %7B positi
@@ -3066,17 +3066,17 @@
        .
-h
+f
 %7B positi

Fix test by using as property