import { BackgroundColorsTokenType, TextColorsTokenType } from '../../types/design-token.type';
import { ResponsiveType, SizeType } from '../../types/ui.type';

/**
 * Configuration options for the dropdown used by the app header button.
 *
 * This is a partial subset of the properties available on
 * `HTMLVegaDropdownElement`, allowing callers to override only the
 * settings they care about when creating a dropdown.
 */
export type VegaAppHeaderButtonDropdownConfig = Partial<
	Pick<
		HTMLVegaDropdownElement,
		| 'size'
		| 'trigger'
		| 'source'
		| 'matchTargetWidth'
		| 'maxHeight'
		| 'positionRelativeTo'
		| 'minWidth'
		| 'maxWidth'
		| 'translocation'
		| 'virtualizationThreshold'
		| 'searchable'
		| 'itemDisplayRule'
		| 'selectType'
		| 'selectedSourceKey'
		| 'resettable'
		| 'useDefaultFilter'
	>
>;

/**
 * Settings for the avatar displayed in the app header button.
 *
 * Allows providing either an image source or an icon, with optional
 * fallback text and color tokens for cases where the image fails to load.
 */
export type VegaAppHeaderAvatarConfig = {
	/**
	 * URL of the avatar image.
	 */
	src?: string;
	/**
	 * Icon name to display when no image is provided.
	 */
	icon?: string;
	/**
	 * Text to show when the image cannot be loaded.
	 */
	fallbackText?: string;
	/**
	 * Background color token to use for the fallback avatar.
	 */
	fallbackBgColor?: BackgroundColorsTokenType;
	/**
	 * Text color token to use for the fallback avatar.
	 */
	fallbackTextColor?: TextColorsTokenType;
};

/**
 * Allowed size values for the app header button.
 */
export type VegaAppHeaderButtonSize = 'default' | 'small';

/**
 * Settings for the label displayed in the app header button.
 *
 * Allows providing configuration options for the label, such as max width and display rules.
 */
export type VegaAppHeaderLabelConfig = {
	/**
	 * Maximum width of the label.
	 */
	maxWidth?: ResponsiveType<SizeType>;

	/**
	 * Rule for how to display the label when it exceeds the maximum width. Can be 'ellipsis' or 'newline'.
	 */
	displayRule?: 'newline' | 'ellipsis';
};