@use '../../../../utils/map' as *;
@use '../../../../typography/functions' as *;

////
/// @package theming
/// @group schemas
/// @access public
////

/// Generates a light chat component schema.
/// @type Map
/// @prop {Map} background [color: ('surface', 500)] - The background color of the chat component.
/// @prop {Map} header-background [color: ('surface', 500)] - The background color of the chat header.
/// @prop {Map} header-color [contrast-color: ('surface', 500)] - The text color of the chat header.
/// @prop {Color} header-border [transparent] - The color used for the chat header border.
/// @prop {Map} sent-message-background [color: ('gray', 200)] - The background color for sent messages.
/// @prop {Map} sent-message-color [color: ('gray', 800)] - The text color for sent messages.
/// @prop {Map} received-message-background [transparent] - The background color for received messages.
/// @prop {Map} received-message-color [color: ('gray', 800)] - The text color for received messages.
/// @prop {Map} message-actions-color [color: ('gray', 700)] - The icon color of the chat message actions.
/// @prop {Map} file-background [contrast-color: ('gray', 900)] - The background color of the image message container.
/// @prop {Map} file-icon-color [color: ('gray', 500)] - The color of the attached file icon.
/// @prop {Map} file-icon-accent-color [color: ('gray', 600)] - The accent color of the attached file icon.
/// @prop {Map} image-background [color: ('gray', 100)] - The background color of the image message container.
/// @prop {Map} image-border [color: ('gray', 300)] - The border color of the image message container.
/// @prop {Map} image-attachment-icon [color: ('gray', 900)] - The color of the message attachment icon.
/// @prop {Map} chat-input-border [color: ('gray', 400)] - The border color of the chat input area.
/// @prop {Map} progress-indicator-color [color: ('secondary', 500)] - The color of the progress indicator in the chat component.
/// @prop {Map} code-background [color: ('gray', 50)] - The background color of the code snippets in the chat component.
/// @prop {Map} code-border [color: ('gray', 300)] - The border color of the code snippets in the chat component.
$light-chat: (
    background: (
        color: (
            'surface',
            500,
        ),
    ),
    header-background: (
        color: (
            'surface',
            500,
        ),
    ),
    header-color: (
        contrast-color: (
            'surface',
            500,
        ),
    ),
    header-border: (
        color: (
            'transparent',
        ),
    ),
    sent-message-background: (
        color: (
            'gray',
            200,
        ),
    ),
    sent-message-color: (
        color: (
            'gray',
            800,
        ),
    ),
    received-message-background: transparent,
    received-message-color: (
        color: (
            'gray',
            800,
        ),
    ),
    message-actions-color: (
        color: (
            'gray',
            700,
        ),
    ),
    file-background: (
        contrast-color: (
            'gray',
            900,
        ),
    ),
    file-icon-color: (
        color: (
            'gray',
            500,
        ),
    ),
    file-icon-accent-color: (
        color: (
            'gray',
            600,
        ),
    ),
    image-background: (
        color: (
            'gray',
            100,
        ),
    ),
    image-border: (
        color: (
            'gray',
            300,
        ),
    ),
    image-attachment-icon: (
        color: (
            'gray',
            900,
        ),
    ),
    chat-input-border: (
        color: (
            'gray',
            400,
        ),
    ),
    progress-indicator-color: (
        color: (
            'secondary',
            500,
        ),
    ),
    code-background: (
        color: (
            'gray',
            50,
        ),
    ),
    code-border: (
        color: (
            'gray',
            300,
        ),
    ),
    typography: (
        message: (
            value: 'body-1',
        ),
    ),
    _meta: (
        'name': 'chat',
        'variant': 'light',
    ),
);

/// Generates a light material chat schema.
/// @type Map
/// @prop {List} message-border-radius [border-radius: (rem(24px), rem(0), rem(24px))] - The border radius applied to chat messages.
/// @requires $light-chat
$material-chat: extend(
    $light-chat,
    (
        message-border-radius: (
            border-radius: (
                rem(24px),
                rem(0),
                rem(24px),
            ),
        ),
        _meta: (
            theme: 'material',
        ),
    )
);

/// Generates a light fluent chat schema.
/// @type Map
/// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the chat component.
/// @prop {Map} header-color [color: ('gray', 900)] - The text color of the chat header.
/// @prop {Map} message-actions-color [color: ('primary', 500)] - The icon color of the chat message actions.
/// @prop {List} message-border-radius [border-radius: (rem(24px), rem(0), rem(24px))] - The border radius applied to chat messages.
/// @requires $light-chat
$fluent-chat: extend(
    $light-chat,
    (
        background: (
            contrast-color: (
                'gray',
                900,
            ),
        ),
        header-color: (
            color: (
                'gray',
                900,
            ),
        ),
        message-actions-color: (
            color: (
                'primary',
                500,
            ),
        ),
        message-border-radius: (
            border-radius: (
                rem(24px),
                rem(0),
                rem(24px),
            ),
        ),
        _meta: (
            theme: 'fluent',
        ),
    )
);

/// Generates a light bootstrap chat schema.
/// @type Map
/// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the chat component.
/// @prop {Map} header-border [color: ('gray', 300)] - The color used for the chat header border.
/// @prop {Map} code-border [color: ('gray', 400)] - The border color of the code snippets in the chat component.
/// @prop {List} message-border-radius [border-radius: (rem(8px), rem(0), rem(24px))] - The border radius applied to chat messages.
/// @requires $light-chat
$bootstrap-chat: extend(
    $light-chat,
    (
        background: (
            contrast-color: (
                'gray',
                900,
            ),
        ),
        header-border: (
            color: (
                'gray',
                300,
            ),
        ),
        code-border: (
            color: (
                'gray',
                400,
            ),
        ),
        message-border-radius: (
            border-radius: (
                rem(8px),
                rem(0),
                rem(24px),
            ),
        ),
        _meta: (
            theme: 'bootstrap',
        ),
    )
);

/// Generates a light indigo chat schema.
/// @type Map
/// @prop {Map} header-color [color: ('gray', 800)] - The text color of the chat header.
/// @prop {Map} header-border [color: ('primary', 500)] - The color used for the chat header border.
/// @prop {Map} file-background [color: ('gray', 100)] - The background color of the image message container.
/// @prop {Map} message-actions-color [color: ('gray', 600)] - The icon color of the chat message actions.
/// @prop {List} message-border-radius [border-radius: (rem(8px), rem(0), rem(24px))] - The border radius applied to chat messages.
/// @prop {Map} progress-indicator-color [color: ('info', 500)] - The color of the progress indicator in the chat component.
/// @prop {Map} image-attachment-icon [color: ('info', 500)] - The color of the message attachment icon.
/// @prop {Map} code-border [color: ('gray', 400)] - The border color of the code snippets in the chat component.
/// @requires $light-chat
$indigo-chat: extend(
    $light-chat,
    (
        header-color: (
            color: (
                'gray',
                800,
            ),
        ),
        header-border: (
            color: (
                'primary',
                500,
            ),
        ),
        file-background: (
            color: (
                'gray',
                100,
            ),
        ),
        message-actions-color: (
            color: (
                'gray',
                600,
            ),
        ),
        message-border-radius: (
            border-radius: (
                rem(8px),
                rem(0),
                rem(24px),
            ),
        ),
        progress-indicator-color: (
            color: (
                'info',
                500,
            ),
        ),
        image-attachment-icon: (
            color: (
                'info',
                500,
            ),
        ),
        code-border: (
            color: (
                'gray',
                400,
            ),
        ),
        _meta: (
            theme: 'indigo',
        ),
    )
);