@use 'sass:map';
@use 'sass:meta';
@use '../../base' as *;
@use '../../themes/schemas' as *;
@use 'igniteui-theming/sass/animations/easings' as *;

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

/// Expansion panel Theme
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $header-background [null] - The panel header background color.
/// @param {Color} $header-focus-background [null] - The panel header focus background color.
/// @param {Color} $header-title-color [null] - The panel header title text color.
/// @param {Color} $header-description-color [null] - The panel header description text color.
/// @param {Color} $header-icon-color [null] - The panel header icon color.
/// @param {Color} $body-color [null] - The panel body text color.
/// @param {Color} $body-background [null] - The panel body background color.
/// @param {Color} $disabled-text-color [null] - The panel disabled text color.
/// @param {Color} $disabled-description-color [null] - The panel disabled header description text color.
/// @param {Number} $expanded-margin [null] - The expansion panel margin in expanded state when positioned inside accordion.
/// @param {List} $border-radius [null] - The border radius used for expansion-panel component.
/// @requires $light-material-schema
/// @example scss Change the header background color
///   $my-expansion-panel-theme: expansion-panel-theme($header-background: black);
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-expansion-panel-theme);
@function expansion-panel-theme(
    $schema: $light-material-schema,

    $border-radius: null,
    $header-background: null,
    $header-focus-background: null,
    $header-title-color: null,
    $header-description-color: null,
    $header-icon-color: null,
    $body-color: null,
    $body-background: null,
    $disabled-text-color: null,
    $disabled-description-color: null,
    $expanded-margin: null
) {
    $name: 'igx-expansion-panel';
    $expansion-panel-schema: ();

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

    $theme: digest-schema($expansion-panel-schema);
    $meta: map.get($theme, '_meta');

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

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

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

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

    @return extend($theme, (
        name: $name,
        header-background: $header-background,
        border-radius: $border-radius,
        header-focus-background: $header-focus-background,
        header-title-color: $header-title-color,
        header-description-color: $header-description-color,
        header-icon-color: $header-icon-color,
        body-color: $body-color,
        body-background: $body-background,
        disabled-text-color: $disabled-text-color,
        disabled-description-color: $disabled-description-color,
        expanded-margin: $expanded-margin,
        theme: map.get($schema, '_meta', 'theme'),
        _meta: map.merge(if($meta, $meta, ()), (
            variant: map.get($schema, '_meta', 'theme')
        )),
    ));
}

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin expansion-panel($theme) {
    @include css-vars($theme);
    $variant: map.get($theme, '_meta', 'variant');

    $panel-padding: rem(16px) rem(24px);
    $panel-padding-header-indigo: rem(10px) rem(16px);
    $panel-padding-body-indigo: rem(4px) rem(16px) rem(16px) rem(16px);

    %igx-expansion-panel {
        display: flex;
        flex-direction: column;
        border-radius: var-get($theme, 'border-radius');
        overflow: hidden;
        transition: margin 350ms $out-quad;
    }

    %igx-expansion-panel__header-title {
        color: var-get($theme, 'header-title-color');
        margin-inline-end: rem(16px, 16px);
    }

    %igx-expansion-panel__header-description {
        color: var-get($theme, 'header-description-color');
    }

    %igx-expansion-panel__header-title,
    %igx-expansion-panel__header-description {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    %igx-accordion {
        overflow-y: auto;

        %igx-expansion-panel__header-title {
            @include line-clamp(4, true, true);

            white-space: initial;
            word-wrap: break-word;
        }

        %igx-expansion-panel--expanded {
            margin: var-get($theme, 'expanded-margin') 0;

            &:first-of-type {
                margin-top: 0;
            }

            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }

    %igx-expansion-panel__header-inner {
        display: flex;
        align-items: center;
        padding: $panel-padding;
        cursor: pointer;
        background: var-get($theme, 'header-background');

        &:focus,
        &:active
        {
            background: var-get($theme, 'header-focus-background');
            outline: transparent;
        }

        @if $variant == 'indigo' {
            padding: $panel-padding-header-indigo;
        }
    }

    %igx-expansion-panel__title-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 0 0%;
        overflow: hidden;

        @if $variant == 'indigo' {
            %igx-expansion-panel__header-title {
                margin-block-end: rem(2px);
            }
        }
    }

    %igx-expansion-panel__header-icon--end {
        order: 1;
        margin-inline-start: rem(16px, 16px);

        @if $variant == 'indigo' {
            margin-inline-start: rem(8px, 16px);
        }
    }

    %igx-expansion-panel__header-icon--start {
        order: -1;
        margin-inline-end: rem(16px, 16px);

        @if $variant == 'indigo' {
            margin-inline-end: rem(8px, 16px);
        }
    }

    %igx-expansion-panel__header-icon--none {
        display: none;
    }

    %igx-expansion-panel__header-icon--end,
    %igx-expansion-panel__header-icon--start {
        display: flex;
        align-content: center;
        justify-content: center;
        user-select: none;

        color: var-get($theme, 'header-icon-color');

        igx-icon {
            --component-size: 3;
            color: var-get($theme, 'header-icon-color');
        }

        @if $variant == 'indigo' {
            igx-icon {
                --component-size: 2;
            }
        }
    }

    %igx-expansion-panel__body {
        color: var-get($theme, 'body-color');
        background: var-get($theme, 'body-background');
        overflow: hidden;
        padding: $panel-padding;

        @if $variant == 'indigo' {
            padding: $panel-padding-body-indigo;
        }
    }

    %igx-expansion-panel--disabled {
        pointer-events: none;

        %igx-expansion-panel__header-title {
            color: var-get($theme, 'disabled-text-color')
        }

        %igx-expansion-panel__header-description {
            color: var-get($theme, 'disabled-description-color')
        }

        %igx-expansion-panel__header-icon--start,
        %igx-expansion-panel__header-icon--end {
            igx-icon {
                color: var-get($theme, 'disabled-text-color');
            }
        }
    }
}

/// Adds typography styles for the igx-expansion-panel component.
/// @group typography
/// @param {Map} $categories [(title: 'h5', description: 'subtitle-2', body: 'body-2')] - The categories from the typographic scale used for type styles.
@mixin expansion-panel-typography($categories: (
    title: 'h5',
    description: 'subtitle-2',
    body: 'body-2')
) {
    $title: map.get($categories, 'title');
    $description: map.get($categories, 'description');
    $body: map.get($categories, 'body');

    %igx-expansion-panel__header-title {
        @include type-style($title) {
            margin: 0;
        }
    }

    %igx-expansion-panel__header-description {
        @include type-style($description) {
            margin: 0;
        }
    }

    %igx-expansion-panel__body {
        @include type-style($body) {
            margin: 0;
        }
    }
}