import React from "react";

import { Asset, Button, ButtonGroup } from "@shared/types/micro-components";

type Color = string;

export interface Navigation {
  __typename?: "ComponentNavigation";
  primaryNavigationLogo?: Asset;
  anchorId?: string;
  primaryNavigationLinks?: (Button | ButtonGroup)[];

  supportNavigationLinks?: ButtonGroup[];

  utilityNavigationLinks?: (Button | ButtonGroup)[];

  accountNavigationLinks?: ButtonGroup[]; // limit: 1, but treat as array for consistency

  searchBarIcon?: Asset;
  searchBarPlaceholder?: string;

  navigationBackgroundColor?: Color;
  utilityNavBackgroundColor?: Color;
  utilityNavLinkColor?: Color;
  /**
   * Tailwind class (or raw class string) applied to the main nav row's
   * text color, e.g. `"text-white"` or `"text-secondary-navy500"`. Used
   * by section / secondary navbars rendered on a dark background where
   * the labels need to be inverted.
   */
  navigationLinkColor?: string;
  utilityNavActiveIndex?: number;

  callNowCtaText?: string;
  callNowCtaIcon?: Asset;

  displaySearchBar?: boolean;
  displayCallNowCta?: boolean;
  displayUtilityNavigation?: boolean;
  showCallButton?: boolean;
  showMobileSliderMenu?: boolean;
  showCallNowCtaInMainNav?: boolean;
  invocaPhoneNumberLink?: string;
  invocaPhoneNumberDisplayText?: string;
  checkPlansJSX?: React.ReactNode;
  onSearch?: (query: string) => void;
  /** When true, renders a cart icon (desktop utility nav and mobile main nav). */
  displayCartIcon?: boolean;
  /** Final URL the cart icon should navigate to (computed by the host app). */
  cartHref?: string;
  /** When true, shows a small accent dot on the cart icon (e.g. retention/cart-recovery). */
  cartHasRetention?: boolean;
  /** Optional aria-label for the cart icon link. Defaults to "Cart". */
  cartIconAriaLabel?: string;
  /** Optional callback fired when the desktop CallButton is clicked. */
  onCallClickDesktop?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
  /** Optional callback fired when the mobile CallButton is clicked. */
  onCallClickMobile?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
  /** Optional callback fired when the cart icon is clicked. */
  onCartClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
  /** Optional logo width in px. Defaults to 76.5. */
  primaryNavigationLogoWidth?: number;
  /** Optional logo height in px. Defaults to 24. */
  primaryNavigationLogoHeight?: number;
  /** When true, hides the CallButton from the mobile main nav row
   *  (the one next to the cart icon and hamburger). The drawer
   *  still renders the CallButton. Defaults to false. */
  hideMobileCallButton?: boolean;
}

export type NavigationProps = Navigation;