import React from 'react';
import { IconMenu, IconBuffini } from '../Icon';
import { AppHeaderActions } from './AppHeaderActions';
import { AppHeaderCompany } from './AppHeaderCompany';
import { AppHeaderUpsell } from './AppHeaderUpsell';
import { UniversalMenu } from '../UniversalMenu';
import { UserMenu } from '../UserMenu';
import { EVENT_TOGGLE_APP_NAV } from '../../constants';

export declare interface IAppHeader {
  children?: any;
  className?: string;
  fullName: string;
  membership: string;
  profileImage: string;
  logoutUrl: string;
  hasUserMenu?: boolean;
  hasUniversalMenu?: boolean;
  hasNavToggle?: boolean;
  hasCompanyLogo?: boolean;
  title: string;
  baseHref?: string;
  theme?: 'light' | 'dark';
  onNavToggle?(): void;
  onTitleClick?(): void;
  [x: string]: any;
}

export interface IAppHeaderSubComponents {
  Actions: React.FC;
}

export const AppHeader: React.FC<IAppHeader> & IAppHeaderSubComponents = (props) => {
  const { children, className = '', fullName = "", membership = "", profileImage = "", logoutUrl, hasUserMenu = true, hasUniversalMenu = true, hasNavToggle = true, hasCompanyLogo = true, theme = 'dark', title, baseHref, onTitleClick, onNavToggle, ...otherProps } = props;

  function addClassNames(propClassName: string, propTheme: string) {
    let classList = 'b-app-header';
    if (propClassName && propClassName.length) {
      classList = `${classList} ${propClassName}`;
    }
    if (propTheme) {
      classList = `${classList} b-app-header-${propTheme}`;
    }
    return classList;
  }

  const handleTitleClick = (e: React.MouseEvent) => {
    if (onTitleClick) {
      e.preventDefault();
      onTitleClick();
      return;
    }
    if (baseHref) {
      window.location.href = baseHref;
    } else {
      window.location.href = '/';
    }
  };

  function handleAppNavToggle(e: React.MouseEvent) {
    document.dispatchEvent(new Event(EVENT_TOGGLE_APP_NAV));
    onNavToggle && onNavToggle();
  }

  return (
    <header className={addClassNames(className, theme)} {...otherProps}>
      <section className="b-app-header-primary">
        {hasNavToggle && (
          <button type="button" className="b-app-header-nav-toggle" onClick={handleAppNavToggle}>
            <IconMenu size="xl" color="light" />
          </button>
        )}
        <a className="b-app-header-logo" href="/" onClick={handleTitleClick}>
          {hasCompanyLogo && <AppHeaderCompany />}
          <span className="b-app-header-title">{title}</span>
        </a>
      </section>
      <AppHeaderUpsell membership={membership} />
      <section className="b-app-header-secondary">
        {children}
        {hasUserMenu && <UserMenu fullName={fullName} membership={membership} profileImage={profileImage} logoutUrl={logoutUrl} theme={theme} />}
        {hasUniversalMenu && <UniversalMenu fullName={fullName} membership={membership} profileImage={profileImage} logoutUrl={logoutUrl} theme={theme} />}
      </section>
    </header>
  );
};
AppHeader.Actions = AppHeaderActions;