@use 'sass:map';
@use '../../base' as *;

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin time-picker($theme) {
    @include css-vars($theme, '.igx-time-picker');

    $variant: map.get($theme, '_meta', 'theme');

    $picker-buttons-padding: map.get((
        'material': rem(8px),
        'fluent': rem(8px),
        'bootstrap': rem(8px),
        'indigo': rem(8px) rem(16px),
    ), $variant);

    $picker-header-padding: map.get((
        'material': rem(16px) rem(24px),
        'fluent': rem(16px),
        'bootstrap': rem(16px),
        'indigo': rem(16px),
    ), $variant);

    %time-picker-display {
        @include sizable();

        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});

        display: flex;
        flex-flow: column nowrap;
        border-radius: var-get($theme, 'border-radius');
        box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color'),
            var-get($theme, 'modal-elevation');
        background: var-get($theme, 'background-color');
        overflow: hidden;
        min-width: fit-content;

        igx-divider {
            --color: #{var-get($theme, 'divider-color')};
        }
    }

    %time-picker__main {
        flex: 1 1 auto;
    }

    %time-picker__main--vertical {
        display: flex;
        flex-grow: 1;
    }

    %time-picker__body--vertical {
        flex-grow: 1;
    }

    %time-picker--dropdown {
        min-width: sizable(rem(290px), rem(314px), rem(360px));
        box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color'),
            var-get($theme, 'dropdown-elevation');

        %time-picker__body {
            min-width: auto;
        }
    }

    %time-picker__body {
        display: flex;
        min-width: sizable(rem(290px), rem(314px), rem(360px));
        padding-block: rem(16px);
        justify-content: center;
    }

    %time-picker__wrapper {
        display: flex;
        flex-direction: column;
    }

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

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

    %time-picker__hourList {
        text-align: end;

        [dir='rtl'] & {
            order: 2;
        }
    }

    %time-picker__minuteList {
        text-align: center;

        [dir='rtl'] & {
            order: 1;
        }
    }

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

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

        [dir='rtl'] & {
            order: 3;
        }
    }

    %time-picker__column {
        width: if($variant == 'indigo', rem(54px), rem(64px));
        padding: 0;
        cursor: pointer;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: center;
        color: var-get($theme, 'text-color');
        overflow: hidden;
        gap: rem(4px);

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

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

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

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

    %time-picker__item:not(%time-picker__item--selected) {
        font-size: sizable(var(--ig-body-2-font-size), var(--ig-body-2-font-size), var(--ig-body-1-font-size));
        font-weight: sizable(var(--ig-body-2-font-weight), var(--ig-body-2-font-weight), var(--ig-body-1-font-weight));
        font-style: sizable(var(--ig-body-2-font-style), var(--ig-body-2-font-style), var(--ig-body-1-font-style));
        line-height: sizable(var(--ig-body-2-line-height), var(--ig-body-2-line-height), var(--ig-body-1-line-height));
        letter-spacing: sizable(var(--ig-body-2-letter-spacing), var(--ig-body-2-letter-spacing), var(--ig-body-1-letter-spacing));
        text-transform: sizable(var(--ig-body-2-text-transform), var(--ig-body-2-text-transform), var(--ig-body-1-text-transform));
    }

    %time-picker__item--selected {
        color: var-get($theme, 'selected-text-color');
    }

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

        &:hover,
        &:focus {
            color: var-get($theme, 'active-item-foreground');
        }
    }

    %time-picker__item--disabled {
        color: var-get($theme, 'disabled-text-color');
        background: var-get($theme, 'disabled-item-background');
        pointer-events: none;
    }

    %time-picker__header {
        display: flex;
        flex-direction: column;

        padding: $picker-header-padding;

        @if $variant == 'indigo' {
            gap: rem(2px);
        }

        background: var-get($theme, 'header-background');
    }

    %time-picker-display:not(%time-picker-display--vertical) {
        %time-picker__header {
            @if $variant == 'indigo' {
                border-block-end: rem(1px) solid var-get($theme, 'divider-color');
            }
        }
    }

    %time-picker__header--vertical {
        @if $variant == 'indigo' {
            min-width: rem(136px);
            border-inline-end: rem(1px) solid var-get($theme, 'divider-color');
        } @else {
            min-width: rem(168px);
        }
    }

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

        [dir='rtl'] & {
            flex-direction: row-reverse;
            justify-content: flex-end;
        }
    }

    %time-picker__buttons {
        display: flex;
        min-height: sizable(rem(40px), rem(44px), rem(48px));
        justify-content: flex-end;
        align-items: center;
        padding: $picker-buttons-padding;
        gap: rem(8px);

        @if $variant == 'indigo' {
            [igxbutton] {
                min-width: rem(88px);
            }
        }
    }

    %time-picker__buttons--vertical {
        align-items: flex-end;
    }
}

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

    %time-picker__header-hour {
        @include type-style($header-hour, false) {
            margin-top: 0;
            margin-bottom: 0;
        }
    }

    %time-picker__item--selected {
        @include type-style($selected-time) {
            margin-top: 0;
            margin-bottom: 0;
        }
    }
}