import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import commonMessages from '@doodle/common-messages';

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';
import { translateMenuItems } from '../../utils/translate';

// The menu items will always appear in the order defined here. Any custom items
// will be inserted in the middle, in-between the 2nd and 3rd item here.
export const defaultItems = [
  {
    label: commonMessages.dashboard,
    to: '/dashboard',
  },
  {
    label: commonMessages.account,
    to: '/account',
  },
  {
    label: commonMessages.contactSupport,
    to: 'https://help.doodle.com',
  },
  {
    label: commonMessages.logout,
    to: '/logout',
    // action added in render method
  },
];

class UserMenu extends Component {
  static propTypes = {
    name: PropTypes.string,
    avatar: PropTypes.string,
    /** Will override default '/logout' href if specified. */
    onClickLogout: PropTypes.func,
    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),
    intl: PropTypes.object,
  };

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

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

    const translatedDefaultItems = translateMenuItems(defaultItems, intl);
    const translatedCustomItems = translateMenuItems(customItems, intl);

    const menuItems = [
      translatedDefaultItems[0],
      translatedDefaultItems[1],
      ...translatedCustomItems,
      translatedDefaultItems[2],
      {
        ...translatedDefaultItems[3],
        to: onClickLogout ? null : translatedDefaultItems[3].to,
        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;