import React from 'react';
import './style.less';

import { config } from 'site-mobile-shared';
import DemoHomeNav from './DemoHomeNav.jsx';

class DemoHome extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      active: [],
    };
  }

  get lang() {
    const { lang } = { lang: 'zh-CN' };
    return lang;
  }

  get config() {
    const { locales } = config.site;

    if (locales) {
      return locales[this.lang];
    }

    return config.site;
  }

  get smallTitle() {
    return this.config.title.length >= 8;
  }

  render() {
    return (
      <div className='demo-home'>
        <h1 className={this.smallTitle ? 'demo-home__title demo-home__title--small' : 'demo-home__title'}>
          <img src={this.config.logo} />
          <span>{this.config.title}</span>
        </h1>
        {this.config.description && <h2 className='demo-home__desc'>{this.config.description}</h2>}
        {this.config.nav &&
          this.config.nav.map((group, index) => <DemoHomeNav lang={this.lang} group={group} key={index} />)}
      </div>
    );
  }
}

export default DemoHome;