// Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

@function clr-mergeCommonKeys($elMap: (), $valMap: ()) {
    @return map-merge(map-get($elMap, $clr-typography-commonmap-key), $valMap);
}

@mixin clr-getAllTypeKeys($elMap: (), $valMap: ()) {
    $myMapAndCommonMap: clr-mergeCommonKeys($elMap, $valMap);

    @each $key, $value in $myMapAndCommonMap {
        #{$key}: $value;
    }
}

@mixin clr-getTypeKey($valuesToGet: (), $elMap: (), $valMap: ()) {
    @if (length($valuesToGet) > 0) {
        $myMapAndCommonMap: clr-mergeCommonKeys($elMap, $valMap);

        @each $val in $valuesToGet {
            @if map-has-key($myMapAndCommonMap, $val) {
                #{$val}: map-get($myMapAndCommonMap, $val);
            }
        }
    }
}

@mixin clr-getTypePropertiesForDomElement($element-label: null, $typePropertiesToGet: ()) {
    @if ($element-label != null) {
        @if (map-has-key($clr-typography-dom-to-type-element, $element-label)) {
            $myTypographicElement: map-get($clr-typography-dom-to-type-element, $element-label);
            @include clr-getTypeProperties($myTypographicElement, $typePropertiesToGet);
        }
    }
}

@function clr-getTypePropertyValueForDomElement($element-label: null, $valToGet: null) {
    @if not($valToGet) {
        @return '';
    }
    @if not($element-label) {
        @return '';
    }

    @if (map-has-key($clr-typography-dom-to-type-element, $element-label)) {
        $myTypographicElement: map-get($clr-typography-dom-to-type-element, $element-label);
        @return clr-getTypePropertyValue($myTypographicElement, $valToGet);
    }

    @return '';
}

@function clr-getTypePropertyValue($element-label: null, $valToGet: null) {
    @if not($valToGet) {
        @return '';
    }
    @if not($element-label) {
        @return '';
    }

    @if (map-has-key($clr-elements, $element-label)) {
        $myValsContainer: map-get($clr-elements, $element-label);
        $myCommonVals: map-get($myValsContainer, $clr-typography-commonmap-key);

        @if (map-has-key($myCommonVals, $valToGet)) {
            @return map-get($myCommonVals, $valToGet);
        }
    }

    @return '';
}

//Generates responsive typography based on the element style map in variables.clarity.scss
@mixin clr-getTypeProperties($element, $whichTypeProperties: (), $breakpoint-property: min-width, $breakpoints-map: $clr-breakpoints) {
    //Check if the element exists in the $clr-elements style map
    @if map-has-key($clr-elements, $element) {
        $elMap: map-get($clr-elements, $element); //get the element style map

        @if (length($whichTypeProperties) < 1) {
            // if we don't tell it to go get a typeProperty, we want them all
            @include clr-getAllTypeKeys($elMap);
        }
        @else {
            @include clr-getTypeKey($whichTypeProperties, $elMap);
        }

        // NOTE: don't want this code to go away because one day we may support responsive font-sizes
        // FIXIT: keeping here. needs much work/refactor to be functional again. but general idea is still here.
        // @each $breakpoint, $val-map in $el-map {
        //     //If min-width < small, no media query as this is the default
        //     @if $breakpoint == null {
        //         @include clr-getAllTypeKeys($val-map, $el-map);
        //     }
        //     //Everything else except the common properties has a media query
        //     @else {
        //         @if $breakpoint != "clr-common" and map-has-key($clr-breakpoints, $breakpoint) {
        //             $breakpoint: map-get($clr-breakpoints, $breakpoint);
        //             @media screen and (# {$breakpoint-property}: $breakpoint) {
        //                 @include clr-getAllTypeKeys($val-map, $el-map);
        //             }
        //         }
        //     }
        // }
    }
}

@include exports('typography.clarity') {
    //Headings
    h1 {
        @include clr-getTypeProperties(h1);
    }

    h2 {
        @include clr-getTypeProperties(h2);
    }

    h3 {
        @include clr-getTypeProperties(h3);
    }

    h4 {
        @include clr-getTypeProperties(h4);
    }

    h5 {
        @include clr-getTypeProperties(h5);
    }

    h6 {
        @include clr-getTypeProperties(h6);
    }

    //Body.
    body {
        @include clr-getTypeProperties(p1);
        font-family: $clr-font;
        margin-top: 0 !important;
    }

    //Paragraph

    // angular demos is injecting style selectors such as `p[_ngcontent-jfh-3]`
    // that are overriding these styles. i'm using specificity below to try and force the issue.

    body {
        p {
            @include clr-getTypeProperties(p1);
        }

        .p0, p.p0 {
            @include clr-getTypeProperties(p0);
        }

        .p2, p.p2 {
            @include clr-getTypeProperties(p2);
        }

        .p3, p.p3 {
            @include clr-getTypeProperties(p3);
        }

        .p4, p.p4 {
            @include clr-getTypeProperties(p4);
        }

        .p5, p.p5 {
            @include clr-getTypeProperties(p5);
        }

        .p6, p.p6 {
            @include clr-getTypeProperties(p6);
        }

        .p7, p.p7 {
            @include clr-getTypeProperties(p7);
        }

        .p8, p.p8 {
            @include clr-getTypeProperties(p8);
        }
    }

    .text-light {
        font-weight: 200;
    }

    .text-right {
        text-align: right !important;
    }

    .text-center {
        text-align: center !important;
    }

    .text-left {
        text-align: left !important;
    }

    .text-justify {
        text-align: justify !important;
    }

    //HTML
    html {
        color: $clr-app-font-color-primary;
        font-family: $clr-font;
        font-size: $clr-baseline-px;
    }
}