/* eslint-disable @typescript-eslint/ban-ts-comment */
import { transform } from '@xstyled/core';
import { createX } from '@xstyled/styled-components';
import { flattenStrings } from '@xstyled/util';
import scStyled, { createGlobalStyle as scCreateGlobalStyle, css as scCss, } from 'styled-components';
import { system } from '../system';
/** Creates enhanced 'styled' function with optional style generators and prop-forwarding safeguard. */
function createBaseStyled(css, generator) {
    const config = generator ? forwardPropConfig(generator) : {};
    return ((component) => {
        const baseStyled = config ? scStyled(component).withConfig(config) : scStyled(component);
        return getCreateStyle(baseStyled, css, generator);
    });
}
/** Enhances createGlobalStyle function with custom 'css' helper. */
function createCreateGlobalStyle() {
    const css = createCssFunction();
    return ((...args) => scCreateGlobalStyle([
        // @ts-ignore
        css(...args),
    ]));
}
/** Enhances styled-components' 'css' function with automatic theming. */
function createCssFunction() {
    return ((...args) => {
        const scCssArgs = scCss(...args);
        const flattenedArgs = flattenStrings(scCssArgs);
        return flattenedArgs.map(transform);
    });
}
/**
 * Creates full 'styled' function with properties for components.
 * Includes base version and system version using 'Box' postfix.
 */
function createStyled(generator) {
    const css = createCssFunction();
    const styled = createBaseStyled(css);
    const vstyled = createBaseStyled(css, generator);
    Object.keys(scStyled).forEach(key => {
        // @ts-ignore
        styled[key] = styled(key);
        // @ts-ignore
        styled[`${key}Box`] = vstyled(key);
    });
    return styled;
}
/** Provides configuration to the 'styled' function, which filters out xstyled system props. */
function forwardPropConfig(generator) {
    return {
        shouldForwardProp: (prop, defaultValidatorFn) => {
            if (typeof prop === 'string' && generator.meta.props.includes(prop))
                return false;
            return defaultValidatorFn(prop);
        },
    };
}
/** Extends styled component with a given styles generator (system). */
function getCreateStyle(baseCreateStyle, css, generator) {
    const createStyle = (...args) => baseCreateStyle `${css(...args)}${generator}`;
    createStyle.attrs = (attrs) => getCreateStyle(baseCreateStyle.attrs(attrs), css, generator);
    createStyle.withConfig = (config) => getCreateStyle(baseCreateStyle.withConfig(config), css, generator);
    return createStyle;
}
export const createGlobalStyle = createCreateGlobalStyle();
export const css = createCssFunction();
export const v = createX(system);
export const styled = createStyled(system);
export default styled;
//# sourceMappingURL=styled.js.map