/*------------------------------------*\
    FEATURE HEADER
\*------------------------------------*/

@use 'sass:color';
@use "../../base/helpers";
@use "../../base/settings";

/// Customise colours
/// [1] Background colour for feature header - defaults to brand colour
/// [2] Set to true if you want the foreground and button hover colours to be calculated automatically
/// [3] Set foreground colour if [2] is set to false
/// [4] Set button hover background colour if [2] is set to false
$feature-header-background: settings.$ds_colour__brand !default; /// [1]
$feature-header-compute-colours: false !default; /// [2]
$feature-header-foreground: settings.$ds_colour__white !default; /// [3]
$feature-header-button-hover-background: rgba(settings.$ds_colour__black, 20%) !default; /// [4]

/// Get the background colour for a theme's button
/// If the background is very close to white or black then the calculated background may not be visible and user defined colours are recommended instead
/// @param {color} $foreground - the foreground colour
/// @param {color} $background - the background colour for comparison
/// @return {color} contrasting background colour
/// [1] 0.83: the luminance of ds_colour__blue--light
/// [2] 12.5%: the amount that ds_colour__blue--darker is darker than ds_colour__blue
@function getThemeButtonBackground($foreground, $background) {
    // Check contrast with white and black to decide whether to darken or lighten background
    @if helpers.getContrastRatio($foreground, settings.$ds_colour__white) > helpers.getContrastRatio($foreground, settings.$ds_colour__black) {
        @return helpers.adjustForContrast(helpers.adjustLuminance($foreground, 0.83), $foreground, 4.5, true); /// [1]
    } @else {
        // If foreground is white then check if background should be lightened instead of darkened
        @if $foreground == white and color.adjust($background, $lightness: -12.5%) == black {
            @return helpers.adjustForContrast(color.adjust($background, $lightness: 12.5%), $foreground, 4.5, true); /// [2]
        } @else {
            @return helpers.adjustForContrast(color.adjust($background, $lightness: -12.5%), $foreground, 4.5, true); /// [2]
        }
    }
}

/// Style definitions dictated by theme
/// @param {color} $foreground - the foreground colour
/// @param {color} $buttonHover - the background colour of button on hover
/// @output Theme colour scheme which gives best contrast
@mixin themeDefinitions($foreground, $buttonHover) {
    color: $foreground;

    hr {
        border-color: $foreground;
    }

    // Link theming
    a:not(:hover):not(:focus):not(.ds_button) {
        color: currentColor;
        text-decoration: underline;
    }

    a:hover:not(:focus):not(.ds_button){
        color: currentColor;
    }

    // Button theming
    .ds_button:not(:hover):not(:focus) {
        background-color: transparent;
        color: currentColor;
        outline: 0.125rem solid currentColor;
        outline-offset: -0.125rem;
    }
    .ds_button:hover:not(:focus) {
        background-color: $buttonHover;
        color: currentColor;
        outline: 0.125rem solid currentColor;
        outline-offset: -0.125rem;
    }
}

/// Select white or adjusted colour theme to meet a required contrast ratio against a provided background colour if foreground has insufficient contrast
/// @param {color} $foreground - the foreground colour (main text colour)
/// @param {color} $background - the background colour
/// @param {text} $description - text description of the element, used in the debug message
/// @param {number} $ratio - the contrast ratio to meet, from 0 to 21
/// @output Theme colour scheme which gives best contrast
@mixin checkAndSetThemeColour($foreground, $background, $description: '', $ratio: 4.5) {
    @if helpers.getContrastRatio($foreground, $background) < $ratio {
        // If not enough contrast try white
        @if helpers.getContrastRatio(settings.$ds_colour__white, $background) > $ratio {
            @debug 'Adjusting text colour #{$foreground} to #{settings.$ds_colour__white} to meet contrast ratio of #{$ratio}:1 against #{$description} background colour #{$background}';
            @include themeDefinitions(settings.$ds_colour__white, getThemeButtonBackground(settings.$ds_colour__white, $background));
        } @else {
            // Otherwise adjust foreground colours
            $adjustedForeground: helpers.adjustForContrast($foreground, $background, $ratio);
            @debug 'Adjusting text colour #{$foreground} to #{$adjustedForeground} to meet contrast ratio of #{$ratio}:1 against #{$description} background colour #{$background}';
            @include themeDefinitions($adjustedForeground, getThemeButtonBackground($adjustedForeground, $background));
        }
    } @else {
        // Use foreground colour as sufficient contrast
        @include themeDefinitions($foreground, getThemeButtonBackground($foreground, $background));
    }
}

