'use client';

import { c as _c } from "react/compiler-runtime";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useState } from 'react'; // TODO: abstract this out to support all routers
import { Link } from '../Link/index.js';
import { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js';
import './index.scss';
const baseClass = 'pill';
const DraggablePill = props => {
  const $ = _c(12);
  const {
    id,
    className
  } = props;
  let t0;
  if ($[0] !== id) {
    t0 = {
      id
    };
    $[0] = id;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  const {
    attributes,
    isDragging,
    listeners,
    setNodeRef,
    transform
  } = useDraggableSortable(t0);
  const t1 = isDragging && `${baseClass}--is-dragging`;
  let t2;
  if ($[2] !== className || $[3] !== t1) {
    t2 = [t1, className].filter(Boolean);
    $[2] = className;
    $[3] = t1;
    $[4] = t2;
  } else {
    t2 = $[4];
  }
  const t3 = t2.join(" ");
  let t4;
  if ($[5] !== attributes || $[6] !== listeners || $[7] !== props || $[8] !== setNodeRef || $[9] !== t3 || $[10] !== transform) {
    t4 = _jsx(StaticPill, {
      ...props,
      className: t3,
      elementProps: {
        ...listeners,
        ...attributes,
        ref: setNodeRef,
        style: {
          transform
        }
      }
    });
    $[5] = attributes;
    $[6] = listeners;
    $[7] = props;
    $[8] = setNodeRef;
    $[9] = t3;
    $[10] = transform;
    $[11] = t4;
  } else {
    t4 = $[11];
  }
  return t4;
};
const StaticPill = props => {
  const $ = _c(27);
  const {
    id,
    alignIcon: t0,
    "aria-checked": ariaChecked,
    "aria-controls": ariaControls,
    "aria-expanded": ariaExpanded,
    "aria-label": ariaLabel,
    children,
    className,
    draggable,
    elementProps,
    icon,
    onClick,
    pillStyle: t1,
    rounded,
    size: t2,
    to
  } = props;
  const alignIcon = t0 === undefined ? "right" : t0;
  const pillStyle = t1 === undefined ? "light" : t1;
  const size = t2 === undefined ? "medium" : t2;
  const [isHydrated, setIsHydrated] = useState(false);
  let t3;
  let t4;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = () => {
      setIsHydrated(true);
    };
    t4 = [];
    $[0] = t3;
    $[1] = t4;
  } else {
    t3 = $[0];
    t4 = $[1];
  }
  useEffect(t3, t4);
  const isButton = onClick && !to;
  const t5 = `${baseClass}--style-${pillStyle}`;
  const t6 = `${baseClass}--size-${size}`;
  const t7 = className && className;
  const t8 = to && `${baseClass}--has-link`;
  const t9 = (to || onClick) && `${baseClass}--has-action`;
  const t10 = icon && `${baseClass}--has-icon`;
  const t11 = icon && `${baseClass}--align-icon-${alignIcon}`;
  const t12 = draggable && `${baseClass}--draggable`;
  const t13 = rounded && `${baseClass}--rounded`;
  let t14;
  if ($[2] !== t10 || $[3] !== t11 || $[4] !== t12 || $[5] !== t13 || $[6] !== t5 || $[7] !== t6 || $[8] !== t7 || $[9] !== t8 || $[10] !== t9) {
    t14 = [baseClass, t5, t6, t7, t8, t9, t10, t11, t12, t13].filter(Boolean);
    $[2] = t10;
    $[3] = t11;
    $[4] = t12;
    $[5] = t13;
    $[6] = t5;
    $[7] = t6;
    $[8] = t7;
    $[9] = t8;
    $[10] = t9;
    $[11] = t14;
  } else {
    t14 = $[11];
  }
  const classes = t14.join(" ");
  let Element = "div";
  if (isButton) {
    Element = "button";
  }
  if (to) {
    Element = Link;
  }
  const t15 = isButton ? !isHydrated : undefined;
  const t16 = to || null;
  const t17 = isButton ? "button" : undefined;
  let t18;
  if ($[12] !== Element || $[13] !== ariaChecked || $[14] !== ariaControls || $[15] !== ariaExpanded || $[16] !== ariaLabel || $[17] !== children || $[18] !== classes || $[19] !== elementProps || $[20] !== icon || $[21] !== id || $[22] !== onClick || $[23] !== t15 || $[24] !== t16 || $[25] !== t17) {
    t18 = _jsxs(Element, {
      ...elementProps,
      "aria-checked": ariaChecked,
      "aria-controls": ariaControls,
      "aria-expanded": ariaExpanded,
      "aria-label": ariaLabel,
      className: classes,
      disabled: t15,
      href: t16,
      id,
      onClick,
      type: t17,
      children: [_jsx("span", {
        className: `${baseClass}__label`,
        children
      }), Boolean(icon) && _jsx("span", {
        className: `${baseClass}__icon`,
        children: icon
      })]
    });
    $[12] = Element;
    $[13] = ariaChecked;
    $[14] = ariaControls;
    $[15] = ariaExpanded;
    $[16] = ariaLabel;
    $[17] = children;
    $[18] = classes;
    $[19] = elementProps;
    $[20] = icon;
    $[21] = id;
    $[22] = onClick;
    $[23] = t15;
    $[24] = t16;
    $[25] = t17;
    $[26] = t18;
  } else {
    t18 = $[26];
  }
  return t18;
};
export const Pill = props => {
  const {
    draggable
  } = props;
  if (draggable) {
    return /*#__PURE__*/_jsx(DraggablePill, {
      ...props
    });
  }
  return /*#__PURE__*/_jsx(StaticPill, {
    ...props
  });
};
//# sourceMappingURL=index.js.map