import _extends from "@babel/runtime/helpers/esm/extends";
import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
import styled from "styled-components";
import { Input } from "./Input";
import { StyledPasswordIndicator, StyledPasswordIndicatorWrapper } from "./Styles";
import { useForkRef } from "../../utils";
import { IconButton } from "../IconButton";
import { EyeIcon, EyeOffIcon, EyeOffSmallIcon, EyeSmallIcon, InfoIcon, InfoSmallIcon } from "../Icons";
import { Tooltip } from "../Tooltip";
import { Caption1 } from "../Typography";
const transform = {
  biggest: "big",
  regular: "small",
  big: "medium"
};
const StypedEyeIconSmall = styled(EyeSmallIcon).withConfig({
  displayName: "InputPassword__StypedEyeIconSmall",
  componentId: "sc-v930fj-0"
})(["", ""], {
  "cursor": "pointer"
});
const StypedEyeOffIconSmall = styled(EyeOffSmallIcon).withConfig({
  displayName: "InputPassword__StypedEyeOffIconSmall",
  componentId: "sc-v930fj-1"
})(["", ""], {
  "cursor": "pointer"
});
const StypedEyeIcon = styled(EyeIcon).withConfig({
  displayName: "InputPassword__StypedEyeIcon",
  componentId: "sc-v930fj-2"
})(["", ""], {
  "cursor": "pointer"
});
const StypedEyeOffIcon = styled(EyeOffIcon).withConfig({
  displayName: "InputPassword__StypedEyeOffIcon",
  componentId: "sc-v930fj-3"
})(["", ""], {
  "cursor": "pointer"
});
const StyledInfoIcon = styled(InfoIcon).withConfig({
  displayName: "InputPassword__StyledInfoIcon",
  componentId: "sc-v930fj-4"
})(["", ""], {
  "marginRight": "0.25rem",
  "cursor": "help",
  "fill": "var(--red-alert)"
});
const StyledInfoSmallIcon = styled(InfoSmallIcon).withConfig({
  displayName: "InputPassword__StyledInfoSmallIcon",
  componentId: "sc-v930fj-5"
})(["", ""], {
  "marginRight": "0.25rem",
  "cursor": "help",
  "fill": "var(--red-alert)"
});
const StyledInputPasswordWrapper = styled.div.withConfig({
  displayName: "InputPassword__StyledInputPasswordWrapper",
  componentId: "sc-v930fj-6"
})(["width:fit-content;display:flex;flex-direction:column;"]);
const InputPasswordAdornment = _ref => {
  let {
    invalid,
    errorMessage,
    size,
    hideControl,
    showText,
    hideTooltipText,
    showTooltipText,
    disabled,
    toggleShow
  } = _ref;
  return /*#__PURE__*/React.createElement(React.Fragment, null, invalid && errorMessage && /*#__PURE__*/React.createElement(Tooltip, {
    title: errorMessage
  }, size === "regular" ? /*#__PURE__*/React.createElement(StyledInfoSmallIcon, null) : /*#__PURE__*/React.createElement(StyledInfoIcon, null)), !hideControl && /*#__PURE__*/React.createElement(Tooltip, {
    title: showText ? hideTooltipText : showTooltipText
  }, /*#__PURE__*/React.createElement(IconButton, {
    variant: "text gray",
    type: "button",
    size: transform[size],
    disabled: disabled,
    onClick: toggleShow,
    style: {
      flexShrink: 0
    }
  }, showText ? size === "regular" ? /*#__PURE__*/React.createElement(StypedEyeOffIconSmall, null) : /*#__PURE__*/React.createElement(StypedEyeOffIcon, null) : size === "regular" ? /*#__PURE__*/React.createElement(StypedEyeIconSmall, null) : /*#__PURE__*/React.createElement(StypedEyeIcon, null))));
};
export const InputPassword = /*#__PURE__*/forwardRef((_ref2, ref) => {
  var _validation$levels;
  let {
    size = "regular",
    disabled,
    show = false,
    hideControl,
    showTooltipText = "Show",
    hideTooltipText = "Hide",
    value: defaultValue = "",
    validation,
    errorMessage,
    invalid,
    onChange,
    ...rest
  } = _ref2;
  const inputRef = useRef(null);
  const handleRef = useForkRef(ref, inputRef);
  const [showText, setShowText] = useState(show);
  const [strength, setStrength] = useState(0);
  const [value, setValue] = useState(() => defaultValue);
  const handleChange = useCallback(e => {
    setValue(e.target.value);
    typeof (validation == null ? void 0 : validation.getStrength) === "function" && setStrength(validation.getStrength(e.target.value));
    typeof onChange === "function" && onChange(e.target.value);
  }, [onChange, validation]);
  const toggleShow = useCallback(() => {
    var _inputRef$current;
    (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
    setShowText(prevState => !prevState);
  }, []);
  useEffect(() => {
    setShowText(show);
  }, [show]);
  if (validation != null && validation.levels && validation != null && validation.getStrength && typeof (validation == null ? void 0 : validation.getStrength) === "function") {
    if (validation.levels.length !== 5) {
      console.warn("Levels length must be exactly 5.");
    }
    if (typeof validation.getStrength("test") !== "number") {
      console.warn("getStrength must be a function that accepts a string and returns a number.");
    }
  }
  return /*#__PURE__*/React.createElement(StyledInputPasswordWrapper, null, /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
    ref: handleRef,
    size: size,
    value: value,
    disabled: disabled,
    type: showText ? "text" : "password",
    onChange: handleChange,
    invalid: invalid,
    "data-testid": "InputPassword",
    endAdornment: /*#__PURE__*/React.createElement(InputPasswordAdornment, {
      invalid: invalid,
      errorMessage: errorMessage,
      size: size,
      hideControl: hideControl,
      showText: showText,
      hideTooltipText: hideTooltipText,
      showTooltipText: showTooltipText,
      disabled: disabled,
      toggleShow: toggleShow
    })
  })), (validation == null || (_validation$levels = validation.levels) == null ? void 0 : _validation$levels.length) === 5 && typeof (validation == null ? void 0 : validation.getStrength) === "function" && typeof (validation == null ? void 0 : validation.getStrength("test")) === "number" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPasswordIndicatorWrapper, null, [...Array(4)].map((_, index) => /*#__PURE__*/React.createElement(StyledPasswordIndicator, {
    key: index,
    $strength: strength,
    $index: index,
    "data-testid": strength >= index + 1 ? "active" : ""
  }))), /*#__PURE__*/React.createElement(Caption1, {
    align: "right",
    color: "tertiary"
  }, validation.levels[strength])));
});
InputPassword.displayName = "InputPassword";
//# sourceMappingURL=InputPassword.js.map