@import '../ripple/ripple-theme';
@import '../ripple/ripple-component';

////
/// @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>
////

/// @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} $label-color [null]- The text color used for the label text.
/// @param {Color} $empty-color [null] - The unchecked border color.
/// @param {Color} $fill-color [null] - The checked border and dot colors.
/// @param {Color} $disabled-color [null] - The disabled border and dot colors.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
///
/// Set light to true when the surrounding area is dark.
/// @example scss Change the checked dot and border colors
///   $my-radio-theme: igx-radio-theme($fill-color: magenta);
///   // Pass the theme to the igx-radio component mixin
///   @include igx-radio($my-radio-theme);
@function igx-radio-theme(
    $palette: $default-palette,
    $schema: $light-schema,

    $label-color: null,
    $empty-color: null,
    $fill-color: null,
    $fill-hover-border-color:null,
    $disabled-color: null,
    $hover-color: null

) {
    $name: 'igx-radio';
    $radio-schema: ();

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

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

    @return extend($theme, (
        name: $name,
        palette: $palette,
        label-color: $label-color,
        empty-color: $empty-color,
        fill-color: $fill-color,
        fill-hover-border-color: $fill-hover-border-color,
        disabled-color: $disabled-color,
        hover-color: $hover-color,
    ));
}

/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires {mixin} igx-css-vars
/// @requires {mixin} scale-in-out
/// @requires {mixin} animation
/// @requires {mixin} igx-ripple
/// @requires {mixin} hide-default
/// @requires igx-ripple-theme
/// @requires em
/// @requires --var
@mixin igx-radio($theme) {
    @include igx-root-css-vars($theme);
    @include scale-in-out($start-scale: .9);

    $label-margin: em(8px);
    $size: em(20px);
    $left: if-ltr(left, right);
    $right: if-ltr(right, left);

    $border-width: map-get((
        material: 2px,
        fluent: 1px
    ), map-get($theme, variant));

    $radio-hover-scale: map-get((
        material: null,
        fluent: scale3d(.5, .5, .5)
    ), map-get($theme, variant));

    $ripple-display: map-get((
        material: block,
        fluent: none
    ), map-get($theme, variant));

    $border-style: rem($border-width) solid;
    $border-radius: 50% 50%;

    $transition: all .2s ease-in;

    $ripple-size: em(48px);
    $ripple-radius: $ripple-size / 2;

    $ripple-theme: igx-ripple-theme(
        $color: --var($theme, 'fill-color')
    );

    %radio-display {
        position: relative;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        color: --var($theme, 'label-color');
    }

    %radio-input {
        @include hide-default();
    }

    %radio-display--disabled {
        pointer-events: none;
        color: --var($theme, 'disabled-color');
        user-select: none;
    }

    %radio-composite {
        position: relative;
        display: inline-block;
        width: $size;
        height: $size;
        min-width: $size;
        line-height: $size;
        cursor: pointer;
        color: --var($theme, 'label-color');
        user-select: none;

        &::before,
        &::after {
            position: absolute;
            content: '';
            width: $size;
            height: $size;
            left: 0;
            top: 0;
            border-radius: $border-radius;
        }

        &::before {
            backface-visibility: hidden;
            transform: scale3d(0, 0, 0);
            transition: $transition;
        }

        &::after {
            border: $border-style --var($theme, 'empty-color');
        }
    }

    %radio-composite--x {
        &::before {
            border: $border-style --var($theme, 'fill-color');
            background: --var($theme, 'fill-color');
            transform: scale3d(.5, .5, .5);
        }

        &::after {
            border: $border-style --var($theme, 'fill-color');
        }
    }

    %igx-radio-hover__composite {
        &::before {
            background: --var($theme, 'hover-color');
            transform: $radio-hover-scale;
        }
    }

    %igx-radio--checked-active__composite {
        &::before {
            border-color: --var($theme, 'fill-hover-border-color');
            background: --var($theme, 'fill-hover-border-color');
        }

        &::after {
            border-color: --var($theme, 'fill-hover-border-color');
        }
    }

    %radio-composite--disabled {
        &::after {
            border: $border-style --var($theme, 'disabled-color');
        }
    }

    %radio-composite--x--disabled {
        &::after {
            border: $border-style --var($theme, 'disabled-color');
        }

        &::before {
            background: --var($theme, 'disabled-color');
            border: $border-style transparent;
        }
    }

    %radio-label {
        color: currentColor;
        cursor: pointer;
        user-select: none;
        word-wrap: break-all;

        &:empty {
            display: none;
        }
    }

    %radio-label--after {
        margin-#{$left}: $label-margin;
    }

    %radio-label--before {
        order: -1;
        margin-#{$right}: $label-margin;
    }

    %radio-label--before,
    %radio-label--after {
        &:empty {
            margin: 0;
        }
    }

    %radio-ripple {
        @include igx-ripple($ripple-theme);
        @include igx-css-vars($ripple-theme);
        display: $ripple-display;
        position: absolute;
        top: calc(50% - #{$ripple-radius});
        left: calc(50% - #{$ripple-radius});
        width: $ripple-size;
        height: $ripple-size;
        border-radius: $ripple-radius;
        overflow: hidden;
        pointer-events: none;
        filter: opacity(1);
    }

    %radio-ripple--focused {
        @include animation('scale-in-out' 1s $ease-out-quad infinite);
        background: --var($theme, 'empty-color');
        transition: background .2s $ease-out-quad;
        opacity: .12;
    }

    %radio-ripple--focused-checked {
        background: --var($theme, 'fill-color');
    }

    %radio-ripple--hover {
        &::after {
            position: absolute;
            content: '';
            opacity: .06;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    }

    %radio-ripple--hover-unchecked {
        &::after {
            background: --var($theme, 'empty-color');
        }
    }

    %radio-ripple--hover-checked {
        &::after {
            background: --var($theme, 'fill-color');
        }
    }

    %radio-ripple--pressed {
        &::after {
            opacity: .12;
        }
    }
}

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

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