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

import { messages as commonMessages } from '@doodle/common-messages';
import Button from '../../controls/Button/Button';
import Menu from '../../controls/Menu';
import Icon from '../../visuals/Icon';
import { translate, translateMenuItems } from '../../utils/translate';
import { TrackingClientShape } from '../../propTypes';
import pickDataAttributes from '../../utils/pickDataAttributes';
import { userPropType, isLoggedIn } from '../../utils/user';
import AddIcon from '../../visuals/Icon/svg/ic_add.svg';

const baseTrackingIntent = {
  track: {
    type: 'user Interaction',
    properties: { category: 'Global Header' },
  },
};

const CreatePollMenuDropdown = ({
  baseUrl,
  user,
  intl,
  onClickCreateSurvey,
  onClickCreatePoll,
  onClickCreateOneOnOne,
  onClickCreateBookableCalendar,
  trackingClient,
}) => {
  async function handleClickCreatePoll() {
    if (trackingClient) {
      const trackingIntent = {
        track: {
          ...baseTrackingIntent.track,
          event: 'Click Create Date Poll',
        },
      };

      await trackingClient.track({ trackingIntent });
    }

    onClickCreatePoll();
  }

  async function handleClickCreateOneOnOne() {
    if (trackingClient) {
      const trackingIntent = {
        track: {
          ...baseTrackingIntent.track,
          event: 'Click Create D11',
        },
      };

      await trackingClient.track({ trackingIntent });
    }

    onClickCreateOneOnOne();
  }

  async function handleClickCreateSurvey() {
    if (trackingClient) {
      const trackingIntent = {
        track: {
          ...baseTrackingIntent.track,
          event: 'Click Create Text Poll',
        },
      };

      await trackingClient.track({ trackingIntent });
    }

    onClickCreateSurvey();
  }

  async function handleClickCreateBookableCalendar() {
    if (trackingClient) {
      const trackingIntent = {
        track: {
          ...baseTrackingIntent.track,
          event: 'Click Create Bookable Calendar',
        },
      };

      await trackingClient.track({ trackingIntent });
    }

    onClickCreateBookableCalendar();
  }

  const showMenu = isLoggedIn(user) && !user.loading && !user.error;

  // Only use '_blank' when a baseUrl is an absolute url. This keeps
  // the convention on same-tab navigation for relative urls, but forces
  // a new tab in environmentw where same-tab navigation is not possible
  // (or ideal) like the Outlook Add-in via Outlook Desktop.
  const hasAbsoluteBaseRef = baseUrl?.indexOf('http') === 0;
  const target = hasAbsoluteBaseRef ? '_blank' : null;

  const defaultMenuItems = [
    {
      label: commonMessages.groupMeeting,
      description: commonMessages.groupMeetingDescription,
      'data-testid': 'navigation-menu-create-date-poll',
      to: `${baseUrl}/create`,
      action: handleClickCreatePoll,
      target,
    },
    {
      label: commonMessages.bookableCalendar,
      description: commonMessages.bookableCalendarDescription,
      'data-testid': 'navigation-menu-create-bookable-calendar',
      to: `${baseUrl}/mm/new`,
      action: handleClickCreateBookableCalendar,
      target,
    },
    {
      label: commonMessages.oneOnOneMeeting,
      description: commonMessages.oneOnOneMeetingDescription,
      'data-testid': 'navigation-menu-create-d11',
      to: `${baseUrl}/meetme/qc/new`,
      action: handleClickCreateOneOnOne,
      target,
    },
    {
      label: commonMessages.survey,
      description: commonMessages.surveyDescription,
      'data-testid': 'navigation-menu-create-text-poll',
      to: `${baseUrl}/create-choice`,
      action: handleClickCreateSurvey,
      target,
    },
  ];

  const menuItems = translateMenuItems(defaultMenuItems, intl);

  // For logged-in users, make the button a dropdown menu with three options...
  if (showMenu) {
    return (
      <Menu className="CreatePollMenu" 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 createDoodleMenuItem = menuItems[0];
  return (
    <Button
      className="CreatePollMenu-createButton"
      variant="accent"
      dimension="compact"
      href={createDoodleMenuItem.to}
      onClick={createDoodleMenuItem.action}
      {...pickDataAttributes(createDoodleMenuItem)}
    >
      <Icon icon={AddIcon} />
      <span className="CreatePollMenu-createMenuLabel">{translate(commonMessages.createDoodle, intl)}</span>
    </Button>
  );
};

CreatePollMenuDropdown.propTypes = {
  /**
   * Sets the base url for the target environment (staging, devbox, prod, etc)
   * Otherwise the default is an empty string to allow for relative urls
   */
  baseUrl: PropTypes.string,

  /** 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 custom tracking.
   */
  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 custom tracking.
   */
  onClickCreateOneOnOne: PropTypes.func,

  /**
   * Callback executed when the user clicks on the "Survey" button.
   * It can be overridden to add custom functionality such as custom tracking.
   */
  onClickCreateSurvey: PropTypes.func,

  /**
   * Callback executed when the user clicks on the "Bookable calendar" button.
   * It can be overridden to add custom functionality such as custom tracking.
   */
  onClickCreateBookableCalendar: PropTypes.func,

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

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

CreatePollMenuDropdown.defaultProps = {
  baseUrl: '',
  user: null,
  onClickCreatePoll: () => {},
  onClickCreateOneOnOne: () => {},
  onClickCreateSurvey: () => {},
  onClickCreateBookableCalendar: () => {},
  trackingClient: null,
  intl: null,
};

CreatePollMenuDropdown.displayName = 'CreatePollMenuDropdown';

export default CreatePollMenuDropdown;