import merge from 'lodash/merge';
import radium from 'radium';
import React from 'react';
import reactDom from 'react-dom';

import Column from '../Column/Column';
import Description from '../Description/Description';
import Key from '../Key/Key';
import ObjectPropertyDefaults from '../ObjectPropertyDefaults/ObjectPropertyDefaults';
import ObjectPropertySamples from '../ObjectPropertySamples/ObjectPropertySamples';
import ParentInfoLink from '../ParentInfo/ParentInfoLink';
import Requirement from '../Requirement/Requirement';
import Row from '../Row/Row';
import Type from '../Type/Type';
import Value from '../Value/Value';

import {
  containsExpandableCollapsibleElement,
} from '../elements/expandableCollapsibleElement';

import {
  hasDefaults,
  hasDescription,
  hasSamples,
  hasType,
  hasValue,
  isLastArrayItem,
} from '../elements/element';

class ObjectProperty extends React.Component {
  static propTypes = {
    element: React.PropTypes.object,
    index: React.PropTypes.number,
    parentElement: React.PropTypes.object,
    reportKeyWidth: React.PropTypes.func,
    style: React.PropTypes.object,
    keyWidth: React.PropTypes.number,
  };

  static contextTypes = {
    theme: React.PropTypes.object,
    showMemberParentLinks: React.PropTypes.bool,
    onElementLinkClick: React.PropTypes.func,
  };

  componentDidMount = () => {
    const keyIdentifier = this.props.element.meta.id;
    const keyDomNode = reactDom.findDOMNode(this.refs.key);

    this.props.reportKeyWidth(keyIdentifier, keyDomNode.clientWidth);
  }

  get style() {
    const { BORDER_COLOR } = this.context.theme;

    const style = {
      root: {
        borderBottom: `1px solid ${BORDER_COLOR}`,
        paddingTop: '8px',
        paddingBottom: '8px',
      },
      keyColumn: {
      },
      requirementColumn: {
        width: '25px',
        maxWidth: '25px',
        minWidth: '25px',
      },
      type: {
        root: {
          marginBottom: '4px',
        },
      },
    };

    if (containsExpandableCollapsibleElement(this.props.parentElement.content)) {
      style.keyColumn.paddingLeft = '20px';
    }

    let keyWidth;

    if (this.props.keyWidth) {
      if (style.keyColumn.paddingLeft) {
        keyWidth = `${this.props.keyWidth + 20}px`;
      } else {
        keyWidth = `${this.props.keyWidth}px`;
      }
    } else {
      keyWidth = 'auto';
    }

    style.keyColumn.width = keyWidth;
    style.keyColumn.minWidth = keyWidth;
    style.keyColumn.maxWidth = keyWidth;

    if (isLastArrayItem(this.props.parentElement, this.props.index)) {
      style.root.borderBottom = '0px';
    }

    return merge(style, this.props.style || {});
  }

  render() {
    return (
      <Row style={this.style.root}>
        <Column style={this.style.keyColumn}>
          <Key
            element={this.props.element}
            ref="key"
          />
        </Column>

        <Column style={this.style.requirementColumn}>
          <Requirement element={this.props.element} />
        </Column>

        <Column>
          {
            hasType(this.props.element) &&
              <Row>
                <Column>
                  <Type
                    element={this.props.element}
                    style={this.style.type}
                  />
                </Column>
                <Column>
                  <ParentInfoLink
                    element={this.props.element}
                    show={this.context.showMemberParentLinks}
                    showBullet={true}
                  />
                </Column>
              </Row>
          }

          {
            hasDescription(this.props.element) &&
              <Row>
                <Description element={this.props.element} />
              </Row>
          }

          {
            hasValue(this.props.element) &&
              <Row>
                <Value element={this.props.element} />
              </Row>
          }

          {
            hasSamples(this.props.element) &&
              <Row>
                <ObjectPropertySamples element={this.props.element} />
              </Row>
          }

          {
            hasDefaults(this.props.element) &&
              <Row>
                <ObjectPropertyDefaults element={this.props.element} />
              </Row>
          }
        </Column>
      </Row>
    );
  }
}

export default radium(ObjectProperty);

@@ -824,16 +824,45 @@
 ayItem,%0A
+  isIncluded,%0A  isInherited,%0A
 %7D from '
@@ -1346,16 +1346,253 @@
 s.func,%0A
+    includedProperties: React.PropTypes.oneOfType(%5B%0A      React.PropTypes.bool,%0A      React.PropTypes.string,%0A    %5D),%0A    inheritedProperties: React.PropTypes.oneOfType(%5B%0A      React.PropTypes.bool,%0A      React.PropTypes.string,%0A    %5D),%0A
   %7D;%0A%0A  
@@ -3568,33 +3568,192 @@
 mn%3E%0A
-                %3CColumn%3E%0A
+%0A                %7B%0A                  (isIncluded(this.props.element) && this.context.includedProperties === 'tag') &&%0A                    %3CColumn style=%7B%7BalignItems: 'flex-end'%7D%7D%3E%0A    
     
@@ -3782,16 +3782,20 @@
 nfoLink%0A
+    
         
@@ -3851,24 +3851,28 @@
             
+    
 show=%7Bthis.c
@@ -3917,24 +3917,28 @@
             
+    
 showBullet=%7B
@@ -3953,35 +3953,43 @@
                 
+   
+ 
 /%3E%0A
+    
                 
@@ -3990,32 +3990,504 @@
       %3C/Column%3E%0A
+                %7D%0A%0A                %7B%0A                  (isInherited(this.props.element) && this.context.inheritedProperties === 'tag') &&%0A                    %3CColumn style=%7B%7BalignItems: 'flex-end'%7D%7D%3E%0A                      %3CParentInfoLink%0A                        element=%7Bthis.props.element%7D%0A                        show=%7Bthis.context.showMemberParentLinks%7D%0A                        showBullet=%7Btrue%7D%0A                      /%3E%0A                    %3C/Column%3E%0A                %7D%0A
               %3C/

Mark object properties as inherited/included.