import {
  Loading
} from "./chunk-J4FJQ3FN.js";
import {
  UnstyledButton
} from "./chunk-3GS5EFXV.js";
import {
  flexCenter
} from "./chunk-FCZJILMW.js";
import {
  Icon
} from "./chunk-RWIZ7Q74.js";
import {
  colors
} from "./chunk-2VBDEO6M.js";

// src/components/Pill.tsx
import styled from "@emotion/styled";
import { useEffect, useRef } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
function Pill({
  text,
  onDeleteMouseDown,
  onDeleteMouseUp,
  onDeleteFromKeyboard,
  icon,
  loading = false,
  cursor = "text",
  isEditing = false,
  onChangeTextInput = () => {
  },
  onFocusTextInput = () => {
  },
  onClickPillBody = () => {
  },
  onBlurTextInput = () => {
  }
}) {
  const textInputRef = useRef(null);
  useEffect(() => {
    if (isEditing && textInputRef.current) {
      textInputRef.current.focus();
    }
  }, [isEditing]);
  function handleOnDeleteMouseDown(event) {
    if (onDeleteMouseDown) {
      event.stopPropagation();
      onDeleteMouseDown(event);
    }
  }
  function handleOnDeleteKeyDown(event) {
    if (onDeleteFromKeyboard) {
      event.stopPropagation();
      if (event.key === "Enter") {
        onDeleteFromKeyboard();
      }
    }
  }
  return /* @__PURE__ */ jsxs(
    StyledPill,
    {
      hasIcon: Boolean(icon || loading || onDeleteMouseDown),
      cursor,
      onClick: (event) => {
        if (onClickPillBody) {
          event.stopPropagation();
          onClickPillBody();
        }
      },
      children: [
        isEditing ? /* @__PURE__ */ jsx(
          PillInput,
          {
            value: text,
            onChange: (event) => onChangeTextInput(event.target.value),
            onFocus: onFocusTextInput,
            onBlur: onBlurTextInput,
            ref: textInputRef
          }
        ) : /* @__PURE__ */ jsx(PillText, { children: text }),
        (icon || loading || onDeleteMouseDown) && /* @__PURE__ */ jsxs(
          PillIconContainer,
          {
            hasIconInset: Boolean(icon && !loading && !onDeleteMouseDown),
            children: [
              loading && /* @__PURE__ */ jsx(Loading, { size: 16.1, center: false, ml: 5 }),
              !loading && onDeleteMouseDown && /* @__PURE__ */ jsx(
                UnstyledButton,
                {
                  onMouseDown: handleOnDeleteMouseDown,
                  onKeyDown: handleOnDeleteKeyDown,
                  type: "button",
                  css: {
                    display: "flex",
                    padding: "10px",
                    marginRight: "-10px"
                  },
                  children: /* @__PURE__ */ jsx(Icon, { name: "DeleteIcon", width: 16.1 })
                }
              ),
              !loading && icon && !onDeleteMouseDown && /* @__PURE__ */ jsx(Icon, { name: icon, width: 16.1, color: colors.white })
            ]
          }
        )
      ]
    }
  );
}
var PillText = styled.div`
  /* For mobile ensure empty values don't prevent div from having height: */
  height: 1.2rem;
  min-width: 100px;
  max-width: 210px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 600;
`;
var StyledPill = styled.div`
  * + & {
    margin-top: 16px;
  }
  background-color: ${({ theme }) => theme.c05Neutral};
  color: ${({ theme }) => theme.text};
  padding: 12px 18px;
  ${({ hasIcon }) => hasIcon && `padding-right: 48px;`}
  border-radius: 2em;
  display: flex;
  align-items: center;
  cursor: ${({ cursor }) => cursor};
  position: relative;
`;
var PillIconContainer = styled.div`
  ${flexCenter}
  ${({ hasIconInset }) => hasIconInset ? `
    background-color: ${colors.blue43};
    padding: 8px;
    right: 4px;
    top: 3.5px;` : `right: 18px;`}
  border-radius: 50%;
  margin-left: 12px;
  position: absolute;
`;
var PillInput = styled.input`
  background-color: transparent;
  border: none;
  outline: none;
  color: ${({ theme }) => theme.text};
  font-weight: 600;
  font-size: 1rem;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 210px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: ${({ theme }) => theme.typography.fontFamilies.main};
`;

export {
  Pill
};
