'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React, { useEffect, useState } from 'react';
// TODO: abstract this out to support all routers
import { Link } from '../Link/index.js';
/**
   * @default 'light'
   */ import { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js';
import './index.scss';
const baseClass = 'pill';
const DraggablePill = (props)=>{
    const { id, className } = props;
    const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({
        id
    });
    return /*#__PURE__*/ _jsxDEV(StaticPill, {
        ...props,
        className: [
            isDragging && `${baseClass}--is-dragging`,
            className
        ].filter(Boolean).join(' '),
        elementProps: {
            ...listeners,
            ...attributes,
            ref: setNodeRef,
            style: {
                transform
            }
        }
    }, void 0, false, {
        fileName: "src/elements/Pill/index.tsx",
        lineNumber: 63,
        columnNumber: 5
    }, this);
};
const StaticPill = (props)=>{
    const { id, alignIcon = 'right', 'aria-checked': ariaChecked, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, children, className, draggable, elementProps, icon, onClick, pillStyle = 'light', rounded, size = 'medium', to } = props;
    const [isHydrated, setIsHydrated] = useState(false);
    useEffect(()=>{
        setIsHydrated(true);
    }, []);
    const isButton = onClick && !to;
    const classes = [
        baseClass,
        `${baseClass}--style-${pillStyle}`,
        `${baseClass}--size-${size}`,
        className && className,
        to && `${baseClass}--has-link`,
        (to || onClick) && `${baseClass}--has-action`,
        icon && `${baseClass}--has-icon`,
        icon && `${baseClass}--align-icon-${alignIcon}`,
        draggable && `${baseClass}--draggable`,
        rounded && `${baseClass}--rounded`
    ].filter(Boolean).join(' ');
    let Element = 'div';
    if (isButton) {
        Element = 'button';
    }
    if (to) {
        Element = Link;
    }
    return /*#__PURE__*/ _jsxDEV(Element, {
        ...elementProps,
        "aria-checked": ariaChecked,
        "aria-controls": ariaControls,
        "aria-expanded": ariaExpanded,
        "aria-label": ariaLabel,
        className: classes,
        disabled: isButton ? !isHydrated : undefined,
        href: to || null,
        id: id,
        onClick: onClick,
        type: isButton ? 'button' : undefined,
        children: [
            /*#__PURE__*/ _jsxDEV("span", {
                className: `${baseClass}__label`,
                children: children
            }, void 0, false, {
                fileName: "src/elements/Pill/index.tsx",
                lineNumber: 145,
                columnNumber: 7
            }, this),
            Boolean(icon) && /*#__PURE__*/ _jsxDEV("span", {
                className: `${baseClass}__icon`,
                children: icon
            }, void 0, false, {
                fileName: "src/elements/Pill/index.tsx",
                lineNumber: 146,
                columnNumber: 25
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/Pill/index.tsx",
        lineNumber: 132,
        columnNumber: 5
    }, this);
};
export const Pill = (props)=>{
    const { draggable } = props;
    if (draggable) {
        return /*#__PURE__*/ _jsxDEV(DraggablePill, {
            ...props
        }, void 0, false, {
            fileName: "src/elements/Pill/index.tsx",
            lineNumber: 155,
            columnNumber: 12
        }, this);
    }
    return /*#__PURE__*/ _jsxDEV(StaticPill, {
        ...props
    }, void 0, false, {
        fileName: "src/elements/Pill/index.tsx",
        lineNumber: 157,
        columnNumber: 10
    }, this);
};

//# sourceMappingURL=index.js.map