@use "sass:map";
@use "sass:math";
@use "@angular/material" as mat;
@use "../global/index" as global;
@use "../themes/index" as themes;
@use "list";
@use "button";

/********************************************************************************
 * Override the material design expansion panel style.
 *
 * The "m-theme" class is required on the mat-accordion to use the right theme.
 * Available classes on mat-accordion:
 *   - m-list => to display expansion panels as mat-list style.
 *   - flat => remove the box shadow on each expansion panels.
 *   - important => add border radius and more spacing on each items.
 *   - no-padding => remove the accordion padding.
 *
 * Available classes on mat-expansion-panel-header:
 *   - no-indicator => Hide the toggle indicator added by the component.
 *   - medium => increase the spacing, suitable for 2 lines.
 *   - big => increase the spacing, suitable for 3 lines.
 *   - with-separator => add a border at the bottom of the panel-header.
 *   - no-padding => Remove the original padding.
 *
 ********************************************************************************/

@mixin override-color($theme) {
	$color-config: mat.get-color-config($theme);
	$primary-palette: map.get($color-config, primary);

	.mat-accordion {
		.mat-expansion-panel {
			position: relative;
			border: none !important;

			&::before {
				position: absolute;
				content: "";
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: global.$spacing;
				border: 1px solid transparent;
				box-sizing: border-box;
			}

			&.with-separator::after {
				background: map.get(map.get($color-config, foreground), divider);
			}

			&.no-highlight {
				.mat-expansion-panel-header {
					border: none;
					background: transparent;
				}
			}

			&:not(.no-highlight) {
				&:not(.mat-expanded) {
					.mat-expansion-panel-header {
						&.cdk-keyboard-focused,
						&.cdk-focused {
							border: 1px solid rgba(mat.get-color-from-palette($primary-palette), 0.5);
							border-radius: global.$spacing;
						}
					}
				}
			}

			&.mat-expanded > mat-expansion-panel-header{
				background: rgba(map.get(map.get($color-config, foreground), divider), 0.1);
			}

			&.mat-expanded:not(.no-highlight)::before {
				border: 1px solid rgba(mat.get-color-from-palette($primary-palette), 0.5)!important;
			}

			.mat-expansion-panel-header:hover{
				background: map.get(map.get($color-config, foreground), divider);
			}

			>.mat-expansion-panel-content {
				position: relative;
			}

		}
	}

	.m-theme-expansion-panel-draggable {
		&.cdk-drag-preview.mat-expansion-panel {
			.mat-expansion-panel-header {
				&.with-separator::after {
					background: map.get(map.get($color-config, foreground), divider);
				}
			}
		}

		&.cdk-drag-placeholder {
			.mat-expansion-panel-header {
				&::before {
					border: 2px dashed rgba(mat.get-color-from-palette($primary-palette), 0.5);
				}
			}
		}
	}

	.mat-accordion.m-list-stroked {
		> .mat-expansion-panel {
			&.mat-expanded,
			& {
				border: 1px solid map.get(map.get($color-config, foreground), divider);
			}

			&.mat-expanded {
				> .mat-expansion-panel-header {
					background: map.get(map.get($color-config, foreground), divider);
				}
			}
		}
	}
}

