import { jsx } from "react/jsx-runtime";
import { useState } from "react";
import ReactPhoneInput2 from "react-phone-input-2";
/* empty css                                                                                                                                                                                       */
/* empty css                                                                                                                                                                                        */
/* empty css                                                                                                                                                                                                */
/* empty css                                                                                                                                                                                           */
/* empty css                                                                                                                                                                                           */
import "clsx";
import { mergeStylesList } from "../../utils/styles.mjs";
import { useStyles } from "./styles.mjs";
import { useInputProps } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Input/use-input-props.mjs";
import { useMantineTheme } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs";
import { Box } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.mjs";
import { Input } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Input/Input.mjs";
const ReactPhoneInput = ReactPhoneInput2.default ? ReactPhoneInput2.default : ReactPhoneInput2;
const PhoneInput = (props) => {
  const { wrapperProps } = useInputProps("TextInput", {}, props);
  const { classes, cx } = useStyles({ hasError: !!wrapperProps.error });
  const {
    value,
    placeholder = "",
    inputClass,
    buttonClass,
    containerClass,
    dropdownClass,
    searchClass,
    showContryCodeAfterFocus,
    country = "",
    onFocus,
    // Box props,
    rootProps: boxProps,
    ...rest
  } = props;
  const [isPhoneInputFocus, setIsPhoneInputFocus] = useState(false);
  const theme = useMantineTheme();
  return /* @__PURE__ */ jsx(Box, { ...boxProps, children: /* @__PURE__ */ jsx(
    Input.Wrapper,
    {
      ...wrapperProps,
      styles: mergeStylesList([
        wrapperProps.styles,
        {
          label: { color: theme.colors.carbon[8], marginBottom: 6, fontSize: 14, lineHeight: "20px" },
          description: { color: theme.colors.carbon[6] }
        }
      ]),
      children: /* @__PURE__ */ jsx(
        ReactPhoneInput,
        {
          value,
          inputClass: cx(inputClass),
          buttonClass: cx(classes.dropdownButton, buttonClass),
          containerClass: cx(classes.container, containerClass),
          disableDropdown: true,
          dropdownClass: cx(dropdownClass),
          searchClass: cx(searchClass),
          placeholder,
          specialLabel: "",
          country: showContryCodeAfterFocus && isPhoneInputFocus ? country.toLowerCase() : void 0,
          onFocus: (e, data) => {
            setIsPhoneInputFocus(true);
            onFocus == null ? void 0 : onFocus(e, data);
          },
          masks: { cn: "..........." },
          ...rest
        }
      )
    }
  ) });
};
export {
  PhoneInput
};
