import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

import ArrowDown from '../../visuals/Icon/svg/ic_keyboard_arrow_down.svg';
import Icon from '../../visuals/Icon';
import Menu from '../../controls/Menu';
import UserAvatar from '../UserAvatar';
import { buttonVariants } from '../../controls/Button/Button';
import { menuDimensions, defaultMenuDimension } from '../../controls/Menu/Menu';

const HELP_LINK = 'https://help.doodle.com';

const hasLabel = ({ label }) => Boolean(label);

class UserMenu extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    avatar: PropTypes.string,
    onClickLogout: PropTypes.func.isRequired,
    messages: PropTypes.shape({
      dashboard: PropTypes.node,
      account: PropTypes.node,
      help: PropTypes.node.isRequired,
      logout: PropTypes.node.isRequired,
    }).isRequired,
    customItems: PropTypes.arrayOf(
      PropTypes.shape({
        label: PropTypes.shape({ id: PropTypes.string, defaultMessage: PropTypes.string }).isRequired,
        to: PropTypes.string,
        action: PropTypes.func,
      })
    ),
    variant: PropTypes.oneOf(buttonVariants),
    dimension: PropTypes.oneOf(menuDimensions),
  };

  static defaultProps = {
    avatar: null,
    customItems: [],
    variant: 'linkWhite',
    dimension: defaultMenuDimension,
  };

  render() {
    const { name, avatar, onClickLogout, messages, customItems, variant, dimension } = this.props;

    const defaultItems = [{ label: messages.dashboard, to: '/dashboard' }, { label: messages.account, to: '/account' }];

    const menuItems = [
      ...defaultItems.filter(hasLabel),
      ...customItems,
      { label: messages.help, to: HELP_LINK },
      { label: messages.logout, action: onClickLogout },
    ];

    const menuClassNames = classnames('UserMenu', {
      [`UserMenu--${dimension}`]: dimension,
    });

    return (
      <Menu
        className={menuClassNames}
        variant={variant}
        horizontalAlign="right"
        items={menuItems}
        dimension={dimension}
      >
        <UserAvatar name={name} avatar={avatar} />
        <Icon icon={ArrowDown} />
      </Menu>
    );
  }
}

export default UserMenu;