import {
  ToggleContainer
} from "./chunk-JXEBM5BK.js";
import {
  InputSubtext,
  defaultTextInputTypography,
  inputSpacingPx,
  textInputPlaceholderColor,
  textInputStyle
} from "./chunk-FTMB6R72.js";
import {
  CheckboxContainer
} from "./chunk-MJT4VLKE.js";
import {
  toReactNodes
} from "./chunk-OYIPFTQC.js";
import {
  Loading
} from "./chunk-YNCTWF7N.js";
import {
  UnstyledButton
} from "./chunk-5NUOBJXP.js";
import {
  Tooltip
} from "./chunk-RO7YTILY.js";
import {
  z
} from "./chunk-55OQPFLF.js";
import {
  Icon,
  IconContainer
} from "./chunk-DMPXNHDT.js";
import {
  standardBorderRadius
} from "./chunk-HGZGGJQB.js";
import {
  applyTypography
} from "./chunk-2C7DZIDY.js";
import {
  getBackgroundColor,
  getFontColor
} from "./chunk-VAH342U2.js";
import {
  __spreadProps,
  __spreadValues
} from "./chunk-W7FAWX6T.js";

// src/components/TextInput.tsx
import styled from "@emotion/styled";
import React, { useState } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
var selectLeftOffset = 10;
var iconSides = ["left", "right"];
var iconOffsets = ["small", "medium", "large"];
var iconWidths = [8, 12, 16, 20];
var iconStrokeWidths = [1, 1.5, 2];
function withDefaults(textInputProps) {
  return __spreadProps(__spreadValues({}, textInputProps), {
    width: textInputProps.width || "full",
    type: textInputProps.type || "text",
    disabled: Boolean(textInputProps.disabled),
    typography: __spreadValues(__spreadValues({}, defaultTextInputTypography), textInputProps.typography)
  });
}
function TextInput(textInputProps) {
  var _a, _b, _c, _d, _e, _f;
  const props = withDefaults(textInputProps);
  const [focused, setFocused] = useState(false);
  const inputRef = props.inputRef || React.createRef();
  const ref = props.inputRefCb || inputRef;
  if (props.inputRefCb && !props.inputRef) {
    console.warn("TextInput: inputRef should be provided with inputRefCb.");
  }
  const handleKeyDown = (e) => {
    if (e.key === "Enter" && props.onEnter) {
      props.onEnter();
    }
  };
  const hasError = Boolean(props.error || props.contentError);
  const hasSuccess = Boolean(props.success || props.contentSuccess);
  const iconSide = props.icon ? props.icon.side || "right" : void 0;
  const hasIconLeft = Boolean(props.icon && iconSide === "left");
  const hasIconRight = Boolean(props.icon && iconSide === "right") || props.loading;
  const iconWidth = ((_a = props.icon) == null ? void 0 : _a.width) || 12;
  const iconCenterOffset = ((_b = props.icon) == null ? void 0 : _b.offset) === "large" || ((_c = props.icon) == null ? void 0 : _c.offset) === "medium" ? 26 : 18;
  const iconTextOffset = ((_d = props.icon) == null ? void 0 : _d.offset) === "large" ? 14 : ((_e = props.icon) == null ? void 0 : _e.offset) === "medium" ? 8 : 4;
  const leftIconOffset = iconCenterOffset - iconWidth / 2;
  let paddingLeftPx;
  if (typeof props.paddingX === "number") {
    if (hasIconLeft) {
      paddingLeftPx = props.paddingX + iconWidth + iconTextOffset;
    } else {
      paddingLeftPx = props.paddingX;
    }
  } else if (hasIconLeft) {
    paddingLeftPx = leftIconOffset + iconWidth + iconTextOffset;
  } else if (props.select) {
    paddingLeftPx = selectLeftOffset + props.select.width + 5;
  }
  const rightIconWidth = props.loading ? 20 : iconWidth;
  const rightIconOffset = iconCenterOffset - rightIconWidth / 2;
  let paddingRightPx;
  if (typeof props.paddingX === "number") {
    if (hasIconRight) {
      paddingRightPx = iconTextOffset + rightIconWidth + props.paddingX;
    } else {
      paddingRightPx = props.paddingX;
    }
  } else if (hasIconRight) {
    paddingRightPx = rightIconOffset + rightIconWidth + iconTextOffset;
  }
  const textInputWidth = props.width === "short" ? "250px" : "100%";
  let input = /* @__PURE__ */ jsxs(InputContainer, { children: [
    /* @__PURE__ */ jsx(
      Input,
      {
        disabled: props.disabled,
        maxLength: props.maxLength,
        inputMode: props.inputMode,
        pattern: props.pattern,
        onBlur: (blurEvent) => {
          setFocused(false);
          if (props.onBlur) {
            props.onBlur(blurEvent);
          }
        },
        onChange: (e) => {
          e.target.setCustomValidity("");
          props.onChange(e.target.value, e);
        },
        onFocus: (focusEvent) => {
          setFocused(true);
          if (props.onFocus) {
            props.onFocus(focusEvent);
          }
        },
        onKeyDown: (e) => {
          if (props.onKeyDown) {
            props.onKeyDown(e.key, e);
          }
          handleKeyDown(e);
        },
        onKeyUp: props.onKeyUp,
        id: props.id,
        onPaste: props.onPaste,
        placeholder: props.placeholder,
        ref,
        name: props.name,
        type: props.type,
        value: props.value,
        paddingLeftPx,
        paddingRightPx,
        paddingTopPx: props.paddingY,
        paddingBottomPx: props.paddingY,
        activeOutline: props.activeOutline,
        activeOutlineColor: props.activeOutlineColor,
        hasError,
        hasSuccess,
        "data-test-id": props.testId,
        typography: props.typography,
        autoComplete: props.autoComplete === "off" ? "new-password" : props.autoComplete,
        onBeforeInput: (e) => {
          if (props.onBeforeInput) {
            const event = e;
            props.onBeforeInput(event);
          }
        },
        borderRadius: props.borderRadius,
        borderWidth: props.borderWidth,
        enterKeyHint: props.enterKeyHint,
        autoFocus: props.autoFocus
      }
    ),
    props.rightButtonText && /* @__PURE__ */ jsx(RightButtonAligner, { paddingX: rightIconOffset, children: /* @__PURE__ */ jsx(RightButton, { onClick: props.onRightButtonClick, children: props.rightButtonText }) })
  ] });
  if (hasIconLeft || hasIconRight) {
    input = /* @__PURE__ */ jsxs(WithIcon, { hasError, withFocus: focused, children: [
      props.icon && iconSide === "left" && /* @__PURE__ */ jsx(
        TextInputIconContainer,
        {
          onClick: props.onClickIcon ? props.onClickIcon : () => {
          },
          isIconRight: false,
          focused,
          hasValue: Boolean(props.value),
          colorProp: props.typography.color,
          iconOffset: typeof props.paddingX === "number" ? props.paddingX : leftIconOffset,
          children: /* @__PURE__ */ jsx(
            Icon,
            {
              name: props.icon.name,
              width: iconWidth,
              iconProps: { strokeWidth: props.icon.strokeWidth }
            }
          )
        }
      ),
      input,
      hasIconRight && /* @__PURE__ */ jsx(
        TextInputIconContainer,
        {
          onClick: props.onClickIcon ? props.onClickIcon : () => {
          },
          isIconRight: true,
          focused,
          hasValue: Boolean(props.value),
          colorProp: props.typography.color,
          iconOffset: typeof props.paddingX === "number" ? props.paddingX : rightIconOffset,
          children: props.loading ? /* @__PURE__ */ jsx(Loading, { center: false, size: rightIconWidth }) : props.icon && iconSide === "right" ? /* @__PURE__ */ jsx(
            Icon,
            {
              name: props.icon.name,
              width: rightIconWidth,
              iconProps: { strokeWidth: props.icon.strokeWidth }
            }
          ) : null
        }
      )
    ] });
  }
  const hintTooltipId = props.hintTooltip ? `${props.id || "input"}-hint-tooltip` : void 0;
  const { select } = props;
  return /* @__PURE__ */ jsxs(StyledTextInput, { widthProp: textInputWidth, marginTop: props.marginTop, children: [
    props.label ? /* @__PURE__ */ jsx(TextInputLabel, { hasError, labelOptions: props.labelOptions, children: ((_f = props.labelOptions) == null ? void 0 : _f.typography) ? toReactNodes({
      text: props.label,
      typography: props.labelOptions.typography
    }) : props.label }) : null,
    select && /* @__PURE__ */ jsx(
      TextInputSelect,
      {
        value: select.value,
        widthProp: select.width,
        heightProp: select.height,
        typography: props.typography,
        onChange: (event) => {
          var _a2;
          select.onChange(event.target.value);
          (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
        },
        children: select.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
      }
    ),
    input,
    /* @__PURE__ */ jsx(
      InputSubtext,
      {
        text: props.error || props.success || props.hint,
        content: props.contentError || props.contentSuccess,
        hasError,
        hasSuccess,
        tooltipId: hintTooltipId,
        hideNonErrorsIfBlurred: props.hideNonErrorsIfBlurred,
        focused
      }
    ),
    props.hintTooltip ? /* @__PURE__ */ jsx(Tooltip, { id: hintTooltipId, content: props.hintTooltip, place: "right" }) : null
  ] });
}
var TextInputSelect = styled.select`
  ${({ typography, theme }) => applyTypography(theme, typography.type, typography.size, typography.color)}
  position: absolute;
  z-index: ${z.textInput + 1};
  border: none;
  background-color: transparent;
  top: 0;
  left: ${selectLeftOffset}px;
  height: ${({ heightProp }) => `${heightProp}px`};
  width: ${({ widthProp }) => `${widthProp}px`};
`;
var WithIcon = styled.div`
  ${standardBorderRadius(8)}
  position: relative;

  & ${IconContainer.toString()} {
    z-index: ${z.textInput + 1};
  }
`;
var TextInputIconContainer = styled.div`
  position: absolute;
  z-index: ${z.textInput + 1};
  ${({ isIconRight, iconOffset }) => isIconRight ? `right: ${iconOffset}px` : `left: ${iconOffset}px`};
  top: 0;
  bottom: 0;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: ${({ onClick }) => onClick ? "pointer" : "auto"};
  color: ${({ focused, hasValue, theme, colorProp }) => focused || hasValue ? getFontColor(theme, colorProp) : textInputPlaceholderColor({ theme })};
`;
var Input = styled.input`
  ${textInputStyle};
  // disable autofill styles in chrome https://stackoverflow.com/a/68240841/9808766
  &:-webkit-autofill,
  &:-webkit-autofill:focus,
  &:-internal-autofill-selected,
  &:-internal-autofill-selected:focus {
    background-color: ${({ theme }) => theme.bg} !important;
    color: ${({ theme }) => theme.text} !important;
    transition:
      background-color 600000s 0s,
      color 600000s 0s !important;
  }
`;
var RightButtonAligner = styled.div`
  position: absolute;
  top: 0;
  right: ${({ paddingX }) => paddingX}px;
  z-index: ${z.textInput + 1};
  bottom: 0;
  display: flex;
  align-items: center;
`;
var RightButton = styled(UnstyledButton)`
  border-radius: 4px;
  border: none;
  background-color: ${({ theme }) => theme.vlcNeutral};
  color: ${({ theme }) => theme.mcNeutral};
  font-size: 14px;
  font-weight: 600;
  padding: 8px 10px;
`;
var TextInputLabel = styled.label`
  ${({ labelOptions }) => (labelOptions == null ? void 0 : labelOptions.borderRadius) ? `${labelOptions.borderRadius}px` : standardBorderRadius(8)};
  font-size: 10px;
  position: ${({ labelOptions }) => (labelOptions == null ? void 0 : labelOptions.position) || "absolute"};
  z-index: ${z.textInput + 1};
  background-color: ${({ theme, labelOptions }) => (labelOptions == null ? void 0 : labelOptions.backgroundColor) ? getBackgroundColor(theme, labelOptions.backgroundColor) : theme.bg};
  color: ${({ theme, hasError }) => hasError ? theme.danger : theme.mcNeutral};
  font-weight: 600;
  padding-left: ${({ labelOptions }) => (labelOptions == null ? void 0 : labelOptions.paddingX) === void 0 ? "6px" : `${labelOptions.paddingX}px`};
  padding-right: ${({ labelOptions }) => (labelOptions == null ? void 0 : labelOptions.paddingX) === void 0 ? "6px" : `${labelOptions.paddingX}px`};
  padding-top: ${({ labelOptions }) => (labelOptions == null ? void 0 : labelOptions.paddingY) === void 0 ? "4px" : `${labelOptions.paddingY}px`};
  padding-bottom: ${({ labelOptions }) => (labelOptions == null ? void 0 : labelOptions.paddingY) === void 0 ? "4px" : `${labelOptions.paddingY}px`};
  left: ${({ labelOptions }) => (labelOptions == null ? void 0 : labelOptions.position) === "relative" ? "0" : "12px"};
  top: ${({ labelOptions }) => (labelOptions == null ? void 0 : labelOptions.position) === "relative" ? "0" : "-10px"};
  margin-bottom: ${({ labelOptions }) => (labelOptions == null ? void 0 : labelOptions.marginBottom) ? `${labelOptions.marginBottom}px` : "0"};
`;
var TextInputHalfRow = styled.div`
  margin-top: ${inputSpacingPx}px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  & > * {
    width: 50%;
  }
`;
var StyledTextInput = styled.div`
  display: flex;
  flex-direction: column;
  width: ${({ widthProp }) => widthProp};
  position: relative;
  /* Apply marginTop to every TextInput when specified */
  margin-top: ${({ marginTop }) => marginTop !== void 0 ? `${marginTop}px` : ""};

  /* eg forms, should be left consistent: */
  & + & {
    margin-top: ${inputSpacingPx}px;
  }

  ${TextInputHalfRow.toString()} & + & {
    margin-top: 0;
  }

  ${CheckboxContainer.toString()} + &,
  ${ToggleContainer.toString()} + &,
  & + ${CheckboxContainer.toString()},
  & + ${ToggleContainer.toString()} {
    margin-top: ${inputSpacingPx}px;
  }
`;
var InputContainer = styled.div`
  position: relative;
`;

export {
  iconSides,
  iconOffsets,
  iconWidths,
  iconStrokeWidths,
  TextInput,
  TextInputHalfRow
};
