@use 'sass:map';
@use '../../config';
@use '../../functions' as *;
@use '../../schemas/' as *;
@use '../../../utils/map' as *;
@use '../../../color/functions' as *;
@use '../../../elevations/' as *;

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

/// Checkbox Theme
///
/// PRIMARY TOKENS:
/// - `$fill-color` — The checked state border and fill color.
/// - `$empty-color` — The unchecked border color.
/// - `$error-color` — The invalid state color.
///
/// Setting just `$fill-color` will theme all checked states consistently.
///
/// @param {Map} $schema [$light-material-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} $label-color-hover [null]- The text color used for the label text on hover. Auto-derived from label-color.
/// @param {Color} $empty-color [null] - The unchecked border color. PRIMARY for unchecked states.
/// @param {Color} $empty-color-hover [null] - The unchecked border color on hover. Auto-derived from empty-color.
/// @param {Color} $empty-fill-color [null] - The unchecked fill color.
/// @param {Color} $fill-color [null] - The checked border and fill colors. PRIMARY - derives tick-color, focus colors.
/// @param {Color} $fill-color-hover [null] - The checked border and fill colors on hover. Auto-derived from fill-color.
/// @param {Color} $tick-color [null] - The checked mark color. Auto-derived from fill-color (contrast).
/// @param {Color} $tick-color-hover [null] - The checked mark color on hover.
/// @param {Number} $tick-width [null] - The checked mark width.
/// @param {Color} $disabled-color [null] - The disabled border and fill colors.
/// @param {Color} $disabled-fill-color [null] - The disabled border and fill colors in checked state. Auto-derived from disabled-color (material/fluent) or disabled-indeterminate-color (bootstrap/indigo).
/// @param {Color} $disabled-tick-color [null] - The checked mark color in disabled state.
/// @param {Color} $disabled-indeterminate-color [null] - The disabled border and fill colors in indeterminate state. Auto-derived from fill-color.
/// @param {Color} $disabled-color-label [null] - The disabled label color.
/// @param {List} $border-radius [null] - The border radius used for checkbox component.
/// @param {List} $border-radius-ripple [null] - The border radius used for checkbox ripple.
/// @param {Color} $focus-outline-color [null] - The focus outlined color. Auto-derived from empty-color (indigo) or fill-color (bootstrap).
/// @param {Color} $focus-outline-color-focused [null] - The focus outlined color for focused state. Auto-derived from fill-color (indigo).
/// @param {Color} $focus-border-color [null] - The focus border color. Auto-derived from fill-color.
/// @param {Color} $error-color [null] - The border and fill colors in invalid state. PRIMARY for error states.
/// @param {Color} $error-color-hover [null] - The border and fill colors in invalid state on hover. Auto-derived from error-color.
/// @param {Color} $focus-outline-color-error [null] - The focus outline error color. Auto-derived from error-color.
/// Set to light when the surrounding area is dark.
///
/// @requires $light-material-schema
///
/// @example scss - Change the checked fill color
///   $my-checkbox-theme: igx-checkbox-theme($fill-color: magenta);
///   // Pass the theme to the css-vars mixin
///   @include css-vars($my-checkbox-theme);
@function checkbox-theme(
    $schema: $light-material-schema,

    $border-radius: null,
    $label-color: null,
    $label-color-hover: null,
    $empty-color: null,
    $empty-color-hover: null,
    $empty-fill-color: null,
    $fill-color: null,
    $fill-color-hover: null,
    $tick-color: null,
    $tick-color-hover: null,
    $tick-width: null,
    $disabled-color: null,
    $disabled-fill-color: null,
    $disabled-tick-color: null,
    $disabled-indeterminate-color: null,
    $disabled-color-label: null,
    $border-radius-ripple: null,
    $focus-outline-color: null,
    $focus-outline-color-focused: null,
    $focus-border-color: null,
    $error-color: null,
    $error-color-hover: null,
    $focus-outline-color-error: null
) {
    $selector: #{config.element-prefix() + '-' + 'checkbox'};
    $checkbox-schema: ();

    @if map.has-key($schema, 'checkbox') {
        $checkbox-schema: map.get($schema, 'checkbox');
    } @else {
        $checkbox-schema: $schema;
    }

    $theme: digest-schema($checkbox-schema);
    $variant: map.get($theme, '_meta', 'theme');

    @if not($empty-color-hover) and $empty-color {
        $empty-color-hover: dynamic-shade(var(--empty-color));
    }

    @if not($fill-color-hover) and $fill-color {
        $fill-color-hover: dynamic-shade(var(--fill-color));
    }

    @if not($tick-color) and $fill-color {
        $tick-color: adaptive-contrast(var(--fill-color));
    }

    @if not($label-color-hover) and $label-color {
        $label-color-hover: dynamic-shade(var(--label-color));
    }

    @if not($focus-border-color) and $fill-color {
        $focus-border-color: var(--fill-color);
    }

    @if not($disabled-indeterminate-color) and $fill-color {
        $disabled-indeterminate-color: hsl(from var(--fill-color) h s l / 0.5);
    }

    @if not($disabled-fill-color) and $fill-color {
        $disabled-fill-color: hsl(from var(--fill-color) h s l / 0.5);
    }

    @if not($disabled-color-label) and $label-color {
        $disabled-color-label: hsl(from var(--label-color) h s l / 0.5);
    }

    @if not($error-color-hover) and $error-color {
        $error-color-hover: dynamic-shade(var(--error-color));
    }

    @if not($focus-outline-color-error) and $error-color {
        $focus-outline-color-error: hsl(from var(--error-color) h s l / 0.5);
    }

    @if $variant == 'bootstrap' {
        @if not($focus-outline-color) and $fill-color {
            $focus-outline-color: hsl(from var(--fill-color) h s l / 0.5);
        }
    }

    @if $variant == 'indigo' {
        @if not($focus-outline-color) and $empty-color {
            $focus-outline-color: hsl(from var(--empty-color) h s l / 0.5);
        }

        @if not($focus-outline-color-focused) and $fill-color {
            $focus-outline-color-focused: hsl(from var(--fill-color) h s l / 0.5);
        }
    }

    @return extend(
        $theme,
        (
            selector: $selector,
            label-color: $label-color,
            label-color-hover: $label-color-hover,
            empty-color: $empty-color,
            empty-color-hover: $empty-color-hover,
            empty-fill-color: $empty-fill-color,
            fill-color: $fill-color,
            fill-color-hover: $fill-color-hover,
            tick-color: $tick-color,
            tick-color-hover: $tick-color-hover,
            tick-width: $tick-width,
            disabled-color: $disabled-color,
            disabled-fill-color: $disabled-fill-color,
            disabled-tick-color: $disabled-tick-color,
            disabled-indeterminate-color: $disabled-indeterminate-color,
            disabled-color-label: $disabled-color-label,
            border-radius: $border-radius,
            border-radius-ripple: $border-radius-ripple,
            focus-outline-color: $focus-outline-color,
            focus-outline-color-focused: $focus-outline-color-focused,
            focus-border-color: $focus-border-color,
            error-color: $error-color,
            error-color-hover: $error-color-hover,
            focus-outline-color-error: $focus-outline-color-error,
        )
    );
}