content: import React from 'react';
  import {BaseMixin, ElementaryMixin, SectionMixin} from '../common/common.js';
  import {FileViewer, Pre, Panel} from '../bricks/bricks.js';
  
  import './source-code.less';
  
  export default React.createClass({
  
    //@@viewOn:mixins
    mixins: [
      BaseMixin,
      ElementaryMixin,
      SectionMixin
    ],
  
    statics: {
      tagName: 'UU5.DocKit.SourceCode',
      opt: {
        dummyLevel: true,
        increaseLevel: true,
      },
      classNames: {
        main: 'uu5-doc-kit-source-code',
        pre: 'uu5-doc-kit-source-code-pre',
        code: 'uu5-doc-kit-source-code-code'
      },
      defaults: {
        code: 'uu-glyphicon-code'
      }
    },
  
    propTypes: {
      src: React.PropTypes.string,
      blockKey: React.PropTypes.string,
      numbered: React.PropTypes.bool,
      trimmed: React.PropTypes.bool,
      // colorSchema: React.PropTypes.oneOf(Environment.colorSchema)
    },
  
    // Setting defaults
    getDefaultProps: function () {
      return {
        src: null,
        blockKey: null,
        numbered: false,
        trimmed: true
        // colorSchema: 'info'
      };
    },
  
    // Interface
  
    // Overriding Functions
  
    // Component Specific Helpers
    _getMainProps: function () {
      var mainProps = this.getMainPropsToPass(
        [
          'UU5_Common_BaseMixin',
          'UU5_Common_ElementaryMixin',
          'UU5_Common_SectionMixin'
        ]
      );
  
      // because props of contentMixin is returned from selectionMixinPropsToPass, but content is not needed here
      mainProps.content = null;
      mainProps.header = [
        <UU5.Bricks.Glyphicon glyphicon={this.getDefault().code} className={this.getClassName().code} />,
        mainProps.header
      ];
  
      mainProps.glyphiconExpanded = "uu-glyphicon-arrow-up";
      mainProps.glyphiconCollapsed = "uu-glyphicon-arrow-down";
  
      mainProps.id = this.getId() + '-example';
      mainProps.colorSchema = this.props.colorSchema;
  
      return mainProps;
    },
  
    _getPreProps: function () {
      return {
        id: this.getId() + '-pre',
        className: this.getClassName().pre,
        content: this.getContent(),
        ignoreInnerHTML: true
      };
    },
  
    _getChildren: function () {
      var children;
      if (this.props.src) {
        children = (
          <FileViewer
            src={this.props.src}
            blockKey={this.props.blockKey}
            numbered={this.props.numbered}
            trimmed={this.props.trimmed}
          />
        );
      } else if (this.props.children) {
        children = React.Children.toArray(this.props.children);
      }
      return children;
    },
  
    // Render
    render: function () {
      return (
        <Panel {...this._getMainProps()}>
          <Pre {...this._getPreProps()}>
            {this._getChildren()}
          </Pre>
        </Panel>
      );
    }
  });
  
  