/**
 * The navigation header used for all landing pages.
 */

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

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

import { userPropType, isLoggedIn as checkIfLoggedIn } from '../../utils/user';
import Header from '../Header';
import { Button } from '../../controls/Button';
import LogoLink from '../../visuals/LogoLink';
import CreatePollMenu from './CreatePollMenu';
import HamburgerMenu from './HamburgerMenu';
import { translateMenuItems } from '../../utils/translate';
import pickDataAttributes from '../../utils/pickDataAttributes';
import Menu from '../../controls/Menu/Menu';
import Icon from '../../visuals/Icon';
import ArrowDownIcon from '../../visuals/Icon/svg/ic_keyboard_arrow_down.svg';
import HeaderWidget from '../../user/HeaderWidget';
import { submenuKey } from './constants';

export const getDefaultNavLinks = page => [
  {
    label: commonMessages.features,
    to: '/en/features',
    'data-tracking': 'true',
    'data-ga-action': 'clickProduct',
    'data-ga-category': 'userInteraction',
    'data-ga-label': page,
  },
  {
    label: commonMessages.solutions,
    submenu: [
      {
        label: commonMessages.solutionsRecruiting,
        to: '/en/solutions/recruiting',
      },
      {
        label: commonMessages.solutionsBoardMeetings,
        to: '/en/solutions/board-meetings',
      },
      {
        label: commonMessages.solutionsSales,
        to: '/en/solutions/sales',
      },
      {
        label: commonMessages.solutionsEducation,
        to: '/en/solutions/education',
      },
      {
        label: commonMessages.solutionsNonProfit,
        to: '/en/solutions/non-profit',
      },
      {
        label: commonMessages.solutionsConsultants,
        to: '/en/solutions/consultants',
      },
      {
        label: commonMessages.solutionsEnterprise,
        to: '/en/solutions/enterprise',
      },
    ],
  },
  {
    label: commonMessages.pricing,
    to: '/premium',
    'data-tracking': 'true',
    'data-ga-action': 'clickPricing',
    'data-ga-category': 'userInteraction',
    'data-ga-label': page,
  },
  {
    label: commonMessages.integrations,
    to: '/en/integrations',
    'data-tracking': 'true',
    'data-ga-action': 'clickIntegrations',
    'data-ga-category': 'userInteraction',
    'data-ga-label': page,
  },
  {
    label: commonMessages.resources,
    submenu: [
      {
        label: commonMessages.resourceCenter,
        to: '/en/resources',
        'data-tracking': 'true',
        'data-ga-action': 'clickResources',
        'data-ga-category': 'userInteraction',
        'data-ga-label': page,
      },
      {
        label: commonMessages.blog,
        to: 'https://blog.doodle.com/',
      },
    ],
  },
  {
    label: commonMessages.contact,
    submenu: [
      {
        label: commonMessages.sales,
        to: 'https://landing.doodle.com/contact-sales',
        'data-tracking': 'true',
        'data-ga-action': 'contactSales',
        'data-ga-category': 'userInteraction',
        'data-ga-label': page,
        'data-amplitude-type': 'user Interaction',
        'data-amplitude-name': 'Click Contact Sales',
        'data-amplitude-properties': JSON.stringify({
          'Contact Sales': 'Header',
          'Event description': 'user clicks on the "Contact Sales” link placed in the header or in the footer',
        }),
      },
      {
        label: commonMessages.helpAndSupport,
        to: 'https://help.doodle.com',
      },
    ],
  },
];

const Navigation = ({
  links,
  user,
  theme,
  hideCreatePollMenu,
  onClickLogin,
  onClickLogout,
  onClickSignup,
  onClickCreatePoll,
  onClickCreateOneOnOne,
  onClickCreateSurvey,
  page,
  intl,
}) => {
  let navLinks = links || getDefaultNavLinks(page);
  navLinks = translateMenuItems(navLinks, intl);

  // Transform menu items to Menu and Link elements
  const navElements = navLinks.map(itemOrElement => {
    if (React.isValidElement(itemOrElement)) {
      return itemOrElement;
    }
    if (submenuKey in itemOrElement) {
      const { label: menuTitle, submenu } = itemOrElement;
      // Only items as props objects supported here, not elements, due to Menu API
      return (
        <Menu items={submenu} horizontalAlign="left" dimension="compact" variant="linkDark">
          {menuTitle}
          <Icon icon={ArrowDownIcon} />
        </Menu>
      );
    }
    const { label, to, ...rest } = itemOrElement;
    return (
      <Button href={to} variant="linkDark" dimension="compact" {...pickDataAttributes(rest)}>
        {label}
      </Button>
    );
  });

  const isLoggedIn = checkIfLoggedIn(user);
  const headerLeft = [<LogoLink redirectUrl="/en/" />, ...navElements];
  const headerRight = [
    <HeaderWidget
      username={null} // hide username by design
      userAvatar={isLoggedIn ? user.data.avatarSmallUrl : null}
      isLoggedIn={isLoggedIn}
      onClickLogin={onClickLogin}
      onClickLogout={onClickLogout}
      onClickSignup={onClickSignup}
    />,
    <CreatePollMenu
      user={user}
      onClickCreatePoll={onClickCreatePoll}
      onClickCreateOneOnOne={onClickCreateOneOnOne}
      onClickCreateSurvey={onClickCreateSurvey}
      intl={intl}
    />,
    <HamburgerMenu
      className="Navigation-hamburgerMenu"
      items={navLinks}
      user={user}
      onClickLogin={onClickLogin}
      onClickLogout={onClickLogout}
      onClickSignup={onClickSignup}
    />,
  ];

  if (hideCreatePollMenu) {
    headerRight.splice(1, 1);
  }

  return <Header theme={theme} left={headerLeft} right={headerRight} />;
};

Navigation.propTypes = {
  links: PropTypes.array,
  user: userPropType,
  theme: PropTypes.oneOf(['white', 'transparent']),
  hideCreatePollMenu: PropTypes.bool,
  /** Will override default '/login' href if specified. */
  onClickLogin: PropTypes.func,
  /** Will override default '/logout' href if specified. */
  onClickLogout: PropTypes.func,
  /** Will override default '/signup' href if specified. */
  onClickSignup: PropTypes.func,
  /** 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,
  page: PropTypes.string.isRequired, // used for tracking
  intl: PropTypes.object,
};

Navigation.defaultProps = {
  links: null,
  user: null,
  theme: 'transparent',
  hideCreatePollMenu: false,
  onClickLogin: null,
  onClickLogout: null,
  onClickSignup: null,
  onClickCreatePoll: null,
  onClickCreateOneOnOne: null,
  onClickCreateSurvey: null,
  intl: null,
};

Navigation.displayName = 'Navigation';

export default Navigation;