import Button from "@ui5/webcomponents/dist/Button.js";
import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
import type ShellBar from "../../ShellBar.js";

function ShellBarSearchField(this: ShellBar) {
	return (
		// .ui5-shellbar-search-field-area is used to measure the width of
		// the search field. It must be present even if the search is in full-width mode.
		<div class="ui5-shellbar-search-field-area">
			{this.showSearchField && !this.showFullWidthSearch && (
				<div class="ui5-shellbar-search-field ui5-shellbar-gap-start">
					<slot name="searchField"></slot>
				</div>
			)}
		</div>
	);
}

function ShellBarSearchFieldFullWidth(this: ShellBar) {
	return (
		<div class="ui5-shellbar-search-full-width-wrapper">
			<div class="ui5-shellbar-search-full-field">
				<slot name="searchField"></slot>
			</div>
			<Button
				class="ui5-shellbar-cancel-button ui5-shellbar-gap-start"
				design={ButtonDesign.Transparent}
				onClick={this.handleCancelButtonClick}
			>
				Cancel
			</Button>
		</div>
	);
}

function ShellBarSearchButton(this: ShellBar) {
	const searchAction = this.getAction("search");
	return (
		<>
			{!this.hideSearchButton && (
				<Button
					data-ui5-stable={searchAction?.stableDomRef}
					class="ui5-shellbar-search-button ui5-shellbar-action-button ui5-shellbar-gap-start ui5-shellbar-search-toggle"
					icon={searchAction?.icon}
					design="Transparent"
					onClick={this.handleSearchButtonClick}
					tooltip={this.actionsAccessibilityInfo.search.title}
					aria-expanded={this.showSearchField}
					accessibilityAttributes={this.actionsAccessibilityInfo.search.accessibilityAttributes}
				/>
			)}
		</>

	);
}

export {
	ShellBarSearchField,
	ShellBarSearchButton,
	ShellBarSearchFieldFullWidth,
};
