// config stylesheet allows us to use #{$prefix}
@use 'sass:map';
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/notification';

@mixin msk-notification {
    @include notification.inline-notification;
    @include notification.toast-notification;
    @include notification.actionable-notification;

    /* ---- global ----- */
    .#{$prefix}--toast-notification,
    .#{$prefix}--actionable-notification,
    .#{$prefix}--inline-notification {
        border-radius: m.msk-rem(6px);

        // hide carbon's icon
        .#{$prefix}--toast-notification__close-icon,
        .#{$prefix}--actionable-notification__close-icon,
        .#{$prefix}--toast-notification__icon,
        .#{$prefix}--inline-notification__close-icon,
        .#{$prefix}--inline-notification__icon {
            visibility: hidden;
        }

        // add msk close icon
        .#{$prefix}--toast-notification__close-button,
        .#{$prefix}--inline-notification__close-button {
            position: relative;

            &::after {
                color: c.$msk--white-0;
                content: 'clear';
                font-family: msk-icon;
                font-size: m.msk-rem(20px);
                line-height: 1;
                position: absolute;
            }
        }

        // add msk close icon
        .#{$prefix}--actionable-notification__close-button {
            &::after {
                color: c.$msk--white-0;
                content: 'clear';
                font-family: msk-icon;
                font-size: m.msk-rem(20px);
                line-height: 1;
                position: absolute;
            }
        }

        // heading font
        .#{$prefix}--toast-notification__title,
        .#{$prefix}--actionable-notification__title,
        .#{$prefix}--inline-notification__title {
            --#{$prefix}-heading-compact-01-font-size: #{v.$msk--size-2};
            --#{$prefix}-heading-compact-01-font-weight: 700;
            --#{$prefix}-heading-compact-01-line-height: 1.6;
        }

        .#{$prefix}--actionable-notification__title {
            font-weight: 700;
        }
    }

    // add msk icon
    .#{$prefix}--toast-notification,
    .#{$prefix}--actionable-notification__details,
    .#{$prefix}--inline-notification__details {
        margin: 0 3rem 0 m.msk-rem(16px);
        position: relative;

        &::before {
            font-family: msk-icon;
            font-size: 1.5rem;
            line-height: 1;
            position: absolute;
            top: 1rem;
        }
    }

    // heading on top of content
    .#{$prefix}--inline-notification__text-wrapper {
        flex-direction: column;
        padding: 1rem 0;
    }
    .#{$prefix}--actionable-notification__text-wrapper {
        padding: 1rem 0;
    }
    .#{$prefix}--actionable-notification__content {
        flex-direction: column;
    }

    /* ---- actionable notification ----- */
    .#{$prefix}--actionable-notification:not(
            .#{$prefix}--actionable-notification--toast
        )
        .#{$prefix}--actionable-notification__details {
        @media (width >= 42rem) {
            margin: 0 m.msk-rem(16px);
        }
    }
    .#{$prefix}--actionable-notification {
        .#{$prefix}--actionable-notification__action-button {
            margin: 1rem;
        }
        &.#{$prefix}--actionable-notification--toast {
            .#{$prefix}--actionable-notification__text-wrapper {
                padding: m.msk-rem(16px) 0 m.msk-rem(24px) 0;
            }

            .#{$prefix}--actionable-notification__action-button {
                margin: 0 m.msk-rem(16px + 20px + 16px) 1rem;
            }
        }
    }

    /* ---- inline notification ----- */
    .#{$prefix}--inline-notification {
        flex-wrap: nowrap;
    }

    /* ---- action button ----- */

    $notification-types: (
        success,
        warning,
        warning-alt,
        info,
        info-square,
        error
    );
    $btn-text-map: (
        success: c.$msk--green-20,
        warning: c.$msk--yellow-20,
        warning-alt: c.$msk--yellow-20,
        info: c.$msk--cyan-20,
        info-square: c.$msk--cyan-20,
        error: c.$msk--magenta-20,
    );
    $btn-bg-map: (
        success: c.$msk--green-80,
        warning: c.$msk--yellow-80,
        warning-alt: c.$msk--yellow-80,
        info: c.$msk--cyan-80,
        info-square: c.$msk--cyan-80,
        error: c.$msk--magenta-80,
    );
    $btn-hover-bg-map: (
        success: c.$msk--green-70,
        warning: c.$msk--yellow-70,
        warning-alt: c.$msk--yellow-70,
        info: c.$msk--cyan-70,
        info-square: c.$msk--cyan-70,
        error: c.$msk--magenta-70,
    );
    $inverse-btn-hover-bg-map: (
        success: c.$msk--green-30,
        warning: c.$msk--yellow-30,
        warning-alt: c.$msk--yellow-30,
        info: c.$msk--cyan-30,
        info-square: c.$msk--cyan-30,
        error: c.$msk--magenta-30,
    );
    $btn-hover-text-map: (
        success: c.$msk--green-10,
        warning: c.$msk--yellow-10,
        warning-alt: c.$msk--yellow-10,
        info: c.$msk--cyan-10,
        info-square: c.$msk--cyan-10,
        error: c.$msk--magenta-10,
    );
    $inverse-btn-hover-text-map: (
        success: c.$msk--green-90,
        warning: c.$msk--yellow-90,
        warning-alt: c.$msk--yellow-90,
        info: c.$msk--cyan-90,
        info-square: c.$msk--cyan-90,
        error: c.$msk--magenta-90,
    );
    $btn-active-bg-map: (
        success: c.$msk--green-60,
        warning: c.$msk--yellow-60,
        warning-alt: c.$msk--yellow-60,
        info: c.$msk--cyan-60,
        info-square: c.$msk--cyan-60,
        error: c.$msk--magenta-60,
    );
    $inverse-btn-active-bg-map: (
        success: c.$msk--green-40,
        warning: c.$msk--yellow-40,
        warning-alt: c.$msk--yellow-40,
        info: c.$msk--cyan-40,
        info-square: c.$msk--cyan-40,
        error: c.$msk--magenta-40,
    );
    $bg-color-map: (
        success: c.$msk--green-90,
        warning: c.$msk--yellow-90,
        warning-alt: c.$msk--yellow-90,
        info: c.$msk--cyan-90,
        info-square: c.$msk--cyan-90,
        error: c.$msk--magenta-90,
    );
    $inverse-bg-map: (
        success: c.$msk--green-10,
        warning: c.$msk--yellow-10,
        warning-alt: c.$msk--yellow-10,
        info: c.$msk--cyan-10,
        info-square: c.$msk--cyan-10,
        error: c.$msk--magenta-10,
    );
    $heading-color-map: (
        success: c.$msk--green-20,
        warning: c.$msk--yellow-20,
        warning-alt: c.$msk--yellow-20,
        info: c.$msk--cyan-20,
        info-square: c.$msk--cyan-20,
        error: c.$msk--magenta-20,
    );
    $heading-icon-map: (
        success: 'check_circle',
        warning: 'warning',
        warning-alt: 'warning',
        info: 'info',
        info-square: 'info',
        error: 'error',
    );
    $inverse-bg-map: (
        success: c.$msk--green-10,
        warning: c.$msk--yellow-10,
        warning-alt: c.$msk--yellow-10,
        info: c.$msk--cyan-10,
        info-square: c.$msk--cyan-10,
        error: c.$msk--magenta-10,
    );
    $inverse-icon-color-map: (
        success: c.$msk--green-50,
        warning: c.$msk--yellow-50,
        warning-alt: c.$msk--yellow-50,
        info: c.$msk--cyan-50,
        info-square: c.$msk--cyan-50,
        error: c.$msk--magenta-50,
    );
    $inverse-color-map: (
        success: c.$msk--green-100,
        warning: c.$msk--yellow-100,
        warning-alt: c.$msk--yellow-100,
        info: c.$msk--cyan-100,
        info-square: c.$msk--cyan-100,
        error: c.$msk--magenta-100,
    );

    /* Loop through each notification type */
    @each $type in $notification-types {
        /* low-contrast background color */
        .#{$prefix}--toast-notification--low-contrast,
        .#{$prefix}--inline-notification--low-contrast {
            --#{$prefix}-text-primary: #{map-get($inverse-color-map, $type)};

            box-shadow: v.$msk--elevation-plus-06;
        }

        // low-contrast actionable subtitle
        .#{$prefix}--actionable-notification--low-contrast
            .#{$prefix}--actionable-notification__subtitle {
            color: map-get($inverse-color-map, $type);
        }

        // low-contrast toast icon
        .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--#{$type}::before {
            color: map-get($inverse-icon-color-map, $type);
            content: map-get($heading-icon-map, $type);
        }

        .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--#{$type},
        .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--#{$type},
        .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--#{$type} {
            --#{$prefix}-notification-background-#{$type}: #{map-get(
                    $inverse-bg-map,
                    $type
                )};

            border-left: none;

            &::before {
                border: none;
            }

            // low-contrast title
            .#{$prefix}--toast-notification__title,
            .#{$prefix}--actionable-notification__title,
            .#{$prefix}--inline-notification__title {
                color: map-get($btn-bg-map, $type);
            }

            // low-contrast actionable icon
            // low-contrast inline icon

            .#{$prefix}--actionable-notification__details::before,
            .#{$prefix}--inline-notification__details::before {
                color: map-get($inverse-icon-color-map, $type);
                content: map-get($heading-icon-map, $type);
            }

            .#{$prefix}--toast-notification__close-button::after,
            .#{$prefix}--actionable-notification__close-button::after,
            .#{$prefix}--inline-notification__close-button::after {
                color: map-get($inverse-color-map, $type);
            }
        }

        // low-contrast buttons
        .#{$prefix}--actionable-notification.#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--#{$type} {
            .#{$prefix}--actionable-notification__action-button {
                &.msk-btn--tertiary {
                    background-color: map-get($btn-text-map, $type);
                    border-color: map-get($btn-text-map, $type);
                    color: map-get($btn-bg-map, $type);
                    font-weight: 500;

                    &:hover,
                    &:focus {
                        background-color: map-get(
                            $inverse-btn-hover-bg-map,
                            $type
                        );
                        color: map-get($inverse-btn-hover-text-map, $type);
                    }

                    &:focus,
                    &:hover:focus {
                        border-color: c.$msk--black-100;
                    }

                    &:hover {
                        border-color: map-get($inverse-btn-hover-bg-map, $type);
                    }

                    &:active {
                        background-color: map-get(
                            $inverse-btn-active-bg-map,
                            $type
                        );
                        border-color: map-get(
                            $inverse-btn-active-bg-map,
                            $type
                        );
                        color: map-get($inverse-color-map, $type);
                    }
                }
            }
        }

        // Background color
        .#{$prefix}--toast-notification--#{$type},
        .#{$prefix}--actionable-notification--#{$type},
        .#{$prefix}--inline-notification--#{$type} {
            --#{$prefix}-background-inverse: #{map-get($bg-color-map, $type)};

            border-left: none;
        }

        // Heading and icon
        .#{$prefix}--toast-notification--#{$type},
        .#{$prefix}--actionable-notification--#{$type},
        .#{$prefix}--inline-notification--#{$type} {
            .#{$prefix}--toast-notification__title,
            .#{$prefix}--actionable-notification__title,
            .#{$prefix}--inline-notification__title {
                color: map-get($heading-color-map, $type);
            }
        }

        // changing the icon
        .#{$prefix}--toast-notification.#{$prefix}--toast-notification--#{$type}:not(
                .#{$prefix}--toast-notification--low-contrast
            ),
        .#{$prefix}--actionable-notification.#{$prefix}--actionable-notification--#{$type}:not(
                .#{$prefix}--actionable-notification--low-contrast
            )
            .#{$prefix}--actionable-notification__details,
        .#{$prefix}--inline-notification.#{$prefix}--inline-notification--#{$type}:not(
                .#{$prefix}--inline-notification--low-contrast
            )
            .#{$prefix}--inline-notification__details {
            &::before {
                color: map-get($heading-color-map, $type);
                content: map-get($heading-icon-map, $type);
            }
        }

        // actionable buttons
        .#{$prefix}--actionable-notification:not(
                .#{$prefix}--actionable-notification--low-contrast
            ).#{$prefix}--actionable-notification--#{$type} {
            .#{$prefix}--actionable-notification__action-button {
                &.msk-btn--tertiary {
                    background-color: map-get($btn-bg-map, $type);
                    border-color: map-get($btn-bg-map, $type);
                    color: map-get($btn-text-map, $type);
                    font-weight: 500;

                    &:hover,
                    &:focus {
                        background-color: map-get($btn-hover-bg-map, $type);
                        color: map-get($btn-hover-text-map, $type);
                    }

                    &:focus,
                    &:hover:focus {
                        border-color: c.$msk--black-100;
                    }

                    &:hover {
                        border-color: map-get($btn-hover-bg-map, $type);
                    }

                    &:active {
                        --#{$prefix}-notification-action-tertiary-inverse-text: #{c.$msk--white-0};

                        background-color: map-get($btn-active-bg-map, $type);
                    }
                }
            }
        }
    }
}