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

class RouterLink extends React.Component {
  get path() {
    const { item, base } = this.props;
    return `${base}${item.path}`;
  }

  get active() {
    if (window.location.hash.replace(/#\//g, '/') === this.path) {
      return true;
    }
    return false;
  }

  replacePath = () => {
    window.location.hash = '#' + this.path;
  };

  render() {
    const { item } = this.props;
    const name = item.title.split(' ');
    const itemName = {
      __html: `${name[0]} <span>${name.slice(1).join(' ')}</span>`,
    };

    if (item.path) {
      return (
        <a className={this.active ? 'active' : ''} onClick={this.replacePath} dangerouslySetInnerHTML={itemName}></a>
      );
    }

    return item.link ? (
      <a href={item.link} dangerouslySetInnerHTML={itemName}></a>
    ) : (
      <a dangerouslySetInnerHTML={itemName}></a>
    );
  }
}

export default RouterLink;