import { Button } from '../../components/Button/Button';
import { ButtonAppearance } from '../../components/Button/constants';
import { IconGlyph } from '../../components/Icon/constants';
import { Menu } from '../../components/Menu/Menu';
import { MenuItem } from '../../components/Menu/components/MenuItem/MenuItem';
import { MenuTrigger } from '../../components/Menu/components/MenuTrigger/MenuTrigger';
import { useTranslation } from '../../core/hooks/useTranslation';
import { useTestIdAttribute } from '../../hooks/useTestIdAttribute';
import { CommonProps } from '../../types';
import { assertEmptyObject } from '../../utils/assertEmptyObject';
import { makeTestId } from '../../utils/makeTestId';

import { CompanySelect } from './components/CompanySelect';
import { HeaderUserMenuAction } from './constants';
import { StyledHeader, StyledSection, StyledUsageInfo, TunedQuickMessageButton } from './styled';
import { HeaderCompany, HeaderUser } from './types';

export interface HeaderProps extends CommonProps {
  /** List of available companies */
  companies: HeaderCompany[];
  /** ID of selected company */
  currentCompanyId: string;
  /** Current user */
  user: HeaderUser;
  /** Function that will be invoked when current company is changed */
  onCurrentCompanyIdChange?: (companyId: string) => void;
  /** Function that will be invoked on clicking by some button in user menu */
  onUserMenuActionClick?: (action: HeaderUserMenuAction) => void;
}

/**
 * Main header that should be used in application.
 *
 * ```tsx
 * import { Header, HeaderCompany, HeaderUser } from 'ui-kit';
 *
 * const companies: HeaderCompany[] = [
 *   { label: 'SimpleTexting', id: 'ST' },
 *   { label: 'MessageMedia', id: 'MM' },
 * ];
 *
 * const user: HeaderUser = {
 *   name: 'Ivan Ivanov'
 * };
 *
 * <Header companies={companies} currentCompanyId="ST" user={user} />
 * ```
 */
export function Header(props: HeaderProps) {
  const {
    companies,
    currentCompanyId,
    user,
    onCurrentCompanyIdChange,
    onUserMenuActionClick,
    className,
    testId,
    ariaDescribedBy,
    ...rest
  } = props;
  assertEmptyObject(rest);

  const testIdAttribute = useTestIdAttribute();
  const { t } = useTranslation();

  const handleUserDropdownClick = (action: HeaderUserMenuAction) => () => {
    /* istanbul ignore else */
    if (onUserMenuActionClick) {
      onUserMenuActionClick(action);
    }
  };

  return (
    <StyledHeader aria-describedby={ariaDescribedBy} className={className} {...{ [testIdAttribute]: testId }}>
      <StyledSection $expanded>
        <CompanySelect
          companies={companies}
          currentCompanyId={currentCompanyId}
          onCurrentCompanyIdChange={onCurrentCompanyIdChange}
          testId={makeTestId(testId, 'company-select')}
        />

        <TunedQuickMessageButton
          appearance={ButtonAppearance.Primary}
          icon={IconGlyph.Sms}
          testId={makeTestId(testId, 'quick-message-button')}
        >
          {t('ui.header.quickMessage')}
        </TunedQuickMessageButton>
      </StyledSection>

      <StyledSection>
        <Button appearance={ButtonAppearance.Subtle} testId={makeTestId(testId, 'help-button')}>
          {t('ui.header.help')}
        </Button>
      </StyledSection>

      <StyledSection>
        <StyledUsageInfo {...{ [testIdAttribute]: makeTestId(testId, 'user-info') }}>
          {t('ui.header.monthlyUsage', { count: 2 })}
        </StyledUsageInfo>
      </StyledSection>

      <StyledSection>
        <Menu
          testId={makeTestId(testId, 'user-menu')}
          trigger={<MenuTrigger testId={makeTestId(testId, 'user-menu-trigger')}>{user.name}</MenuTrigger>}
        >
          <MenuItem onClick={handleUserDropdownClick(HeaderUserMenuAction.Profile)}>
            {t('ui.header.profile')}
          </MenuItem>
          <MenuItem onClick={handleUserDropdownClick(HeaderUserMenuAction.LogOut)}>
            {t('ui.header.logOut')}
          </MenuItem>
        </Menu>
      </StyledSection>
    </StyledHeader>
  );
}