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

/// If only background color is specified, text/icon color
/// will be assigned automatically to a contrasting color.
/// Does ___not___ apply for disabled state colors.
///
/// @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 {Map} $elevations [$elevations] - The elevations (shadows) map to be used.
///
/// @param {Color} $text-color [null] - The text color of a open time picker.
/// @param {Color} $hover-text-color [null] - The hover text color of a open time picker.
/// @param {Color} $selected-text-color [null] -  The text color of a selected item in time picker.
/// @param {Color} $active-item-background [null] - The background color for current item in focused column inside the time picker.
/// @param {Color} $header-background [null] - The header background color of a time picker.
/// @param {Color} $header-hour-text-color [null] - The header hour text color of a time picker.
/// @param {Color} $header-time-period-color [null] - The header AM/PM text color of a time picker.
/// @param {Color} $background-color [null] - The time-picker panel background color.
/// @param {box-shadow} $modal-shadow [null] - The custom shadow to be used for the time picker in modal mode.
/// @param {box-shadow} $dropdown-shadow [null] - The custom shadow to be used for the time picker in dropdown mode.
/// @param {border-radius} $border-radius [null] - The border radius used for the outline of the picker.
/// @param {border-radius} $active-item-border-radius [null] - The border radius used for the outline of the currently active item (hours, minutes, AM/PM).
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires text-contrast
/// @requires igx-elevation
/// @requires $elevations
/// @requires extend
///
/// @example scss Change the background and text colors in  time picker
///   $my-time-picker-theme: igx-time-picker-theme(
///     $text-color: white,
///     $background-color: black
///   );
///   // Pass the theme to the igx-time-picker component mixin
///   @include igx-time-picker($my-time-picker-theme);
@function igx-time-picker-theme(
    $palette: $default-palette,
    $schema: $light-schema,
    $elevations: $elevations,

    $border-radius: null,
    $active-item-border-radius: null,

    $text-color: null,
    $hover-text-color: null,
    $selected-text-color: null,
    $active-item-background: null,
    $header-background: null,
    $header-hour-text-color: null,
    $header-time-period-color: null,
    $background-color: null,
    $modal-shadow: null,
    $dropdown-shadow: null
) {
    $name: 'igx-time-picker';
    $time-picker-schema: ();

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

    $theme: apply-palette($time-picker-schema, $palette);

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

    $active-item-border-radius: round-borders(
        if($active-item-border-radius, $active-item-border-radius, map-get($time-picker-schema, 'active-item-border-radius')), 0, 20px
    );

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

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

    @if not($header-time-period-color) and $header-background {
        @if type-of($header-background) == 'color' {
            $header-time-period-color: rgba(text-contrast($header-background), .8);
        }
    }

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

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

    @if not($modal-shadow) {
        $elevation: map-get($time-picker-schema, 'modal-elevation');
        $modal-shadow: igx-elevation($elevations, $elevation);
    }

    @if not($dropdown-shadow) {
        $elevation: map-get($time-picker-schema, 'dropdown-elevation');
        $dropdown-shadow: igx-elevation($elevations, $elevation);
    }

    @return extend($theme, (
        name: $name,
        palette: $palette,
        text-color: $text-color,
        hover-text-color: $hover-text-color,
        selected-text-color: $selected-text-color,
        active-item-background: $active-item-background,
        header-background: $header-background,
        header-hour-text-color: $header-hour-text-color,
        header-time-period-color: $header-time-period-color,
        background-color: $background-color,
        modal-shadow: $modal-shadow,
        dropdown-shadow: $dropdown-shadow,
        border-radius: $border-radius,
        active-item-border-radius: $active-item-border-radius,
    ));
}

/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires rem
/// @requires --var
@mixin igx-time-picker($theme) {
    @include igx-root-css-vars($theme);

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

    $vertical-header-width: rem(168px);

    %time-picker-display {
        display: flex;
        flex-flow: column nowrap;
        max-width: rem(340px);
        min-width: rem(320px);
        border-radius: --var($theme, 'border-radius');
        box-shadow: --var($theme, 'modal-shadow');
        overflow: hidden;
    }

    %time-picker-display--vertical {
        flex-flow: row nowrap;
        min-width: rem(540px);
    }

    %time-picker__main {
        background: --var($theme, 'background-color');
        flex: 1 1 auto;
    }

    %time-picker--dropdown {
        min-width: rem(200px);
        box-shadow: --var($theme, 'dropdown-shadow');
    }

    %time-picker__body {
        display: flex;
        padding: rem(10px) 0;
        justify-content: center;
    }

    %time-picker-content {
        width: 100%;
        padding: 0;
        color: inherit;
        line-height: initial;
    }

    %time-picker-dialog-title {
        display: none;
    }

    %time-picker-dialog-actions {
        margin: 0;
    }

    %time-picker__hourList {
        text-align: #{$right};

        @include if-rtl() {
            order: 2;
        }
    }

    %time-picker__minuteList {
        text-align: center;
        @include if-rtl() {
            order: 1;
        }
    }

    %time-picker__secondsList {
        text-align: center;
    }

    %time-picker__ampmList {
        display: flex;
        flex-direction: column;
        padding-top: rem(48px);

        @include if-rtl() {
            order: 3;
        }
    }

    %time-picker__column {
        max-width: rem(64px);
        height: rem(325px);
        padding: 0;
        cursor: pointer;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: center;
        color: --var($theme, 'text-color');
        overflow: hidden;

        &:focus,
        &:active {
            outline: none;
        }
    }

    %time-picker__item {
        width: rem(54px);
        padding: rem(5px) rem(10px);
        border-radius: --var($theme, 'active-item-border-radius');
        height: rem(48px);
        display: flex;
        justify-content: center;
        align-items: center;

        &:focus,
        &:active {
            outline: none;
        }

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

    %time-picker__item--selected {
        font-size: rem(24px);
        color: --var($theme, 'selected-text-color');
    }

    %time-picker__item--active {
        background: --var($theme, 'active-item-background');
    }

    %time-picker__header {
        background: --var($theme, 'header-background');
        padding: rem(24px) rem(16px);
    }

    %time-picker__header-ampm {
        color: --var($theme, 'header-time-period-color');
    }

    %time-picker__header--vertical {
        width: $vertical-header-width;
    }

    %time-picker__header-hour {
        display: flex;
        color: --var($theme, 'header-hour-text-color');

        @include if-rtl() {
            flex-direction: row-reverse;
            justify-content: flex-end;
        }
    }

    %time-picker__header-ampm,
    %time-picker__header-hour {
        margin: 0;
    }

    %time-picker__buttons {
        display: flex;
        justify-content: flex-end;
        height: rem(52px);
        padding: rem(8px);

        [igxButton] + [igxButton] {
            margin-#{$left}: rem(8px);
        }
    }
}

/// 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-time-period: 'subtitle-1', header-hour: 'h4', content: 'body-1')] - The categories from the typographic scale used for type styles.
/// @requires {mixin} igx-type-style
@mixin igx-time-picker-typography($type-scale, $categories: (
    header-time-period: 'subtitle-1',
    header-hour: 'h4',
    content: 'body-1')
) {
    $time-period: map-get($categories, 'header-time-period');
    $header-hour: map-get($categories, 'header-hour');
    $content: map-get($categories, 'content');

    %time-picker__header-ampm {
        @include igx-type-style($type-scale, $time-period);
    }

    %time-picker__header-hour {
        @include igx-type-style($type-scale, $header-hour);
    }

    %time-picker__column {
        @include igx-type-style($type-scale, $content) {
            margin-top: 0;
            margin-bottom: 0;
        }
    }
}