import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import '../base';
import styles from './Menu.styl';
import menuItemStyles from './Menu.Item.styl';
import MenuItem from './Menu.Item';
import Collapsible from './Collapsible';

Menu.Item = MenuItem;


export default function Menu({ primary, open, triangle, triangleCentered, shadow, children, defaultHeight, containerStyle, style, ...props }) {
  const classes = classNames({
    [styles.menu]: true,
    [styles.triangle]: triangle && open,
    [styles.triangleCentered]: triangleCentered && triangle && open,
    [styles.shadow]: shadow && open,
    [menuItemStyles.secondary]: !primary,
    [menuItemStyles.menu]: true
  });

  return (
    <div className={classes} style={containerStyle}>
      <Collapsible
        open={open}
        style={style}
        className={styles.collapsible}
        defaultHeight={defaultHeight}
      >
        {children}
      </Collapsible>
    </div>
  );
}

Menu.propTypes = {
  children: PropTypes.node,
  primary: PropTypes.bool,
  open: PropTypes.bool,
  tiangle: PropTypes.bool,
  shadow: PropTypes.bool,
  defaultHeight: PropTypes.number,
  // eslint-disable-next-line react/forbid-prop-types
  style: PropTypes.object
};

Menu.defaultProps = {
  children: undefined,
  primary: undefined,
  open: undefined,
  tiangle: undefined,
  shadow: undefined,
  defaultHeight: undefined,
  style: undefined
};