import React from 'react';
import _ from 'lodash';
import { Element as ScrollHook } from 'react-scroll';

import { FontIcon } from 'material-ui';
import { colors as Colors } from 'material-ui/styles';
import { MethodLabel, Show } from '../../../common';
import MethodDescription from './SocketMethodDescription';
import ParamsList from './SocketParametersList';
import DependenciesList from './SocketDependenciesList';
import CodeExample from './SocketCodeExample';
import AuthorInfo from './SocketAuthorInfo';

const SocketsRegistryContentSection = ({
  author,
  socketName,
  socketDescription,
  endpoints,
  dependencies,
  runtimes,
  handleChangeLanguage,
  currentLanguage
}) => {
  const styles = {
    methodLabel: {
      fontSize: 28,
      marginLeft: 24
    },
    socketName: {
      paddingTop: 4,
      fontSize: 26,
      marginLeft: 24
    },
    nameContainer: {
      display: 'flex',
      alignItems: 'center'
    },
    titleContainer: {
      borderBottom: `1px solid ${Colors.grey200}`
    },
    container: {
      minHeight: 350,
      flex: 1
    },
    description: {
      paddingLeft: 26,
      width: '100%',
      fontSize: 14,
      color: Colors.grey500
    },
    socketIcon: {
      fontSize: 52
    },
    header: {
      padding: '32px 24px'
    },
    authorInfoContainer: {
      backgroundColor: '#444',
      padding: 0
    },
    runtimeButtonsContainer: {
      backgroundColor: Colors.blueGrey900,
      display: 'flex',
      borderBottom: `2px solid ${Colors.grey900}`,
      padding: '8px 16px'
    },
    runtimeButton: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      cursor: 'pointer',
      padding: '0 8px',
      color: Colors.grey300,
      borderRadius: 5,
      minWidth: 70,
      height: 30
    },
    activeLanguageButton: {
      backgroundColor: Colors.blue500
    }
  };
  const renderLanguageButtons = () => {
    const availableLanguages = ['cURL', 'NodeJS', 'Python', 'CLI'];
    const runtimeButtons = _.map(availableLanguages, (language) => {
      const languageName = language.toLowerCase();
      const isCurrentLanguage = languageName === currentLanguage;

      return (
        <div
          onClick={() => handleChangeLanguage(languageName)}
          style={{ ...styles.runtimeButton, ...(isCurrentLanguage && styles.activeLanguageButton) }}
          key={languageName}
        >
          {language}
        </div>
      );
    });

    return runtimeButtons;
  };
  const renderTitle = () => (
    <div
      className="row col-flex-1"
      style={styles.titleContainer}
    >
      <div className="col-sm-15">
        <div style={{ ...styles.nameContainer, ...styles.header }}>
          <FontIcon
            style={styles.socketIcon}
            className="synicon-socket-custom-socket"
            color={Colors.purple400}
          />
          <div style={styles.socketName}>
            {socketName}
          </div>
        </div>
        <div style={styles.description}>
          {socketDescription}
        </div>
      </div>
      <div
        style={styles.authorInfoContainer}
        className="col-sm-20"
      >
        <div style={styles.runtimeButtonsContainer}>
          {renderLanguageButtons()}
        </div>
        <AuthorInfo
          runtimes={runtimes}
          author={author}
        />
      </div>
    </div>
  );
  const renderEndpoints = () => {
    const endpointsList = _.map(endpoints, (methods, endpointName) => (
      _.map(methods, (method) => (
        <div className="row col-flex-1">
          <div className="col-sm-15">
            <div style={{ ...styles.nameContainer, ...styles.header }}>
              <ScrollHook name={`${endpointName}-${method.type}`} />
              <MethodLabel method={method.type} />
              <div style={styles.methodLabel}>
                {endpointName}
              </div>
            </div>
            <MethodDescription
              style={styles.header}
              headerLabel="Definition"
            >
              {`${SYNCANO_BASE_URL}/v2/instances/your_instance/${socketName}/${endpointName}/`}
            </MethodDescription>
            <Show if={method.info.description}>
              <MethodDescription
                style={styles.header}
                headerLabel="Description"
              >
                {method.info.description}
              </MethodDescription>
            </Show>
            <Show if={method.info.parameters}>
              <MethodDescription
                style={styles.header}
                headerLabel="Parameters"
              >
                <ParamsList parameters={method.info.parameters} />
              </MethodDescription>
            </Show>
            <Show if={dependencies}>
              <MethodDescription
                style={styles.header}
                headerLabel="Dependencies"
              >
                <DependenciesList dependencies={dependencies} />
              </MethodDescription>
            </Show>
          </div>
          <div
            style={styles.authorInfoContainer}
            className="col-sm-20"
          >
            <CodeExample
              methodType={method.type.toUpperCase()}
              currentLanguage={currentLanguage}
              endpointName={endpointName}
              socketName={socketName}
              codeExamples={method.info.response && method.info.response.examples}
            />
          </div>
        </div>
      ))
    ));

    return (
      <div>
        {endpointsList}
      </div>
    );
  };

  return (
    <div style={styles.container}>
      {renderTitle()}
      {renderEndpoints()}
    </div>
  );
};

export default SocketsRegistryContentSection;

@@ -1465,59 +1465,8 @@
 x',%0A
-      borderBottom: %602px solid $%7BColors.grey900%7D%60,%0A
     
@@ -1483,24 +1483,24 @@
  '8px 16px'%0A
+
     %7D,%0A    r
@@ -2486,28 +2486,24 @@
 ssName=%22row 
-col-
 flex-1%22%0A    
@@ -2562,33 +2562,33 @@
 ssName=%22col-sm-1
-5
+7
 %22%3E%0A        %3Cdiv 
@@ -3073,34 +3073,34 @@
 assName=%22col-sm-
-20
+18
 %22%0A      %3E%0A      
@@ -3482,20 +3482,16 @@
 me=%22row 
-col-
 flex-1%22%3E
@@ -3525,17 +3525,17 @@
 col-sm-1
-5
+7
 %22%3E%0A     
@@ -5055,18 +5055,18 @@
 %22col-sm-
-20
+18
 %22%0A      

Apply comments - fix columns width