/*
Navigation Menu

@copyright (c) Copyright 2013-2017 Dorian Pula
@license AGPL-1.0
@author Dorian Pula [dorian.pula@amber-penguin-software.ca]
*/


import {h, Component} from 'preact';  /** @jsx h*/

import {Link} from 'react-router-dom';
import PropTypes from 'prop-types';


class NavigationMenuItem extends Component {
  static get propTypes() {
    return {
      title: PropTypes.string,
      url: PropTypes.string
    };
  }

  render() {
    return (
      <li className='nav-item'>
        <Link className='nav-link' to={ this.props.url }>{ this.props.title }</Link>
      </li>);
  }
}


export class NavigationMenu extends Component {
  static get propTypes() {
    return {
      styler: PropTypes.object,
      menu: PropTypes.arrayOf(
        PropTypes.shape({
          title: PropTypes.string,
          url: PropTypes.url
        })
      )
    };
  }

  render() {
    let navigationMenuItems = [];
    for (let menuItem of this.props.menu) {
      let menuId = `${menuItem.title.toLowerCase()}_${menuItem.url.substring(1, menuItem.url.length)}`;
      let menu = (
        <NavigationMenuItem key={ menuId } title={ menuItem.title } url={ menuItem.url }/>
      );
      navigationMenuItems.push(menu);
    }

    return (
      <ul className='nav nav-pills flex-column ice-menu' style={ this.props.styler }>
        { navigationMenuItems }
      </ul>
    );
  }
}
