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';
import navigateToUrl from '../../../utils/helper';

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

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

  /**
   * Handles calling the onClickCreatePoll and passes the default behaviour
   * into the onClickCreatePoll callback as an argument.
   * To override or add behaviour, see onClickCreatePoll prop.
   */
  function handleClickCreatePoll() {
    onClickCreatePoll(() => navigateToUrl('/create'));
  }

  /**
   * Handles calling the onClickCreateOneOnOne and passes the default behaviour
   * into the onClickCreateOneOnOne callback as an argument.
   * To override or add behaviour, see onClickCreateOneOnOne prop.
   */
  function handleClickCreateOneOnOne() {
    onClickCreateOneOnOne(() => navigateToUrl('/meetme/qc/new'));
  }

  /**
   * Handles calling the onClickCreateSurvey and passes the default behaviour
   * into the onClickCreateSurvey callback as an argument.
   * To override or add behaviour, see onClickCreateSurvey prop.
   */
  function handleClickCreateSurvey() {
    onClickCreateSurvey(() => navigateToUrl('/create-choice'));
  }

  menuItems[0].action = handleClickCreatePoll;
  menuItems[1].action = handleClickCreateOneOnOne;
  menuItems[2].action = handleClickCreateSurvey;

  // 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 = {
  /** Defines the user and the shape of the data. */
  user: userPropType,

  /**
   * Callback executed when the user clicks on the "Group meeting" button.
   * It can be overridden to add custom functionality such as tracking.
   * You can execute the default button behaviour within onClickCreatePoll by running
   * the function provided as first parameter. If your custom code is asynchronous,
   * run the default behaviour as callback of your asynchronous action. This guarantees
   * that your custom action completes before navigating to another page.
   * @param {Function} defaultBehaviour - Function to execute the default click behaviour
   */
  onClickCreatePoll: PropTypes.func,

  /**
   * Callback executed when the user clicks on the "1:1 meeting" button.
   * It can be overridden to add custom functionality such as tracking.
   * You can execute the default button behaviour within onClickCreateOneOnOne by running
   * the function provided as first parameter. If your custom code is asynchronous,
   * run the default behaviour as callback of your asynchronous action. This guarantees
   * that your custom action completes before navigating to another page.
   * @param {Function} defaultBehaviour - Function to execute the default click behaviour
   */
  onClickCreateOneOnOne: PropTypes.func,

  /**
   * Callback executed when the user clicks on the "Survey" button.
   * It can be overridden to add custom functionality such as tracking.
   * You can execute the default button behaviour within onClickCreateSurvey by running
   * the function provided as first parameter. If your custom code is asynchronous,
   * run the default behaviour as callback of your asynchronous action. This guarantees
   * that your custom action completes before navigating to another page.
   * @param {Function} defaultBehaviour - Function to execute the default click behaviour
   */
  onClickCreateSurvey: PropTypes.func,

  /** An object used for internationalization. */
  intl: PropTypes.object,
};

CreatePollMenu.defaultProps = {
  user: null,
  onClickCreatePoll: defaultBehaviour => defaultBehaviour(),
  onClickCreateOneOnOne: defaultBehaviour => defaultBehaviour(),
  onClickCreateSurvey: defaultBehaviour => defaultBehaviour(),
  intl: null,
};

CreatePollMenu.displayName = 'CreatePollMenu';

export default CreatePollMenu;