import React from 'react';
import styled from 'styled-components';

import type { ResolvedNavLinkItem } from '@redocly/config';

import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
import { LoginButton } from '@redocly/theme/components/UserMenu/LoginButton';
import { UserAvatar } from '@redocly/theme/components/UserMenu/UserAvatar';
import { UserInfoMenuItem } from '@redocly/theme/components/UserMenu/UserInfoMenuItem';
import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
import { LogoutMenuItem } from '@redocly/theme/components/UserMenu/LogoutMenuItem';
import { breakpoints } from '@redocly/theme/core/utils';

export type UserMenuProps = {
  className?: string;
};

export function UserMenu({ className }: UserMenuProps) {
  const { userMenu } = useThemeConfig<{
    userMenu: {
      menu?: ResolvedNavLinkItem[];
    };
  }>();
  const { useTranslate, useUserMenu } = useThemeHooks();
  const { userData, loginUrl } = useUserMenu();
  const { translate } = useTranslate();

  if (!userData?.isAuthenticated) {
    if (loginUrl && !userMenu?.hideLoginButton) {
      return (
        <UserMenuWrapper data-component-name="UserMenu/UserMenu">
          <LoginButton href={loginUrl} data-testid="login-btn" />
        </UserMenuWrapper>
      );
    } else {
      return null;
    }
  }

  const menuItems = userMenu?.['menu'] || [];

  const customItems = menuItems.map((item) => (
    <DropdownMenuItem key={item.label} external={item.external} to={item.link || ''}>
      {item.labelTranslationKey ? translate(item.labelTranslationKey) : item.label}
    </DropdownMenuItem>
  ));

  const items = [
    <UserInfoMenuItem
      name={userData.name}
      picture={userData.picture}
      email={userData.email}
      key="userinfo"
    />,
    <DropdownMenuItem separatorLine={true} separator key="separator" />,
    ...customItems,
    <LogoutMenuItem key="logout" />,
  ];

  return (
    <UserMenuWrapper data-component-name="UserMenu/UserMenu">
      <StyledDropdown
        className={className}
        alignment="end"
        trigger={
          <UserMenuTrigger role="button" tabIndex={0} aria-label="User menu">
            <UserAvatar picture={userData.picture} />
          </UserMenuTrigger>
        }
      >
        <DropdownMenu>{items}</DropdownMenu>
      </StyledDropdown>
    </UserMenuWrapper>
  );
}

const UserMenuWrapper = styled.div`
  display: none;

  @media screen and (min-width: ${breakpoints.medium}) {
    display: block;
  }
`;

const UserMenuTrigger = styled.div.attrs<{ 'data-testid': string }>({
  'data-testid': 'user-menu-button',
})`
  display: flex;
  align-items: center;
  cursor: pointer;
  width: auto;
  padding: 0;
`;

const StyledDropdown = styled(Dropdown).attrs<{ 'data-testid': string }>({
  dataAttributes: {
    'data-testid': 'user-menu-dropdown',
  },
})`
  --dropdown-menu-font-size: var(--user-menu-dropdown-font-size);
  --dropdown-menu-font-weight: var(--user-menu-dropdown-font-weight);
  --dropdown-menu-line-height: var(--user-menu-dropdown-line-height);
  --dropdown-menu-text-color: var(--user-menu-dropdown-text-color);
  --dropdown-menu-min-width: var(--user-menu-dropdown-min-width);
  --dropdown-menu-max-width: var(--user-menu-dropdown-max-width);
  --dropdown-menu-max-height: var(--user-menu-dropdown-max-height);
  --dropdown-menu-padding: var(--user-menu-dropdown-padding);
  --dropdown-menu-border-radius: var(--user-menu-dropdown-border-radius);
  --dropdown-menu-box-shadow: var(--user-menu-dropdown-box-shadow);
  --dropdown-menu-border-color: var(--user-menu-dropdown-border-color);
  --dropdown-menu-bg-color: var(--user-menu-dropdown-bg-color);
  --dropdown-menu-item-padding-horizontal: var(--user-menu-dropdown-item-padding-horizontal);
  --dropdown-menu-item-padding-vertical: var(--user-menu-dropdown-item-padding-vertical);
  --dropdown-menu-item-separator-padding-top: var(--user-menu-dropdown-item-separator-padding-top);
  --dropdown-menu-item-separator-padding-bottom: var(
    --user-menu-dropdown-item-separator-padding-bottom
  );
  --dropdown-menu-item-border-radius: var(--user-menu-dropdown-item-border-radius);
  --dropdown-menu-item-bg-color-active: var(--user-menu-dropdown-item-bg-color-active);
  --dropdown-menu-item-bg-color-hover: var(--user-menu-dropdown-item-bg-color-hover);
  --dropdown-menu-item-bg-color-disabled: var(--user-menu-dropdown-item-bg-color-disabled);
  --dropdown-menu-item-separator-border-color: var(--user-menu-dropdown-item-separator-border-color);
  --dropdown-menu-item-color-dangerous: var(--user-menu-dropdown-item-color-dangerous);
  --dropdown-menu-item-color-disabled: var(--user-menu-dropdown-item-color-disabled);
  --dropdown-menu-item-color-active: var(--user-menu-dropdown-item-color-active);
  --dropdown-menu-item-color-hover: var(--user-menu-dropdown-item-color-hover);
`;