/**
 * @copyright 2016-present, Prometheus Research, LLC
 */

import * as React from 'react';
import {VBox} from '@prometheusresearch/react-box';

import {css, style} from '../stylesheet';
import theme from './theme';

import ButtonBase from '../ButtonBase';
import PrimaryButton from './PrimaryButton';

let PrimaryMenuContainer = style(VBox, {
  position: 'absolute',
  top: theme.header.height,
  background: theme.headerMenu.background,
  zIndex: 1000,
  minWidth: 200,
  paddingTop: 10,
  paddingBottom: 10,
  boxShadow: css.boxShadow(0, 8, 16, 0, css.rgba(0, 0, 0, 0.2)),
});

export let PrimaryMenuItem = style(ButtonBase, {
  Root: {
    Component: 'a',
    cursor: css.cursor.pointer,
    fontWeight: 400,
    fontSize: '9pt',
    color: theme.header.text,
    background: theme.headerMenu.background,
    border: css.none,
    padding: css.padding(10, 10, 10, 30),
    focus: {
      outline: css.none,
    },
    hover: {
      background: theme.headerMenu.hover.background
    },
    selected:{
      background: theme.subHeader.background,
      hover: {
        background: theme.subHeader.background,
      }
    },
  }
});

export class PrimaryMenu extends React.Component {

  static defaultProps = {
    items: []
  };

  constructor(props) {
    super(props);
    this.state = {open: false};
  }

  render() {
    let {
      children,
      items,
      variant,
      ...props
    } = this.props;
    let {open} = this.state;
    return (
      <VBox
        {...props}
        onMouseEnter={this.onMouseEnter}
        onMouseLeave={this.onMouseLeave}>
        <PrimaryButton variant={{...variant, open}}>
          {children}
        </PrimaryButton>
        {open &&
          <PrimaryMenuContainer>
            {items}
          </PrimaryMenuContainer>}
      </VBox>
    );
  }

  onMouseEnter = () => {
    this.setState({open: true});
  };

  onMouseLeave = () => {
    if (!this.props.open) {
      this.setState({open: false});
    }
  };
}

@@ -1348,16 +1348,28 @@
 ildren,%0A
+      href,%0A
       it
@@ -1373,16 +1373,16 @@
  items,%0A
-
       va
@@ -1518,16 +1518,31 @@
 eEnter=%7B
+items.length ? 
 this.onM
@@ -1550,16 +1550,23 @@
 useEnter
+ : null
 %7D%0A      
@@ -1581,16 +1581,31 @@
 eLeave=%7B
+items.length ? 
 this.onM
@@ -1613,16 +1613,23 @@
 useLeave
+ : null
 %7D%3E%0A     
@@ -1674,16 +1674,28 @@
 , open%7D%7D
+ href=%7Bhref%7D
 %3E%0A      

make first level menu items support hyperlinks