@use "sass:math";
@import "../../../css/ui-constants";

$baseFontSize: 14px;

$assumedRem: 16px;
$resultFontSize: 14px/$assumedRem * 1rem;
$metaFontSize: 12px/$assumedRem * 1rem;
$resultLineHeight: 17px/$assumedRem * 1rem;

$resultTopPadding: 5px;
$resultBottomPadding: $resultTopPadding;

//Some padding is added to tabs to leave space for "focused control" outlines.
$internalTabPadding: 2px;
//Common horizontal padding for main content areas.
$commonLeftPadding: 14px - $internalTabPadding;

$generalBorderColor: #B9BDC9;
$innerBorderColor: #EBECF0;
$darkPanelBackground: #F9F9F9;
$mutedMarginalTextColor: #555;

$appMaxHeight: min(calc(100vh - var(--wp-admin--admin-bar--height, 32px) - 1px), 600px);
//Not sure about the min-height; not sure what's most useful. Probably should be resizable,
//with a responsive minimum height.
$appMinHeight: min(calc(80vh - var(--wp-admin--admin-bar--height, 32px) - 1px), 200px);

#ame-quick-search-root {
	box-sizing: border-box;
	z-index: 99990;
	position: fixed;

	display: flex;
	flex-direction: column;

	width: 800px;
	max-width: 100%;

	max-height: $appMaxHeight;
	min-height: $appMinHeight;

	font-size: $baseFontSize;
}

#ame-quick-search {
	box-sizing: border-box;

	max-height: $appMaxHeight;
	min-height: $appMinHeight;

	max-width: 100%;
	min-width: 50px;
	flex-shrink: 1;

	background: white;
	padding: 0;

	border: 1px solid $generalBorderColor;
	border-radius: 2px;
	box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2);

	display: flex;
	flex-direction: column;

	.ame-qs-search-box {
		box-sizing: border-box;
		width: 100%;
		margin: 0;
	}

	.ame-qs-search-box-container {
		box-sizing: border-box;
		margin: 4px 0;
		//border-bottom: 1px solid $generalBorderColor;
	}

	.ame-qs-search-results {
		margin-top: 0.2em;
		overflow: auto;

		display: flex;
		flex-direction: column;
	}

	.ame-qs-search-result {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: baseline;

		//Avoid fractional heights by explicitly setting the height.
		height: calc($resultLineHeight + $resultTopPadding + $resultBottomPadding);

		padding: $resultTopPadding 8px $resultBottomPadding;
		border-radius: 3px;

		font-size: $resultFontSize;
		line-height: $resultLineHeight;
		cursor: pointer;

		//In case the result is a link, we don't want it to look like one. Links were tested,
		//but as of this writing, results are not links.
		text-decoration: none;
		color: unset;
	}

	.ame-qs-selected-result {
		background: SelectedItem;
		color: SelectedItemText;
	}

	.ame-qs-search-result:hover:not(.ame-qs-selected-result) {
		background: #f2f2f2;
	}

	.ame-qs-result-label {
		display: block;
		flex-grow: 1;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ame-qs-result-meta {
		display: block;

		color: $ameUiTextMutedColor;
		font-size: $metaFontSize;
		line-height: $resultLineHeight;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: right;

		margin-left: 1em;
		min-width: 15%;
		max-width: 40%;
		flex-shrink: 0;
	}

	.ame-qs-selected-result .ame-qs-result-meta {
		color: SelectedItemText;
	}

	.ame-qs-result-icon {
		display: block;
		flex-shrink: 0;
		align-self: center;

		margin-right: 0.375rem;
		padding-bottom: 1px;

		line-height: $resultLineHeight;
		min-height: 1rem;
		width: 1rem;

		.dashicons {
			transition: none;

			width: 1rem;

			$dashiconSize: 20px/$assumedRem * 1rem;
			font-size: $dashiconSize;
			line-height: $dashiconSize;
			height: $dashiconSize;

			vertical-align: text-bottom;
			margin-left: -3px;
		}

		.ame-fa {
			line-height: $resultLineHeight;

			//14 px appears to be the base size for Font Awesome 4.6.3, which is the version
			//that this plugin uses at the time of writing. Any size that's not a multiple of 14px
			//will produce artifacts like blurry edges on at least some icons.
			font-size: 14px/$assumedRem * 1rem;
		}

		&:after {
			content: "|";
			display: inline-block;
			width: 0;
			height: 1rem;
			overflow: hidden;
		}
	}

	//This placeholder ensures that the app will have a reasonable minimum height even while
	//the initial search is being performed. Unlike setting a fixed height, this doesn't make
	//the app *stay* at this height once results load.
	.ame-qs-loading-placeholder {
		height: 500px;

		.ame-qs-result-icon {
			align-self: baseline;
		}
	}
}

.ame-qs-header {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;

	padding: 0 ($commonLeftPadding + $internalTabPadding);

	background: $darkPanelBackground;
	border-bottom: 1px solid $innerBorderColor;
}

