import React, { forwardRef } from "react";
import cls from "classnames";
// TODO: #1008 Избавиться от импортов и переделать addFocus
import "focus-visible";
import { getStaticVariants, getDynamicVariants, getIntersectionStyles } from "./utils";
/* eslint-disable no-underscore-dangle */ export const _component = (componentConfig)=>{
    const { tag, base, name, intersections, invariants, responsive } = componentConfig;
    const staticVariants = getStaticVariants(componentConfig);
    const dynamicVariants = getDynamicVariants(componentConfig);
    const component = /*#__PURE__*/ forwardRef((props, ref)=>{
        const { className, as, forwardedAs, responsive: responsiveProp, ...rest } = props;
        const variants = dynamicVariants(rest);
        const intersectionStyles = getIntersectionStyles(rest, intersections);
        const rootClassName = cls(className, base, ...staticVariants, ...variants, ...intersectionStyles, responsiveProp && responsive, invariants);
        // styled-components do it inside
        // filter props
        const baseProps = {};
        for(const key in rest){
            if (!(key in componentConfig.variations)) {
                baseProps[key] = rest[key];
            }
        }
        baseProps.ref = ref;
        // styled-components do it inside
        // add props that should be attr( disabled for example)
        const htmlAttrs = {};
        for(const key in componentConfig.variations || {}){
            if (key in rest) {
                const variant = componentConfig.variations[key];
                const { attrs } = variant;
                if (typeof attrs === 'boolean') {
                    htmlAttrs[key] = rest[key];
                }
            }
        }
        const Root = as || forwardedAs || tag;
        return /*#__PURE__*/ React.createElement(Root, {
            className: rootClassName,
            ...htmlAttrs,
            ...baseProps
        });
    });
    if (name) {
        component.displayName = name;
    }
    return component;
};
