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

import commonMessages from '@doodle/common-messages';

import Menu from '../../../controls/Menu/Menu';
import Icon from '../../../visuals/Icon';
import AddIcon from '../../../visuals/Icon/svg/ic_add.svg';
import Button from '../../../controls/Button/Button';
import pickDataAttributes from '../../../utils/pickDataAttributes';
import { translate, translateMenuItems } from '../../../utils/translate';
import { userPropType, isLoggedIn } from '../../../utils/user';

const defaultMenuItems = [
  {
    label: commonMessages.groupMeeting,
    to: '/create',
    'data-tracking': 'true',
    'data-ga-action': 'clickedHomepageCreateDatepoll',
    'data-ga-category': 'userInteraction',
  },
  {
    label: commonMessages.oneOnOneMeeting,
    to: '/meetme/qc/new',
    'data-tracking': 'true',
    'data-ga-action': 'clickedHomepageCreateD11',
    'data-ga-category': 'userInteraction',
  },
  {
    label: commonMessages.survey,
    to: '/create-choice',
    'data-tracking': 'true',
    'data-ga-action': 'clickedHomepageCreateTextpoll',
    'data-ga-category': 'userInteraction',
  },
];

const CreatePollMenu = ({ user, onClickCreatePoll, onClickCreateOneOnOne, onClickCreateSurvey, intl }) => {
  const showMenu = isLoggedIn(user) && (!user.loading && !user.error);

  const menuItems = translateMenuItems(defaultMenuItems, intl);
  menuItems[0].to = onClickCreatePoll ? null : menuItems[0].to;
  menuItems[0].action = onClickCreatePoll;
  menuItems[1].to = onClickCreateOneOnOne ? null : menuItems[1].to;
  menuItems[1].action = onClickCreateOneOnOne;
  menuItems[2].to = onClickCreateSurvey ? null : menuItems[2].to;
  menuItems[2].action = onClickCreateSurvey;

  // For logged-in users, make the button a dropdown menu with three options...
  if (showMenu) {
    return (
      <Menu items={menuItems} horizontalAlign="right" dimension="compact" variant="accent">
        <Icon icon={AddIcon} />
        <span className="CreatePollMenu-createMenuLabel">{translate(commonMessages.create, intl)}</span>
      </Menu>
    );
  }

  // ...but for anonymous users, it should immediately create a Doodle
  const item = menuItems[0];
  return (
    <Button
      className="CreatePollMenu-createButton"
      variant="accent"
      dimension="compact"
      href={item.to}
      onClick={item.action}
      {...pickDataAttributes(item)}
    >
      <Icon icon={AddIcon} />
      <span className="CreatePollMenu-createMenuLabel">{translate(commonMessages.createDoodle, intl)}</span>
    </Button>
  );
};

CreatePollMenu.propTypes = {
  user: userPropType,
  /** Will override default '/create' href in Create Poll menu if specified. */
  onClickCreatePoll: PropTypes.func,
  /** Will override default '/meetme/qc/new' href in Create Poll menu if specified. */
  onClickCreateOneOnOne: PropTypes.func,
  /** Will override default '/create-choice' href in Create Poll menu if specified. */
  onClickCreateSurvey: PropTypes.func,
  intl: PropTypes.object,
};

CreatePollMenu.defaultProps = {
  user: null,
  onClickCreatePoll: null,
  onClickCreateOneOnOne: null,
  onClickCreateSurvey: null,
  intl: null,
};

CreatePollMenu.displayName = 'CreatePollMenu';

export default CreatePollMenu;