@mixin override-theme($theme) {
	$color-config: mat.get-color-config($theme);
	@if $color-config != null {
		@include override-color($theme);
	}

	.mat-accordion {
		padding: list.$spacing;
		display: block;

		.mat-expansion-panel {
			box-sizing: border-box;
			border-radius: 0;
			border: 1px solid transparent;
			transition: border-radius 225ms, border 225ms, margin 225ms;

			&:first-of-type {
				border-top-right-radius: 0;
				border-top-left-radius: 0;
			}

			&:last-of-type {
				border-bottom-right-radius: 0;
				border-bottom-left-radius: 0;
			}

			.mat-expansion-panel-header {
				min-height: global.$spacing * 6;
				height: 100%;
				border-bottom-right-radius: 0;
				border-bottom-left-radius: 0;
				padding: math.div(list.$spacing, 2) list.$spacing * 2;
				-webkit-tap-highlight-color: transparent;
				transition: padding 200ms;
				position: relative;
				font-size: global.$default-fz;

				&.no-indicator {
					.mat-expansion-panel-header-title {
						margin: 0;
					}

					.mat-expansion-indicator {
						display: none;
					}
				}

				&.medium {
					padding: list.$spacing list.$spacing * 2;
				}

				&.big {
					padding: list.$spacing * 2 list.$spacing * 2;
				}

				&.with-separator::after {
					content: "";
					height: 1px;
					width: 0;
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					transition: width 250ms;
				}

				&.no-padding {
					padding: 0;

					&:not(.no-indicator) {
						padding-right: list.$spacing * 2;
					}
				}

				&.mat-expanded {
					&.with-separator::after {
						width: calc(100% - #{(list.$spacing * 2)});
					}
				}
			}

			&.mat-expansion-panel-spacing {
				margin: list.$spacing 0;
			}

			.mat-expansion-panel-body {
				padding: 0 list.$spacing * 2 list.$spacing * 2;
			}

			&.content-no-spacing {
				.mat-expansion-panel-body {
					padding: 0;
				}
			}

			.actions {
				display: flex;
				padding: list.$spacing list.$spacing * 2 list.$spacing list.$spacing;

				> .mat-mdc-button {
					padding: 0 list.$spacing * 2;
					border-radius: button.$radius;
				}

				> .spacing {
					margin-right: list.$spacing;
				}
			}

		}

		&.m-list {
			.mat-expansion-panel {
				margin-top: list.$spacing;

				&.mat-expansion-panel-spacing {
					margin: list.$spacing 0;

					&:last-of-type {
						margin-bottom: 0;
					}
				}

				&:first-of-type {
					margin-top: 0;
				}
			}
		}

		&.flat {
			.mat-expansion-panel {
				box-shadow: none;
			}
		}

		.mat-expansion-panel {
			margin-top: list.$spacing;
			border-radius: list.$shape-radius !important;

			&:first-of-type {
				margin-top: 0;
			}
		}

		.mat-expansion-panel {
			border-radius: list.$shape-radius;

			&:first-of-type {
				border-top-right-radius: list.$shape-radius;
				border-top-left-radius: list.$shape-radius;
			}

			&:last-of-type {
				border-bottom-right-radius: list.$shape-radius;
				border-bottom-left-radius: list.$shape-radius;
			}
		}

		&.no-padding,
		.mat-expansion-panel-header.no-padding {
			padding: 0;
		}

		.mat-expansion-panel-header-title {
			align-items: center;

			.panel-icon {
				margin-right: button.$icon-spacing * 2;
				height: list.$icon-size;
				width: list.$icon-size;
				line-height: list.$icon-size;
				font-size: list.$icon-size;
			}
		}
	}

	.m-theme-expansion-panel-draggable {
		&.cdk-drag-preview.mat-expansion-panel {
			box-sizing: border-box;

			margin-top: list.$spacing;
			border-radius: list.$shape-radius;

			&.mat-expansion-panel-spacing {
				margin: list.$spacing 0;

				&:last-of-type {
					margin-bottom: 0;
				}
			}

			&:first-of-type {
				margin-top: 0;
				border-top-right-radius: list.$shape-radius;
				border-top-left-radius: list.$shape-radius;
			}

			&:last-of-type {
				border-bottom-right-radius: list.$shape-radius;
				border-bottom-left-radius: list.$shape-radius;
			}

			.mat-expansion-panel-header {
				border-bottom-right-radius: 0;
				border-bottom-left-radius: 0;
				padding: math.div(list.$spacing, 2) list.$spacing * 2;
				-webkit-tap-highlight-color: transparent;
				transition: padding 200ms;
				position: relative;
				font-size: list.$item-fz;

				&.no-indicator {
					.mat-expansion-panel-header-title {
						margin: 0;
					}

					.mat-expansion-indicator {
						display: none;
					}
				}

				&.medium {
					padding: list.$spacing list.$spacing * 2;
				}

				&.big {
					padding: list.$spacing * 2 list.$spacing * 2;
				}

				&.with-separator::after {
					content: "";
					height: 1px;
					width: 0;
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					transition: width 250ms;
				}

				&.no-padding {
					padding: 0;
				}

				&.mat-expanded {
					&.with-separator::after {
						width: calc(100% - #{(list.$spacing * 2)});
					}
				}
			}

			.mat-expansion-panel-header-title {
				align-items: center;

				.panel-icon {
					margin-right: button.$icon-spacing * 2;
					height: list.$icon-size;
					width: list.$icon-size;
					line-height: list.$icon-size;
					font-size: list.$icon-size;
				}
			}
		}

		&.cdk-drag-placeholder {
			background: transparent;
			box-shadow: none;

			.mat-expansion-panel-header {
				position: relative;

				.mat-content {
					opacity: 0;
				}

				&::before {
					content: "";
					position: absolute;
					top: 50%;
					left: 50%;
					height: 100%;
					width: 100%;
					transform: translate(-50%, -50%);
					border-radius: list.$shape-radius;
					box-sizing: border-box;
				}
			}
		}
	}

	.cdk-drag-animating {
		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
	}

	.mat-accordion.cdk-drop-list-dragging .mat-expansion-panel {
		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
	}

	.mat-accordion {
		.mat-expansion-panel-header {
			&.no-padding:not(.no-indicator) {
				padding-right: global.$spacing * 2;
			}
		}
	}

	.mat-accordion.m-list-stroked {
		> .mat-expansion-panel {
			margin-top: list.$spacing;
			border-radius: list.$shape-radius;
			background: transparent;

			&.mat-expansion-panel-spacing {
				margin: list.$spacing 0;

				&:last-of-type {
					margin-bottom: 0;
				}
			}

			&:first-of-type {
				margin-top: 0;
			}

			> .mat-expansion-panel-header {
				transition: background 330ms linear;
				padding: global.$spacing * 2;
			}
		}
	}
	.mat-accordion.m-list-inner {
		> .mat-expansion-panel {
			background: transparent;

			&.mat-expansion-panel-spacing {
				margin: list.$spacing 0;

				&:last-of-type {
					margin-bottom: 0;
				}
			}

			&:first-of-type {
				margin-top: 0;
			}

			&.mat-expanded,
			& {
				border: none;
			}

			> .mat-expansion-panel-header {
				padding-left: 0;
				padding-bottom: 0;
				padding-top: 0;

				.mat-expansion-panel-header-title {
					padding: list.$spacing list.$spacing list.$spacing list.$spacing * 2;
				}
			}
		}
	}
}