.ds_feature-header {
    @include helpers.ds_responsive-margin(4, bottom);

    &__title {
        @include helpers.ds_h1-style;
        @include helpers.ds_responsive-margin(2, bottom);
    }

    &--background {
        background-color: $feature-header-background;

        @if $feature-header-compute-colours {
            // Adjust text, link and button for contrast (either light or dark theme)
            @include checkAndSetThemeColour(settings.$ds_colour__text, $feature-header-background, 'feature header custom');
        } @else {
            // Use user defined colours
            @include themeDefinitions($feature-header-foreground, $feature-header-button-hover-background);
        }
    }

    &--background-secondary {
        background-color: settings.$ds_colour__background--secondary;
        @include helpers.checkAndFixDescendantLinkColour(settings.$ds_colour__link, settings.$ds_colour__background--secondary, 'feature header');
    }

    &--background-tertiary {
        background-color: settings.$ds_colour__background--tertiary;
        @include helpers.checkAndFixDescendantLinkColour(settings.$ds_colour__link, settings.$ds_colour__background--tertiary, 'feature header');
    }

    &__primary {
        align-self: center;
        @include helpers.ds_responsive-padding(6, top);
        @include helpers.ds_responsive-padding(5, bottom);

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

    }

    // inset text if background and constrained width
    &--background:not(&--fullwidth) &__primary,
    &--background-secondary:not(&--fullwidth) &__primary,
    &--background-tertiary:not(&--fullwidth) &__primary {
        padding-left: 1rem;
        padding-right: 1rem;

        @include helpers.ds_media-query(medium) {
            padding-left: 2rem;
        }

    }

    &__secondary {
        align-self: center;
        position: relative;
    }

    // Alignment options
    &--top {
        .ds_feature-header__primary,
        .ds_feature-header__secondary {
            align-self: start;
        }
    }

    // Temp - will inherit some of these rules from upcoming change to default img
    &__image {
        display: block;
        height: auto;
        max-width: 100%;
    }

    // Full width image at fluid width has bottom padding
    @include helpers.ds_media-query(medium-down) {
        &--fullwidth &__secondary {
            padding-bottom: 2.5rem;
        }
    }

    // Fixed width
    @include helpers.ds_media-query(medium) {
        &--fullwidth &__secondary {
            padding: 0;
        }
        // Add vertical padding to image if full width
        &--fullwidth &__secondary:not(&__secondary--cover, &__secondary--no-padding) {
            padding: 3rem 0;
        }

        // set image to cover
        &__secondary--cover {
            align-self: auto;
            overflow: hidden;
            padding: 0;
            position: relative;

            .ds_feature-header__image {
                height: 100%;
                left: 0;
                width: 100%;
                object-fit: cover;
                position: absolute;
                right: 0;
            }
        }

        &--top {
            .ds_feature-header__secondary--cover {
                align-self: unset;
            }
        }
    }

     // Button overrides
     .ds_button {
        @include helpers.ds_responsive-margin(1, top);
    }
}

@include helpers.ds_media-query(medium) {

    .ds_feature-header__image {
        float: right;
    }

    .ds_feature-header:not(.ds_feature-header--fullwidth),
    .ds_feature-header--fullwidth > .ds_wrapper {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas:
            'p p p p p p s s s s s s';
        gap: 2rem;

        .ds_feature-header__primary {
            grid-area: p;
            padding-bottom: 3rem;
        }

        .ds_feature-header__secondary {
            grid-area: s;
        }

        // Change grid columns if there is no image
        &:not(:has(.ds_feature-header__secondary)){
            grid-template-areas:
                'p p p p p p p p s s s s';
            }
    }

    // Change grid columns if wide option
    .ds_feature-header--wide:not(.ds_feature-header--fullwidth),
    .ds_feature-header--wide.ds_feature-header--fullwidth > .ds_wrapper {
        grid-template-areas:
            'p p p p p p p p s s s s';
    }
}