text: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import General from './general';
  import Theme from './theme';
  
  const SETTINGS_NAV = [
    'General',
    'Theme',
  ];
  
  class Items extends Component {
    constructor(props) {
      super(props);
      this.state = {
        activeNav: SETTINGS_NAV[0],
      };
    }
    componentDidUpdate() {
      this.props.saveUserState();
    }
    getSettings() {
      const { activeNav } = this.state;
      const {
        settings, changeGeneral, theme,
      } = this.props;
      if (activeNav === SETTINGS_NAV[0]) {
        return (
          <General general={settings.general} changeGeneral={changeGeneral} {...this.props} />
        );
      } else if (activeNav === SETTINGS_NAV[1]) {
        return <Theme theme={theme} {...this.props} />;
      }
      return <General />;
    }
    render() {
      const { activeNav } = this.state;
      return (
        <div className="settings">
          <div
            className="top_nav"
            style={{ color: this.props.theme.item_card.color }}
          >
            { SETTINGS_NAV.map(nav => (
              <div
                className={`nav ${activeNav === nav ? 'active' : ''}`}
                onClick={() => this.setState({ activeNav: nav })}
                key={nav}
              >{nav}
              </div>))
            }
          </div>
          <div className="settings_container">
            { this.getSettings() }
          </div>
        </div>
      );
    }
  }
  
  Items.propTypes = {
    settings: PropTypes.object.isRequired,
    changeGeneral: PropTypes.func.isRequired,
    saveUserState: PropTypes.func.isRequired,
    theme: PropTypes.object.isRequired,
    auth: PropTypes.object.isRequired,
  };
  
  export default Items;
  