import React, { forwardRef } from "react";
import cls from "classnames";
import { base as viewCSS } from "./variations/_view/base";
import { base as sizeCSS } from "./variations/_size/base";
import { base as pointerSizeCSS } from "./variations/_pointer-size/base";
import { base as disabledCSS } from "./variations/_disabled/base";
import { SingleSlider, DoubleSlider } from "./components";
import { classes } from "./Slider.tokens";
const isSingleValueProps = (props, type)=>typeof props.value === 'number' || type === 'single' && typeof props.value !== 'object';
const isDoubleValueProps = (props, type)=>typeof props.value === 'object' || type === 'double';
export const sliderRoot = (Root)=>/*#__PURE__*/ forwardRef(({ type = 'single', view, size, pointerSize, disabled, className, style, ...props }, ref)=>{
        const doublePointerSize = pointerSize === 'none' ? 'small' : pointerSize;
        if (isSingleValueProps(props, type)) {
            return /*#__PURE__*/ React.createElement(Root, {
                ref: ref,
                view: view,
                size: size,
                pointerSize: pointerSize,
                disabled: disabled,
                className: cls(className, {
                    [classes.verticalOrientation]: props.orientation === 'vertical'
                }),
                style: style
            }, /*#__PURE__*/ React.createElement(SingleSlider, {
                disabled: disabled,
                pointerSize: pointerSize,
                ...props
            }));
        }
        return /*#__PURE__*/ React.createElement(Root, {
            ref: ref,
            view: view,
            size: size,
            pointerSize: doublePointerSize,
            disabled: disabled,
            className: className,
            style: style
        }, isDoubleValueProps(props, type) && /*#__PURE__*/ React.createElement(DoubleSlider, {
            disabled: disabled,
            ...props
        }));
    });
export const sliderConfig = {
    name: 'Slider',
    tag: 'div',
    layout: sliderRoot,
    base: '',
    variations: {
        view: {
            css: viewCSS
        },
        size: {
            css: sizeCSS
        },
        pointerSize: {
            css: pointerSizeCSS
        },
        disabled: {
            css: disabledCSS,
            attrs: true
        }
    },
    defaults: {
        view: 'default',
        size: 'm'
    }
};
