@use 'sass:map';
@use '@angular/material' as mat;
@use './scrollbar.scss' as scrollbar;
@use './bui-card' as card;

$default-border-color-transition: border-color 100ms cubic-bezier(0.55, 0, 0.55, 0.2);
$mat-foreground-extract: (
	'secondary-text': 'light',
	'hint-text': 'muted',
	'divider': 'divider',
	'base': 'base',
	'inactive': 'inactive'
);

$mat-background-extract: (
	'card': 'card',
	'background': 'body'
);

@mixin apply-color($name, $color, $border-color-transition: $default-border-color-transition) {
	.bui-border-#{$name} {
		border-color: $color !important;
		transition: $border-color-transition;
	}
	.bui-bg-#{$name} {
		background-color: $color !important;
	}
	.bui-color-#{$name} {
		color: $color !important;
	}
	.bui-outline-#{$name} {
		outline-color: $color !important;
	}
}

@mixin apply-colors($theme, $border-color-transition: $default-border-color-transition) {
	.bui-border-emphasis:hover {
		border-color: currentColor !important;
		transition: $border-color-transition;
	}

	$color-config: mat.m2-get-color-config($theme);
	@if $color-config != null {
		@include card.bui-card($color-config);
		@each $p in (primary, accent, warn) {
			$primary-palette: map.get($color-config, $p);
			$c: mat.m2-get-color-from-palette($primary-palette, text);
			@include apply-color($p, $c, $border-color-transition);
		}

		$fg-original: map.get($color-config, 'foreground');
		$fg: map.merge(
			$fg-original,
			(
				inactive: rgba(map.get($fg-original, base), 0.06)
			)
		);

		@each $key, $name in $mat-foreground-extract {
			$c: map.get($fg, $key);
			@include apply-color($name, $c, $border-color-transition);
		}

		.bui-host {
			@each $p in (primary, accent, warn) {
				$primary-palette: map.get($color-config, $p);
				$c: mat.m2-get-color-from-palette($primary-palette, text);
				--bui-color-#{$p}: #{$c};
			}

			@each $key, $name in $mat-foreground-extract {
				$c: map.get($fg, $key);
				--bui-color-#{$name}: #{$c};
			}

			@each $key, $name in $mat-background-extract {
				$bg: map.get($color-config, 'background');
				$c: map.get($bg, $key);
				--bui-bg-#{$name}: #{$c};
			}

			@if map.get($color-config, 'is-dark') == false {
				--bui-color-success: #519602;
				--bui-color-info: #0dcaf0;
				--bui-color-warning: #ffc107;
				--bui-color-error: #dc3545;
			}
		}

		$card-bg: map.get(map.get($color-config, 'background'), 'card');
		.iti__country-list {
			background-color: $card-bg;
		}
	}
}

@mixin theme($theme, $border-color-transition: $default-border-color-transition) {
	@include apply-colors($theme, $border-color-transition);
	@include scrollbar.bui-scrollbar;

	.mat-icon {
		&.fas,
		&.far,
		&.fab,
		&.fa {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			font-size: 20px;
		}
	}
}