////
/// @group themes
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// If only header background color is specified, that color will be
/// used as the leading color for all accented elements, such as:
/// - current date color
/// - selected date background
/// - picker elements hover colors
/// - year/month hover/selected colors
/// If only background colors are specified, text/icon colors
/// will be assigned automatically to a contrasting color.
/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
/// @param {Color} $content-background [null] - The main content background color.
/// @param {Color} $content-text-color [null] - The main content text color.
///
/// @param {Color} $header-background [null] - The header background color.
/// @param {Color} $header-text-color [null] - The header text color.
///
/// @param {Color} $picker-arrow-color [null] - The idle picker arrow color.
/// @param {Color} $picker-arrow-hover-color [null] - The picker hover arrow color.
///
/// @param {Color} $picker-text-color [null]- The idle picker month/year color.
/// @param {Color} $picker-text-hover-color [null]-  The hover picker month/year color.
///
/// @param {Color} $inactive-text-color [null] - The text color for weekday labels and other month dates.
/// @param {Color} $weekend-text-color [null] - The text color for weekend days.
///
/// @param {Color} $year-current-text-color [null] - The text color for the current/selected year.
/// @param {Color} $month-current-text-color [null]- The text color for the current/selected month.
///
/// @param {Color} $year-hover-text-color [null] - The year hover text color.
/// @param {Color} $month-hover-text-color [null] - The month hover text color.
/// @param {Color} $month-hover-background [null] - The month hover background color.
///
/// @param {Color} $date-selected-background [null] - The background color for the selected date.
/// @param {Color} $date-selected-text-color [null] - The text color for the selected date.
///
/// @param {Color} $date-current-text-color [null] - The text color for the current date.
/// @param {Color} $date-current-bg-color [null] - The background color for the current date.
/// @param {Color} $date-hover-background [null] - The hover date background color.
///
/// @param {Color} $date-special-background [null] - The background color used for special dates.
/// @param {Color} $date-special-text-color [null] - The text color used for special dates.
///
/// @param {Color} $date-disabled-text-color [null] - The text color for disabled dates.
/// @param {Color} $date-disabled-background [null] - The background color for disabled dates in a range.
///
/// @param {border-radius} $border-radius [null] - The border radius used for the outline of the calendar.
/// @param {border-radius} $date-border-radius [null] - The border radius used for the outline outline of the date.
/// @param {border-radius} $month-border-radius [null] - The border radius used for the outline outline of the month.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires text-contrast
/// @requires round-borders
/// @requires extend
///
/// @example scss Change the header and content background colors
///   $my-calendar-theme: igx-calendar-theme(
///     $header-background: purple,
///     $content-background: black
///   );
///   // Pass the theme to the igx-calendar component mixin
///   @include igx-calendar($my-calendar-theme);
@function igx-calendar-theme(
    $palette: $default-palette,
    $schema: $light-schema,

    $content-background: null,
    $content-text-color: null,

    $border-radius: null,
    $date-border-radius: null,
    $month-border-radius: null,

    $header-background: null,
    $header-text-color: null,

    $picker-arrow-color: null,
    $picker-arrow-hover-color: null,

    $picker-text-color: null,
    $picker-text-hover-color: null,

    $inactive-text-color: null,
    $weekend-text-color: null,

    $year-current-text-color: null,
    $month-current-text-color: null,

    $year-hover-text-color: null,
    $month-hover-text-color: null,
    $month-hover-background: null,

    $date-selected-background: null,
    $date-selected-text-color: null,

    $date-current-text-color: null,
    $date-current-bg-color: null,
    $date-hover-background: null,

    $date-special-background: null,
    $date-special-text-color: null,

    $date-disabled-text-color: null,
    $date-disabled-background: null,
) {
    $name: 'igx-calendar';
    $calendar-schema: ();

    @if map-has-key($schema, $name) {
        $calendar-schema: map-get($schema, $name);
    } @else {
        $calendar-schema: $schema;
    }

    $theme: apply-palette($calendar-schema, $palette);

    $border-radius: round-borders(
        if($border-radius, $border-radius, map-get($calendar-schema, 'border-radius')), 0, 20px
    );

    $date-border-radius: round-borders(
        if($date-border-radius, $date-border-radius, map-get($calendar-schema, 'date-border-radius')), 0, 20px
    );

    $month-border-radius: round-borders(
        if($month-border-radius, $month-border-radius, map-get($calendar-schema, 'month-border-radius')), 0, 20px
    );

    @if not($content-text-color) and $content-background {
        @if type-of($content-background) == 'color' {
            $content-text-color: text-contrast($content-background);
        }
    }

    @if not($weekend-text-color) and $content-background {
        @if type-of($content-background) == 'color' {
            $weekend-text-color: rgba($content-text-color, .7);
        }
    }

    @if not($inactive-text-color) and $content-background {
        @if type-of($content-background) == 'color' {
            $inactive-text-color: rgba($content-text-color, .5);
        }
    }

    @if not($picker-arrow-color) and $content-background {
        $picker-arrow-color: $content-text-color;
    }

    @if not($picker-arrow-hover-color) and $header-background {
        @if type-of($header-background) == 'color' {
            $picker-arrow-hover-color: $header-background;
        }
    }

    @if not($picker-text-color) and $content-background {
        $picker-text-color: $content-text-color;
    }

    @if not($picker-text-hover-color) and $header-background {
        $picker-text-hover-color: $header-background;
    }

    @if not($header-text-color) and $header-background {
        $header-text-color: text-contrast($header-background);
    }

    @if not($date-selected-background) and $header-background {
        $date-selected-background: $header-background;
    }

    @if not($date-selected-text-color) and $date-selected-background {
        $date-selected-text-color: $content-background;
    }

    @if not($date-hover-background) and $content-background {
        @if type-of($content-background) == 'color' {
            $date-hover-background: rgba(text-contrast($content-background), .12);
        }
    }

    @if not($date-current-bg-color) and $header-background {
        $date-current-bg-color: $header-background;
    }

    @if not($date-current-text-color) and $date-current-bg-color {
        $date-current-text-color: $date-current-bg-color;
    }

    @if not($date-special-background) and $content-background {
        @if type-of($content-background) == 'color' {
            $date-special-background: rgba(text-contrast($content-background), .04);
        }
    }

    @if not($date-special-text-color) and $date-special-background {
        $date-special-text-color: text-contrast($date-special-background);
    }

    @if not($year-hover-text-color) and $header-background {
        $year-hover-text-color: $header-background;
    }

    @if not($month-hover-text-color) and $month-hover-background {
        @if type-of($month-hover-text-color) == 'color' {
            $month-hover-text-color: text-contrast($month-hover-background);
        }
    }

    @if not($year-current-text-color) and $header-background {
        $year-current-text-color: $header-background;
    }

    @if not($month-current-text-color) and $header-background {
        @if $header-background == 'color' {
            $month-current-text-color: $header-background;
        }
    }

    @if not($date-disabled-text-color) and $date-disabled-background {
        $date-disabled-color: rgba(text-contrast($date-disabled-background), .38);
    }

    @return extend($theme, (
        name: $name,
        palette: $palette,
        content-background: $content-background,
        content-text-color: $content-text-color,

        header-background: $header-background,
        header-text-color: $header-text-color,

        border-radius: $border-radius,
        date-border-radius: $date-border-radius,
        month-border-radius: $month-border-radius,

        picker-arrow-color: $picker-arrow-color,
        picker-arrow-hover-color: $picker-arrow-hover-color,

        picker-text-color: $picker-text-color,
        picker-text-hover-color: $picker-text-hover-color,

        weekend-text-color: $weekend-text-color,
        inactive-text-color: $inactive-text-color,

        year-current-text-color: $year-current-text-color,
        month-current-text-color: $month-current-text-color,

        year-hover-text-color: $year-hover-text-color,
        month-hover-text-color: $month-hover-text-color,
        month-hover-background: $month-hover-background,

        date-selected-background: $date-selected-background,
        date-selected-text-color: $date-selected-text-color,

        date-current-text-color: $date-current-text-color,
        date-current-bg-color: $date-current-bg-color,
        date-hover-background: $date-hover-background,

        date-special-text-color: $date-special-text-color,
        date-special-background: $date-special-background,

        date-disabled-text-color: $date-disabled-text-color,
        date-disabled-background: $date-disabled-background,
    ));
}

