// @flow
import React, { Component } from 'react';
import classnames from 'classnames';

import ParameterList from '../ParameterList';
import * as utils from '../../../utils';

import styles from './json-doc.css';
import type { Service } from '../../../generated/version/ServiceType';

const defaultView =
  (<div className={styles.documentation}>
    <span className={styles.defaultView}>&lt;-- Hover over JSON example for documentation</span>
  </div>);

type Props = {
  documentationFullType: string,
  service: Service,
  importedServices: Service[],
};

class Documentation extends Component {
  props: Props;
  state: {
    height: number,
  };

  constructor(props: Props) {
    super(props);
    this.state = { height: 0 };
    this.updateContainerHeight = this.updateContainerHeight.bind(this);
  }

  componentDidUpdate() {
    this.updateContainerHeight();
  }

  container: HTMLDivElement;
  updateContainerHeight: () => void;

  updateContainerHeight() {
    const container = this.container;
    if (container) {
      const height = container.clientHeight;
      if (height > this.state.height) {
        this.setState({ height });
      }
    }
  }

  render() {
    const { documentationFullType, service, importedServices } = this.props;
    const { height } = this.state;
    if (!documentationFullType) return defaultView;

    const modelName = documentationFullType.substring(0, documentationFullType.lastIndexOf('.'));
    const fieldName = documentationFullType.substring(documentationFullType.lastIndexOf('.') + 1);
    const model = utils.getModel(modelName, service, importedServices);
    const field = model ? model.fields.find(f => f.name === fieldName) : null;

    return (
      <div
        ref={(el) => { this.container = el; }}
        className={classnames(styles.documentation)}
        style={{ minHeight: `${height}px` }}
      >
        <ParameterList {...field} service={service} importedServices={importedServices} parentModel={modelName} />
      </div>
    );
  }
}

export default Documentation;

@@ -730,80 +730,8 @@
  %7D;%0A
-    this.updateContainerHeight = this.updateContainerHeight.bind(this);%0A
   %7D%0A
@@ -824,16 +824,17 @@
 lement;%0A
+%0A
   update
@@ -852,48 +852,22 @@
 ight
-: () =%3E
+ = ():
  void
-;%0A%0A  updateContainerHeight()
+ =%3E
  %7B%0A 
@@ -1057,24 +1057,25 @@
  %7D%0A    %7D%0A  %7D
+;
 %0A%0A  render()

use arrow func instead of bind