@import '@financial-times/o-private-foundation/main';
@import '@financial-times/o-brand/main';

@import './src/scss/variables';
@import 'src/scss/brand';
/// Output all oTopBanner features
/// @param {Map} $opts [()] - A map of options to configure the output
/// @access public
/// @example scss - Include styles for all top banners.
///		@include oTopBanner();
/// @example scss - Include styles for specific top banners only.
///		@include oTopBanner($opts: (
///			'themes': ('new-world', 'professional-inverse')
///		))
@mixin oTopBanner(
	$opts: (
		'themes': (
			'new-world',
			'professional-inverse',
		),
	)
) {
	@include oPrivateFoundation();

	$themes: map-get($opts, 'themes');
	$themes: if($themes, $themes, ());

	.o-top-banner {
		display: flex;
		justify-content: center;
		border-bottom: oPrivateSpacingByName('s2') solid transparent;
	}

	.o-top-banner__container {
		display: inline-flex;
		align-items: center;
		padding: oPrivateSpacingByName('s4') oPrivateGridGutter(S)
			oPrivateSpacingByName('s2') oPrivateGridGutter(S);
		gap: oPrivateSpacingByName('s4') oPrivateSpacingByName('l24');
		flex-wrap: wrap;
		@include oPrivateGridRespondTo(S) {
			padding: oPrivateSpacingByName('s8') oPrivateGridGutter(M)
				oPrivateSpacingByName('s6') oPrivateGridGutter(M);
		}
	}

	.o-top-banner__content {
		flex-grow: 1;
		max-width: oPrivateTypographyMaxLineWidth(
			$optimal-characters-per-line: 100
		);
	}

	.o-top-banner__heading,
	.o-top-banner__copy {
		padding: 0;
		margin: 0;
	}

	.o-top-banner__heading {
		@include oPrivateTypographySans($scale: 2, $weight: semibold);
		@include oPrivateGridRespondTo('S') {
			@include oPrivateTypographySans($scale: 3, $weight: semibold);
		}
	}

	.o-top-banner__copy {
		@include oPrivateTypographySans($scale: 0, $weight: regular);
		@include oPrivateGridRespondTo('S') {
			@include oPrivateTypographySans($scale: 1, $weight: regular);
		}
	}

	@each $theme in $themes {
		@include oTopBannerAddTheme($theme);
	}
}

/// Add a theme modifier for banners.
///
/// @param {String} $theme-name - The banner theme to output styles for. See README for available themes, or specify a custom one if providing $opts.
/// @param {Map} $opts [null] - A brand configuration which can be used to create a custom banner theme. See README for more examples.
/// @output The output includes the `.o-top-banner--THEME` modifier class definition, which includes all overrides.
/// @example scss - A fully customised top banner theme
///   @include oTopBannerAddTheme('my-theme-name', (
///       'background-color': oPrivateFoundationGet('o3-color-palette-slate'),
///       'button-background-color': oPrivateFoundationGet('o3-color-palette-ft-pink'),
///       'heading-color': oPrivateFoundationGet('o3-color-palette-ft-pink'),
///       'copy-color': oPrivateFoundationGet('o3-color-palette-white')
///   ));
/// @example scss - Existing banner theme
///   @include oTopBannerAddTheme('professional');
/// @access public
@mixin oTopBannerAddTheme($theme-name, $opts: null) {
	// If we have a custom config, we use that instead of one of the
	// preconfigured themes
	$variant: if($opts, $opts, $theme-name);

	@if (type-of($opts) == 'map') {
		$required-opts: (
			'background-color',
			'button-background-color',
			'copy-color'
		);
		@each $required-opt in $required-opts {
			@if (not map-has-key($opts, $required-opt)) {
				@error 'o-top-banner: Missing required option `#{$required-opt}` for theme `#{$theme-name}`';
			}
		}
	}

	.o-top-banner--#{$theme-name} {
		@include _oTopBannerTheme($variant);
	}
}

@mixin _oTopBannerTheme($theme) {
	$button-color: _oTopBannerGet('button-background-color', $theme);
	$copy-color: _oTopBannerGet('copy-color', $theme);
	$heading-color: _oTopBannerGet('heading-color', $theme);
	$heading-font-weight: _oTopBannerGet('heading-font-weight', $theme);
	$background-color: _oTopBannerGet('background-color', $theme);
	$brand-border-color: _oTopBannerGet('brand-border-color', $theme);

	background-color: $background-color;
	color: $copy-color;
	border-color: $brand-border-color;

	@if ($heading-color or $heading-font-weight) {
		.o-top-banner__heading {
			@if ($heading-color) {
				color: $heading-color;
			}
			@if ($heading-font-weight) {
				@include oPrivateTypographySans(
					$scale: 2,
					$weight: $heading-font-weight
				);
				@include oPrivateGridRespondTo('S') {
					@include oPrivateTypographySans(
						$scale: 3,
						$weight: $heading-font-weight
					);
				}
			}
		}
	}

	@if ($brand-border-color) {
		.o-top-banner__container {
			padding-bottom: oPrivateSpacingByIncrement(4);
			@include oPrivateGridRespondTo(S) {
				padding: oPrivateSpacingByIncrement(7) oPrivateGridGutter(M)
					oPrivateSpacingByIncrement(7) oPrivateGridGutter(M);
			}
		}
	}

	.o-top-banner__button {
		$button-theme: if(
			$button-color,
			(
				'color': $button-color,
				'context': $background-color,
			),
			$theme
		);

		@if (type-of($button-theme) == 'map') {
			@include oPrivateButtonsContentWithThemeOverride(
				$opts: (
					'type': 'primary',
				),
				$theme-override: $button-theme
			);
		} @else {
			@include oPrivateButtonsContent(
				$opts: (
					'type': 'primary',
					'theme': $button-theme,
				)
			);
		}

		@include oPrivateGridRespondTo(S) {
			@if (type-of($button-theme) == 'map') {
				@include oPrivateButtonsContentWithThemeOverride(
					$opts: (
						'type': 'primary',
						'size': 'big',
					),
					$theme-override: $button-theme
				);
			} @else {
				@include oPrivateButtonsContent(
					$opts: (
						'type': 'primary',
						'size': 'big',
						'theme': $button-theme,
					)
				);
			}
		}
	}
}