.ame-qs-tab-nav {
	$verticalTabPadding: 8px;

	$indicatorSize: 2px;
	$activeIndicatorColor: #3877ED;
	$hoverIndicatorColor: #A5A5A5;

	box-sizing: border-box;
	display: flex;
	flex-direction: row;

	margin: 0;

	li {
		box-sizing: border-box;
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

	a {
		display: inline-block;
		box-sizing: border-box;
		position: relative;

		text-decoration: none;
		transition: none;

		&:focus, &:active {
			outline: none;
			box-shadow: none;
		}

		border-color: transparent;
		border-style: solid;
		border-width: 0;
		border-top-width: $indicatorSize;

		padding: ($verticalTabPadding - $indicatorSize) 1em $verticalTabPadding;
		//padding: $verticalTabPadding 1em ($verticalTabPadding - $indicatorSize);
	}

	.current a {
		color: #2c3338;
		border-color: $activeIndicatorColor;
	}

	li:not(.current) a:hover {
		background: #f2f2f2;
		border-color: $hoverIndicatorColor;
	}
}

.ame-qs-tab-wrapper {
	display: flex;
	flex-direction: column;

	max-height: 100%;
	min-height: 10px;
	flex-shrink: 1;

	padding: 0 $commonLeftPadding;
	//border: 1px solid green;
}

.ame-qs-tab {
	height: 100%;
	min-height: 10px;
	flex-shrink: 1;
	overflow: auto;

	padding: $internalTabPadding $internalTabPadding 0;
	//border: 1px solid blue;
}

#ame-qs-search-tab {
	display: flex;
	flex-direction: column;
}

.ame-qs-navigation-target {
	background: yellow;
	outline: 2px solid yellow !important;
}

//region Status bar
$statusBarVerticalPadding: math.round($commonLeftPadding/3);
$statusBarPadding: $statusBarVerticalPadding $commonLeftPadding;

@mixin qs-bottom-bar {
	padding: $statusBarPadding;
	margin-top: auto;
	border-top: 1px solid $innerBorderColor;

	background: $darkPanelBackground;
	color: $mutedMarginalTextColor;
	font-size: $baseFontSize - 1px;
}

#ame-qs-status-bar {
	@include qs-bottom-bar;
	display: flex;
	flex-direction: row;
}

#ame-qs-current-item-url {
	font-family: Consolas, Monaco, monospace;
	margin-right: auto;
}

#ame-qs-search-progress-indicator {
	max-height: 16px;
	overflow: visible;
	padding-top: 1px;

	margin-right: 0.5em;
}

#ame-qs-search-result-count,
#ame-qs-crawler-status-panel {
	margin-right: 0.5em;
}

//Crawler status panel. In or next to the status bar.
#ame-qs-crawler-status-panel.ame-qs-align-right {
	margin-left: auto;
}

//The placeholder prevents the status bar from collapsing when its empty.
#ame-qs-status-bar-placeholder {
	visibility: hidden;
	color: transparent;
	user-select: none;
}

//endregion


//region Crawler
.ame-qs-object {
	display: flex;
	flex-direction: row;

	border: 1px solid #ccc;
	background: white;

	padding: 4px 8px;
	margin-bottom: 8px;

	&:last-child {
		margin-bottom: 0;
	}
}

.ame-qs-object-status-text,
.ame-qs-object-count,
.ame-qs-request-page-url,
.ame-qs-request-status-text,
.ame-qs-request-total-items {
	font-family: Consolas, Monaco, monospace;
}

.ame-qs-object-details {
	flex-grow: 1;

	table {
		margin: 0.5em 0 0.5em 1em;
		border-collapse: collapse;

		th, td {
			text-align: left;
			vertical-align: baseline;

			padding: (2px/$assumedRem * 1rem) (4px/$assumedRem * 1rem) (4px/$assumedRem * 1rem);
			border-bottom: 1px solid #ccc;
		}

		th {
			padding-right: 1em;

			font-weight: 600;
			color: #646970;
			//background-color: #fafafa;
		}

		td {
			//font-family: Consolas, Monaco, monospace;
			//background-color: #fafafa;
		}

		tr:last-child {
			td, th {
				border-bottom: none;
			}
		}
	}
}

.ame-qs-object-summary {
	display: inline-flex;
	width: calc(100% - 1.5em);

	.ame-qs-object-label {
		flex-grow: 1;
	}

	.ame-qs-object-status {
		text-align: right;
		display: inline-flex;
	}
}

.ame-qs-object-count {
	margin-left: 0.2em;
}

.ame-qs-object-list-container {
	overflow: auto;
}

.ame-qs-crawl-request-list-container {
	max-height: 300px;
	overflow: auto;
}

.ame-qs-object-list,
.ame-qs-crawl-request-list {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;

	background: #f8f8f8;
	padding: 4px 8px;
	border-radius: 4px;
}

