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

import { messages as commonMessages } from '@doodle/common-messages';

import Button from '../../../controls/Button/Button';
import { TrackingClientShape } from '../../../propTypes';
import navigateToUrl from '../../../utils/helper';
import pickDataAttributes from '../../../utils/pickDataAttributes';
import { translate, translateMenuItems } from '../../../utils/translate';
import { userPropType, isLoggedIn } from '../../../utils/user';
import Icon from '../../../visuals/Icon';
import AddIcon from '../../../visuals/Icon/svg/ic_add.svg';
import MeetingTypeSelector from '../MeetingTypeSelector';

const defaultMenuItems = [
  {
    label: commonMessages.groupMeeting,
    description: commonMessages.groupMeetingDescription,
    'data-testid': 'navigation-menu-create-date-poll',
  },
  {
    label: commonMessages.bookingPage,
    description: commonMessages.bookingPageDescription,
    'data-testid': 'navigation-menu-create-bookable-calendar',
  },
  {
    label: commonMessages.oneOnOneMeeting,
    description: commonMessages.oneOnOneMeetingDescription,
    'data-testid': 'navigation-menu-create-d11',
  },
  {
    label: commonMessages.survey,
    description: commonMessages.surveyDescription,
    'data-testid': 'navigation-menu-create-text-poll',
  },
];

const baseTrackingIntent = page => ({
  track: {
    type: 'user Interaction',
    properties: { category: 'Global Header', label: page, page },
  },
});

const isSchedExEnabled = user => user && user.data && user.data.schedExWhitelisted;

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

  const baseTrack = baseTrackingIntent(page).track;

  /**
   * Handles calling the onClickCreatePoll and passes the default behaviour
   * into the onClickCreatePoll callback as an argument.
   * To override or add behaviour, see onClickCreatePoll prop.
   */
  async function handleClickCreatePoll() {
    if (trackingClient) {
      const trackingIntent = {
        track: {
          ...baseTrack,
          event: 'Click Create Date Poll',
        },
      };

      await trackingClient.track({ trackingIntent });
    }

    const urlToNavigate = isSchedExEnabled(user) ? '/meeting/organize/groups' : '/create';

    onClickCreatePoll(() => navigateToUrl(urlToNavigate));
  }

  /**
   * Handles calling the onClickCreateOneOnOne and passes the default behaviour
   * into the onClickCreateOneOnOne callback as an argument.
   * To override or add behaviour, see onClickCreateOneOnOne prop.
   */
  async function handleClickCreateOneOnOne() {
    if (trackingClient) {
      const trackingIntent = {
        track: {
          ...baseTrack,
          event: 'Click Create D11',
        },
      };

      await trackingClient.track({ trackingIntent });
    }

    const urlToNavigate = isSchedExEnabled(user) ? '/meeting/organize/1-1' : '/meetme/qc/new';

    onClickCreateOneOnOne(() => navigateToUrl(urlToNavigate));
  }

  /**
   * Handles calling the onClickCreateSurvey and passes the default behaviour
   * into the onClickCreateSurvey callback as an argument.
   * To override or add behaviour, see onClickCreateSurvey prop.
   */
  async function handleClickCreateSurvey() {
    if (trackingClient) {
      const trackingIntent = {
        track: {
          ...baseTrack,
          event: 'Click Create Text Poll',
        },
      };

      await trackingClient.track({ trackingIntent });
    }

    onClickCreateSurvey(() => navigateToUrl('/create-choice'));
  }

  /**
   * Handles calling the onClickCreateBookingPage and passes the default behaviour
   * into the onClickCreateBookingPage callback as an argument.
   * To override or add behaviour, see onClickCreateBookingPage prop.
   */
  async function handleClickCreateBookingPage() {
    if (trackingClient) {
      const trackingIntent = {
        track: {
          ...baseTrack,
          event: 'Click Create Booking Page',
        },
      };

      await trackingClient.track({ trackingIntent });
    }

    const urlToNavigate = isSchedExEnabled(user) ? '/meeting/organize/booking-page' : '/mm/new';

    onClickCreateBookingPage(() => navigateToUrl(urlToNavigate));
  }

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

  function TriggerButton({ onClick }) {
    return (
      <Button
        className="CreatePollMenu-createButton"
        variant="accent"
        dimension="compact"
        onClick={onClick}
        data-testid="navigation-create-button"
      >
        <Icon icon={AddIcon} />
        <span className="CreatePollMenu-createMenuLabel">{translate(commonMessages.create, intl)}</span>
      </Button>
    );
  }

  TriggerButton.propTypes = {
    onClick: PropTypes.func.isRequired,
  };

  // For logged-in users, show the MeetingTypeSelector...
  if (showMenu) {
    return (
      <MeetingTypeSelector
        onCreatePoll={handleClickCreatePoll}
        onCreateOneOnOne={handleClickCreateOneOnOne}
        onCreateBookingPage={handleClickCreateBookingPage}
        onCreateSurvey={handleClickCreateSurvey}
        TriggerButton={TriggerButton}
        intl={intl}
      />
    );
  }

  // ...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,

  /**
   * Callback executed when the user clicks on the "Bookable calendar" button.
   * It can be overridden to add custom functionality such as tracking.
   * You can execute the default button behaviour within onClickCreateBookingPage 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
   */
  onClickCreateBookingPage: PropTypes.func,

  /** An initialized instance of lib-tracking client */
  trackingClient: TrackingClientShape,

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

  /** Page that the button will be added in - this prop is used for tracking purposes. */
  page: PropTypes.string.isRequired,
};

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

CreatePollMenu.displayName = 'CreatePollMenu';

export default CreatePollMenu;