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

const ArrowRight = () => (
  <svg viewBox="0 0 1024 1024" className="demo-home-nav__icon">
    <path
      fill="#B6C3D2"
      d="M601.1 556.5L333.8 289.3c-24.5-24.5-24.5-64.6 0-89.1s64.6-24.5 89.1 0l267.3 267.3c24.5 24.5 24.5 64.6 0 89.1-24.5 24.4-64.6 24.4-89.1-.1z"
    />
    <path
      fill="#B6C3D2"
      d="M690.2 556.5L422.9 823.8c-24.5 24.5-64.6 24.5-89.1 0s-24.5-64.6 0-89.1l267.3-267.3c24.5-24.5 64.6-24.5 89.1 0 24.5 24.6 24.5 64.6 0 89.1z"
    />
  </svg>
);

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

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

  get base() {
    return this.props.lang ? `/${this.props.lang}` : '';
  }

  handleNav = (to) => {
    window.location.hash = '#' + to;
  }

  render() {
    const {group} = this.props;
    return (
      <div className="demo-home-nav">
        <div className="demo-home-nav__title">{group.title}</div>
        <div className="demo-home-nav__group">
          {
            group.items.map(navItem => {
              return (
                <a className="demo-home-nav__block" key={navItem.path}
                   onClick={() => this.handleNav(`${this.base}/${navItem.path}`)}>
                  {navItem.title}
                  <ArrowRight />
                </a>
              )
            })
          }
        </div>
      </div>
    );
  }

}

export default DemoHomeNav;