.ame-qs-object-list:not(:has(*)) {
	background: transparent;
}

#ame-qs-active-requests {
	padding-bottom: 0.5em;
	border-bottom: 1px solid #ccc;
}

#ame-qs-active-requests-label {
	margin-bottom: 3px;
}

#am-qs-crawler-tab .subsubsub,
#ame-qs-crawler-status-tab-nav {
	box-sizing: border-box;
	width: 100%;
	float: none;
}

.ame-qs-crawler-status-tab {
	margin-top: 0.5em;
}

//endregion

//region Crawler: Initial scan offer
$offerFontColor: #3c434a;

#ame-qs-crawler-offer {
	display: flex;
	flex-direction: column;
	margin-top: auto;
}

#ame-qs-crawler-offer-main {
	@include qs-bottom-bar;

	display: flex;
	flex-direction: row;
	padding-bottom: $statusBarVerticalPadding;

	border-color: #72aee6;
	border-style: solid;
	border-width: 1px 0;

	background: #e1effc;
	color: $offerFontColor;
}

#ame-qs-crawler-offer-actions {
	display: flex;
	flex-direction: row;
	gap: 1em;

	margin-left: auto;
}

#ame-qs-crawler-short-description {
	@include qs-bottom-bar;
	border-style: none;

	background: #e8f4ff;
	color: $offerFontColor;

	p:first-child {
		margin-top: 0;
	}

	p:last-child {
		margin-bottom: 0;
	}
}

#ame-qs-crawler-offer + #ame-qs-status-bar {
	margin-top: 0;
}

//endregion

//region Resizable UI
#ame-quick-search-root.ui-resizable {
	$handleSize: 7px;
	$cornerHandleSize: 16px;

	.ui-resizable-handle {
		position: absolute;
		display: block;
		width: 10px;
		height: 10px;
		//background: #f1f1f1;
		//border: 1px solid #ccc;
		//border-radius: 2px;
		z-index: 99999;

		opacity: 0.5;

		&.ui-resizable-s {
			height: $handleSize;
			width: 100%;

			bottom: -5px;
			left: 0;
			cursor: s-resize;
		}

		&.ui-resizable-e {
			width: $handleSize;
			height: 100%;
			right: -5px;
			top: 0;
			cursor: e-resize;
		}

		&.ui-resizable-se {
			width: $cornerHandleSize;
			height: $cornerHandleSize;

			$cornerOutSet: 1px;
			bottom: $cornerOutSet;
			right: $cornerOutSet;
			cursor: se-resize;

			&:after {
				content: '\3022';
				font-size: 16px;
				color: dimgray;

				display: block;
				position: absolute;
				right: -2px;
				bottom: -4px;

				transform-origin: center center;
				transform: rotate(-135deg);
			}
		}
	}
}

.ame-qs-has-custom-size #ame-quick-search {
	height: 100%;
	width: 100%;
}

//endregion

//region Page stats
#ame-qs-page-stats {
	display: flex;
	align-items: center;

	gap: 0.5em;
	margin-left: auto;

	//font-size: ($baseFontSize - 1px);
	color: $mutedMarginalTextColor;
}

.ame-qs-stats-unit {
	font-size: ($baseFontSize - 2px);
	margin-left: 1px;
}

//endregion

//region Settings
#ame-qs-settings-link-container {
	margin-left: 1em;
	align-self: center;

	a {
		text-decoration: none;
		transition: none;
	}

	a:not(:hover) {
		color: #888;
	}

	$iconsSize: 18px;

	.dashicons {
		font-size: $iconsSize;
		line-height: 1;
		width: $iconsSize;
		height: $iconsSize;
	}
}

#ame-qs-settings-page-container {
	display: flex;
	flex-direction: row;
}

#ame-qs-settings-form-wrapper {
	flex-grow: 1;

	.ame-qs-custom-shortcut,
	.ame-qs-shortcut-syntax {
		margin-left: 1.5em;
	}

	.ame-qs-shortcut-test-container {
		margin-top: 0.5em;
	}

	.ame-qs-toolbar-button-type {
		margin-top: 0.5em;
		margin-left: 1.5em;
	}

	.ame-qs-post-type-list {
		margin-left: 1.5em;

		p:last-child label {
			margin-bottom: 0 !important;
		}
	}
}

#ame-qs-settings-sidebar {
	flex-grow: 0;
	max-width: 270px;
}

#ame-qs-test-shortcut {
	min-width: 8em; //So that the button doesn't shrink when the text changes.
}

//endregion

//region Toolbar button
#wp-admin-bar-ame-quick-search-tb {
	.ab-icon::before {
		content: "\f179";
		top: 2px;
	}

	&.ame-qs-tb-icon-only .ab-icon {
		margin-right: 0;
	}

	&.ame-qs-tb-ready {
		&, > .ab-empty-item {
			cursor: pointer;
		}
	}
}

//endregion