/// @param {Map} $theme - The theme used to style the component.
/// @requires {function} text-contrast
/// @requires {mixin} igx-root-css-vars
/// @requires em
/// @requires rem
/// @requires {mixin} ellipsis
/// @requires --var
@mixin igx-calendar($theme) {
    @include igx-root-css-vars($theme);

    $cal-header-year-margin: 0;
    $cal-header-date-margin: 0;
    $cal-header-padding: em(16px);

    $cal-picker-padding: em(16px);

    $cal-value-w: em(40px);
    $cal-value-h: $cal-value-w;
    $cal-value-br: $cal-value-w / 2;
    $cal-value-fw: 600;

    $cal-value-month-margin: 0 em(12px);
    $cal-value-month-height: em(91px);

    $cal-row-padding: 0;
    $cal-row-margin: em(2px) 0;
    $selected-hover-color: text-contrast(map-get($theme, 'date-selected-background'));

    $current-color-variant: map-get((
        material: --var($theme, 'date-selected-background'),
        fluent:--var($theme, 'date-current-bg-color')
    ), map-get($theme, variant));

    $current-text-color-variant: map-get((
        material: --var($theme, 'date-selected-text-color'),
        fluent:--var($theme, 'date-current-text-color')
    ), map-get($theme, variant));

    $left: if-ltr(left, right);
    $right: if-ltr(right, left);
    $before: if-ltr(before, after);
    $after: if-ltr(after, before);

    %cal-display {
        display: flex;
        flex-flow: column nowrap;
        width: 100%;
        background: --var($theme, 'content-background');
        overflow: hidden;
        outline: none;
        border-radius: --var($theme, 'border-radius');
    }

    %cal-display + %cal-display {
        margin-#{$left}: 1rem;
    }

    %cal-display--vertical {
        flex-flow: row nowrap;

        %cal-header-display {
            min-width: em(168px);
        }
    }

    %cal-header-display {
        background: --var($theme, 'header-background');
        color: --var($theme, 'header-text-color');
        padding: $cal-header-padding;
    }

    %cal-header-year {
        margin: $cal-header-year-margin;
        color: currentColor;
        opacity: .8;
    }

    %cal-header-date {
        display: flex;
        margin: $cal-header-date-margin;

        > span {
            @include ellipsis();
        }
    }

    %cal-header-date--vertical {
        flex-flow: column nowrap;
    }

    %cal-picker-display {
        display: flex;
        height: em(56px);
        justify-content: space-between;
        align-items: center;
        padding-bottom: $cal-picker-padding;
        position: relative;

        div {
            text-align: center;
        }
    }

    %cal-picker-dates {
        display: flex;
        justify-content: center;
    }

    %cal-picker-arrow {
        position: absolute;
        display: inline-flex;
        justify-content: center;
        color: --var($theme, 'picker-arrow-color');
        user-select: none;
        outline: none;
        cursor: pointer;
        height: calc(100% - #{$cal-picker-padding});
        align-items: center;
        top: 0;

        &:focus,
        &:hover {
            color: --var($theme, 'picker-arrow-hover-color');
        }

        @include if-rtl() {
            transform: scaleX(-1);
        }
    }

    %cal-picker-arrow__prev {
        #{$left}: 0;
    }

    %cal-picker-arrow__next {
        #{$right}: 0;
    }

    %cal-picker-date {
        color: --var($theme, 'picker-text-color');
        text-align: center;
        outline: none;
        padding: 0 rem(2px);

        &:hover,
        &:focus {
            color: --var($theme, 'picker-text-hover-color');
            cursor: pointer;
        }
    }

    %cal-body-display {
        flex: 1 1 auto;
        padding-top: $cal-picker-padding;
        padding-bottom: $cal-picker-padding;
        overflow: hidden;
    }

    %cal-row-display {
        display: flex;
        justify-content: space-between;
        margin: $cal-row-margin;
        padding: $cal-row-padding;

        %cal-value {
            &:first-of-type {
                padding-left: em(8px);
            }

            &:last-of-type {
                padding-right: em(8px);
            }
        }
    }

    %cal-row-display--wrap {
        flex-wrap: wrap;
    }

    %cal-column-display {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: center;
    }

    %cal-column-year {
        %cal-value--year {
            flex: 1 0 0;
        }
    }

    %cal-value {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        flex-basis: 14.28%;
        color: --var($theme, 'content-text-color');
        cursor: pointer;
        outline: none;
        // transition: background .15s ease-out;

        &:hover,
        &:focus {
            @extend %cal-value--hover;
        }
    }

    %cal-value-content {
        position: relative;
        width: $cal-value-w;
        height: $cal-value-h;
        min-width: 2ch;
        line-height: $cal-value-h;
        text-align: center;
        border-radius: --var($theme, 'date-border-radius');
        z-index: 0;
        // transition: background .15s ease-out;

        &::after {
            position: absolute; content: '';
            width: calc(100% - 4px);
            height: calc(100% - 4px);
            top: 2px;
            left: 2px;
            border-radius: inherit;
            z-index: -1;
        }
    }

    %cal-value--label {
        color: --var($theme, 'inactive-text-color');
        cursor: default;
        border-radius: 0;
        flex-basis: 14.28%;
        // 100 divided by the number of weekdays
    }

    %cal-value--weekend {
        color: --var($theme, 'weekend-text-color');
    }

    %cal-value--year {
        margin: 0;
        min-width: 8ch;
        line-height: rem(52px);
    }

    %cal-value--year-current {
        color: --var($theme, 'year-current-text-color');
    }

    %cal-value--year-hover {
        color: --var($theme, 'year-hover-text-color');
    }

    %cal-value--month-hover {
        color: --var($theme, 'month-hover-text-color');

        &::after {
            background: --var($theme, 'month-hover-background');
        }
    }

    %cal-value--month {
        position: relative;
        display: flex;
        margin: $cal-value-month-margin;
        flex: 1 0 25%;
        justify-content: center;
        align-items: center;
        height: $cal-value-month-height;
        z-index: 1;

        &::after {
            position: absolute;
            content: '';
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            height: 48px;
            background: transparent;
            border-radius: --var($theme, 'month-border-radius');
            transition: background-color .15s ease-out;
            z-index: -1;
        }
    }

    %cal-value--month-current {
        color: --var($theme, 'month-current-text-color') ;
    }

    %cal-value--inactive {
        cursor: pointer;
        color: --var($theme, 'inactive-text-color');
    }

    %cal-value--special {
        %cal-value-content {
            background: --var($theme, 'date-special-background');
            color: --var($theme, 'date-special-text-color');
            font-weight: 900;
        }
    }

    %cal-value--selected {
        position: relative;
        background: --var($theme, 'date-selected-background');

        %cal-value-content {
            color: --var($theme, 'date-selected-text-color');
            background: --var($theme, 'date-selected-background') ;
        }
    }

    %cal-value--current {
        %cal-value-content {
            color: --var($theme, 'date-current-text-color');
            font-weight: $cal-value-fw ;
            background: --var($theme, 'date-current-bg-color');

            &:hover {
                background: --var($theme, 'date-current-bg-color');
            }

            &:focus {
                background: --var($theme, 'date-current-bg-color');
            }
        }
    }

    %cal-value--current--selected {
        %cal-value-content {
            color: $current-text-color-variant;
            background: $current-color-variant;

            &:hover {
                background: $current-color-variant;
            }

            &:focus {
                background: $current-color-variant;
            }
        }
    }

    %cal-value--disabled {
        pointer-events: none;
        cursor: not-allowed;
        color: --var($theme, 'date-disabled-text-color');
    }

    %cal-value--hover {
        %cal-value-content::after {
            background: --var($theme, 'date-hover-background');
        }

        &%cal-value--selected %cal-value-content::after {
            background: rgba($selected-hover-color, .18);
        }
    }

    %cal-value--single {
        background: transparent;

        &::before,
        &::after {
            background: transparent;
        }
    }

    %cal-value--disabled-range {
        background: --var($theme, 'date-disabled-background') !important;

        %cal-value-content {
            color: --var($theme, 'date-disabled-text-color');
            background: transparent !important;
        }
    }

    %cal-value--hidden%cal-value--disabled-range {
        background: transparent !important;

        &::after,
        &::before {
            background: transparent !important;
        }
    }

    %cal-value--range%cal-value--inactive%cal-value--selected {
        background: transparent !important;

        %cal-value-content {
            color: --var($theme, 'date-disabled-text-color');
            background: transparent !important;
        }
    }

    %cal-value--range%cal-value--inactive%cal-value--selected%cal-value--single {
        background: transparent !important;

        %cal-value-content {
            color: --var($theme, 'date-selected-text-color');
            background: --var($theme, 'date-selected-background') !important;
        }
    }

    %cal-value--inactive%cal-value--selected%cal-value--first {
        &::after {
            background: transparent !important;
        }
    }

    %cal-value--inactive%cal-value--selected%cal-value--last {
        &::before {
            background: transparent !important;
        }
    }

    %cal-value--first {
        position: relative;
        background: transparent;
        z-index: 0;

        &::after {
            position: absolute;
            content: '';
            width: 50%;
            top: 0;
            #{$left}: 50%;
            bottom: 0;
            background: --var($theme, 'date-selected-background');
            z-index: -1;
        }
    }

    %cal-value--last {
        position: relative;
        background: transparent;
        z-index: 0;

        &::before {
            position: absolute;
            content: '';
            width: 50%;
            top: 0;
            #{$right}: 50%;
            bottom: 0;
            background: --var($theme, 'date-selected-background');
            z-index: -1;
        }
    }

    %cal-value--hidden {
        %cal-value-content {
            visibility: hidden;
        }
    }
}

/// Adds typography styles for the igx-calendar component.
/// Uses the 'h4', 'subtitle-1' and 'body-1'
/// category from the typographic scale.
/// @group typography
/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
/// @param {Map} $categories [(header-year: 'subtitle-1', header-date: 'h4', picker-date: 'subtitle-1', content: 'body-1')] - The categories from the typographic scale used for type styles.
/// @requires {mixin} igx-type-style
@mixin igx-calendar-typography($type-scale, $categories: (
    header-year: 'subtitle-1',
    header-date: 'h4',
    picker-date: 'subtitle-1',
    content: 'body-1')
) {
    $header-year: map-get($categories, 'header-year');
    $header-date: map-get($categories, 'header-date');
    $picker-date: map-get($categories, 'picker-date');
    $content: map-get($categories, 'content');

    %cal-header-year {
        @include igx-type-style($type-scale, $header-year) {
            margin: 0;
        }
    }

    %cal-header-date {
        @include igx-type-style($type-scale, $header-date) {
            line-height: rem(42px);
            margin: 0;
        }
    }

    %cal-picker-date {
        @include igx-type-style($type-scale, $picker-date) {
            margin: 0;
        }
    }

    %cal-value {
        @include igx-type-style($type-scale, $content) {
            margin: 0;
        }
    }

    %cal-value--year-current {
        @include igx-type-style($type-scale, $content) {
            font-size: rem(24px);
            margin: 0;
        }
    }
}