import React from 'react';
import { NavLink, Link } from 'react-router-dom';
import { connect } from 'react-redux';

import IconExternal from './icons/IconExternal';
import IconEdit from './icons/IconEdit';
import IconSettings from './icons/IconSettings';
import IconCode from './icons/IconCode';

class Sidebar extends React.Component {
  renderProfile() {
    const user = this.props.auth.user;
    if (!user) {
      return null;
    }

    return (
      <Link to="/profile" className="sidebar-footer-user">
        <span className="avatar"/>
        <div className="user-data">
          <div className="name">{user.name}</div>
          <div className="email">{user.email}</div>
        </div>
      </Link>
    );
  }

  render() {
    return (
      <aside className="sidebar">
        <header className="sidebar-header">
          <Link to="/"><div className="logo">DevCMS</div></Link>
          <a href={this.props.site.url} target="_blank" rel="noopener noreferrer">
            <IconExternal/>
            <span>View Site</span>
          </a>
        </header>
        <nav className="sidebar-navigation">
          <h3><IconEdit/>Content</h3>
          <ul>
            {Object.entries(this.props.site.schema.entries).map(([name, type]) => {
              return <li key={name}><NavLink to={`/entries/${name}`}>{type.plural}</NavLink><Link to={`/entries/${name}/new`} className="add-new" data-title="Add New">+</Link></li>
            })}
            <li><NavLink to="/tags">Tags</NavLink><Link to="/tags/new" className="add-new" data-title="Add New">+</Link></li>
          </ul>
          <h3><IconSettings/>Settings</h3>
          <ul>
            <li><NavLink to="/settings/general">General</NavLink></li>
            <li><NavLink to="/settings/theme">Theme</NavLink></li>
            <li><NavLink to="/settings/team">Team</NavLink></li>
          </ul>
          <h3><IconCode/>Developer</h3>
          <ul>
            <li><NavLink to="#">Integrations <span className="badge-label badge-label-small badge-label-gray">Soon</span></NavLink></li>
            <li><NavLink to="#">API <span className="badge-label badge-label-small badge-label-gray">Soon</span></NavLink></li>
          </ul>
        </nav>
        <footer className="sidebar-footer">
          {this.renderProfile()}
        </footer>
      </aside>
    );
  }
}

export default connect(
  (state) => ({
    auth: state.auth,
    site: state.site
  })
)(Sidebar)
