@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

$tc-collapsible-panel-padding-smaller: $padding-smaller !default;
$tc-collapsible-panel-padding-normal: $padding-normal !default;
$tc-collapsible-panel-padding-larger: $padding-larger !default;

@mixin type-col($width: 100%) {
	flex-basis: $width;
	display: flex;
	overflow: hidden;

	> span {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@mixin col-style {
	> :global(.btn) {
		line-height: 1em;
		color: tokens.$coral-color-accent-text;
	}

	&.col-4 {
		@include type-col(25%);
	}

	&.col-5 {
		@include type-col(20%);
	}

	&.col-6 {
		@include type-col(calc(100% / 6));
	}

	&.col-7 {
		@include type-col(calc(100% / 7));
	}

	&.col-8 {
		@include type-col(calc(100% / 8));
	}

	&.col-9 {
		@include type-col(calc(100% / 9));
	}

	&.col-10 {
		@include type-col(calc(10%));
	}
}

// due to react-bootstrap
:global(.panel .panel) {
	margin: 0;
}

.tc-collapsible-panel {
	position: relative;

	&.selected {
		border-left: 5px solid tokens.$coral-color-accent-border;
		padding-left: 1px;
	}

	&:not(.open) {
		:global(.panel-heading) {
			border-bottom: none;
		}
	}

	&.info,
	&.success,
	&.danger,
	&.muted,
	&.warning,
	&.skeleton {
		:global(.panel-heading) {
			padding-left: 1px;
			border-left: 5px solid;
		}
	}

	&.info {
		:global(.panel-heading) {
			border-left-color: tokens.$coral-color-info-text;
		}

		:global(.tc-status-label) {
			color: tokens.$coral-color-info-text;
		}
	}

	&.success {
		:global(.panel-heading) {
			border-left-color: tokens.$coral-color-success-text;
		}

		:global(.tc-status-label) {
			color: tokens.$coral-color-success-text;
		}
	}

	&.danger {
		border-color: tokens.$coral-color-danger-text;

		:global(.panel-heading) {
			border-color: tokens.$coral-color-danger-text;
		}

		:global(.tc-status-label) {
			color: tokens.$coral-color-danger-text;
		}
	}

	&.muted {
		:global(.panel-heading) {
			border-left-color: tokens.$coral-color-neutral-text-disabled;
		}

		:global(.tc-status-label) {
			color: tokens.$coral-color-neutral-text-disabled;
		}
	}

	&.warning {
		:global(.panel-heading) {
			border-left-color: tokens.$coral-color-warning-text;
		}

		:global(.tc-status-label) {
			color: tokens.$coral-color-warning-text;
		}
	}

	&.skeleton {
		:global(.panel-heading) {
			border-color: tokens.$coral-color-neutral-background-strong;
		}
	}

	.panel-header-content {
		display: flex;
		height: 2.5rem;
		align-items: center;
		padding: 0 $padding-normal;

		> a {
			width: 100%;
		}

		.panel-title {
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-basis: 100%;
			overflow: hidden;
			font-size: 0.875rem;
			width: 100%;
			padding-right: $padding-smaller;

			&:hover {
				background: transparent;
			}

			> * {
				@include col-style;
				padding: 0;
				text-decoration: none;
				display: flex;
				align-items: center;
				justify-content: space-between;
				min-width: 0; // trick to avoid conflict between flex and overflow

				> * {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	:global(.tc-icon-toggle) {
		height: 1rem;
		width: 1rem;
		transform-origin: center;

		svg {
			height: 0.625rem;
			width: 0.625rem;
		}
	}

	.group {
		display: flex;
	}

	:global {
		.panel-heading {
			display: flex;
			justify-content: space-between;
			padding: 0;

			.panel-title {
				width: 100%;
			}

			&:hover {
				background: tokens.$coral-color-neutral-background;
				cursor: pointer;

				.tc-status-label {
					text-decoration: underline;
				}
			}
		}
	}
}

.default-panel {
	:global(.label) {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.group {
		justify-content: space-between;
		padding-right: 15px;
	}

	:global(.panel-body) {
		max-height: 50vh;
		overflow: auto;
		word-break: break-all;

		.content {
			display: flex;
			flex-wrap: wrap;
			width: 100%;

			.label {
				flex-basis: 10%;
				flex-shrink: 0;
				flex-grow: 1;
			}

			.description {
				flex-basis: 90%;
				flex-shrink: 0;
				flex-grow: 1;
				font-weight: normal;
			}
		}
	}
}

.descriptive-panel {
	border-radius: 0;
	margin-bottom: 0;
	box-shadow: none;
	border: none;
	padding-left: 5px;

	:global(.panel) {
		box-shadow: none;
	}

	:global(.toggle) {
		svg {
			fill: tokens.$coral-color-accent-text;
			height: 10px;
			width: 10px;
		}
	}

	&.selected {
		.title,
		.detail {
			color: tokens.$coral-color-accent-text;
		}
	}

	:global(.panel-heading) {
		padding: 0;
		background-color: tokens.$coral-color-neutral-background-medium;
		border-color: transparent;
	}

	.group {
		justify-content: flex-start;

		> * {
			margin-right: $padding-smaller;
		}
	}

	.title {
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tag {
		white-space: nowrap;
		font-size: 0.75rem;
	}

	.detail {
		white-space: nowrap;
		justify-content: flex-end;
	}

	:global(.panel-body) {
		padding: 10px;
		padding-top: 0;

		.content {
			display: flex;
			flex-direction: column;

			.head {
				display: flex;
				justify-content: space-between;

				> span {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.content-description {
				white-space: pre-wrap;
				padding-top: 5px;
				color: tokens.$coral-color-neutral-text-weak;
			}
		}
	}
}