import React, { forwardRef } from "react";
import { safeUseId } from "../../utils";
import { base as viewCSS } from "./variations/_view/base";
import { base as sizeCSS } from "./variations/_size/base";
import { SpinnerSvg } from "./SpinnerSvg";
import { SpinnerWrapper, base } from "./Spinner.styles";
import { useInnerProps } from "./hooks";
export const spinnerRoot = (Root)=>/*#__PURE__*/ forwardRef((props, ref)=>{
        const { id, width, height, style, ...rest } = props;
        const innerProps = useInnerProps(props, {
            wrapperWidth: 'auto',
            wrapperHeight: 'auto',
            svgWidth: 'var(--plasma-spinner-size)',
            svgHeight: 'var(--plasma-spinner-size)',
            color: 'currentColor'
        });
        const uniqId = safeUseId;
        const innerId = id || uniqId();
        const rootStyle = width && height ? {
            ...style,
            width: innerProps.wrapperWidth,
            height: innerProps.wrapperHeight
        } : style;
        return /*#__PURE__*/ React.createElement(Root, {
            ref: ref,
            id: innerId,
            ...rest,
            style: rootStyle
        }, /*#__PURE__*/ React.createElement(SpinnerWrapper, {
            width: innerProps.wrapperWidth,
            height: innerProps.wrapperHeight
        }, /*#__PURE__*/ React.createElement(SpinnerSvg, {
            id: innerId,
            width: innerProps.svgWidth,
            height: innerProps.svgHeight,
            color: innerProps.color
        })));
    });
export const spinnerConfig = {
    name: 'Spinner',
    tag: 'div',
    layout: spinnerRoot,
    base,
    variations: {
        size: {
            css: sizeCSS
        },
        view: {
            css: viewCSS
        }
    },
    defaults: {
        size: 'm',
        view: 'accent'
    }
};
