import { jsx, jsxs } from "react/jsx-runtime";
import { ErrorMessage } from "@hookform/error-message";
import { useFormContext, Controller } from "react-hook-form";
/* empty css                                                                                                                                                                                          */
/* empty css                                                                                                                                                                                           */
/* empty css                                                                                                                                                                                                   */
/* empty css                                                                                                                                                                                              */
/* empty css                                                                                                                                                                                              */
import "clsx";
import { mergeStylesList } from "../../../utils/styles.mjs";
import { PhoneInput } from "../../PhoneInput/index.mjs";
import { FormSelect } from "../Select.mjs";
import rawCountries from "./rawCountries.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 { createStyles } from "../../../node_modules/.pnpm/@mantine_emotion@7.15.2_@emotion_cache@11.14.0_@emotion_react@11.14.0_@types_react@18.3.18_re_vflj3eioazr6wkrxpatinf66nq/node_modules/@mantine/emotion/esm/create-styles.mjs";
import { getThemeColor } 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/color-functions/get-theme-color/get-theme-color.mjs";
const FormPhoneInput = ({
  name,
  rules,
  onChange: onInputChange,
  onSelect,
  label,
  rootProps,
  ...rest
}) => {
  const { control, formState, getFieldState } = useFormContext();
  const { error } = getFieldState(name, formState);
  return /* @__PURE__ */ jsx(
    Controller,
    {
      name,
      control,
      rules,
      render: ({ field: { value, onChange } }) => {
        const handleChange = (value2, data, event, formattedValue) => {
          onChange(formattedValue);
          onSelect == null ? void 0 : onSelect(formattedValue, data);
          onInputChange == null ? void 0 : onInputChange(formattedValue, data, event, formattedValue);
        };
        return /* @__PURE__ */ jsx(
          PhoneInput,
          {
            error: error ? /* @__PURE__ */ jsx(ErrorMessage, { errors: formState.errors, name }) : void 0,
            value,
            label,
            onChange: handleChange,
            rootProps,
            ...rest
          }
        );
      }
    }
  );
};
const countryOptions = rawCountries.map((raw) => {
  return {
    // country code
    value: raw[2],
    // country name
    label: `${raw[0]}`
  };
});
const useStyles = createStyles((theme) => {
  const errorColor = getThemeColor("red", theme);
  return {
    phoneInputContainer: {
      borderTopLeftRadius: "0 !important",
      borderBottomLeftRadius: "0 !important",
      transform: "translateX(-1px)"
    },
    error: {
      color: errorColor,
      lineHeight: 1.2,
      fontSize: 12
    }
  };
});
const FormPhoneInputV2 = ({
  countryKey,
  phoneKey,
  selectProps = {},
  countryRules,
  rules,
  rootProps,
  ...rest
}) => {
  const { watch, formState, getFieldState } = useFormContext();
  const { filterData: onFilter, ...restProps } = selectProps;
  const { error: countryError } = getFieldState(countryKey, formState);
  const { error: phoneError } = getFieldState(phoneKey, formState);
  const country = watch(countryKey, "");
  const { classes } = useStyles();
  return /* @__PURE__ */ jsxs(Box, { ...rootProps, children: [
    /* @__PURE__ */ jsxs(Box, { display: "flex", children: [
      /* @__PURE__ */ jsx(
        FormSelect,
        {
          data: onFilter ? countryOptions.filter(onFilter) : countryOptions,
          ...restProps,
          name: countryKey,
          rules: countryRules,
          styles: mergeStylesList([
            () => {
              return {
                wrapper: {
                  ":hover": {
                    zIndex: 1
                  },
                  ":focus-within": {
                    zIndex: 1
                  },
                  zIndex: countryError ? 1 : void 0
                },
                error: {
                  display: "none"
                },
                input: {
                  borderTopRightRadius: 0,
                  borderBottomRightRadius: 0
                }
              };
            },
            restProps.styles
          ])
        }
      ),
      /* @__PURE__ */ jsx(
        FormPhoneInput,
        {
          country,
          rootProps: { w: "100%", mb: 0 },
          rules,
          inputClass: classes.phoneInputContainer,
          styles: {
            error: {
              display: "none"
            }
          },
          showContryCodeAfterFocus: false,
          name: phoneKey,
          ...rest
        }
      )
    ] }),
    (countryError || phoneError) && /* @__PURE__ */ jsxs("div", { className: classes.error, children: [
      /* @__PURE__ */ jsx(ErrorMessage, { errors: formState.errors, name: countryKey }),
      /* @__PURE__ */ jsx(ErrorMessage, { errors: formState.errors, name: phoneKey })
    ] })
  ] });
};
export {
  FormPhoneInput,
  FormPhoneInputV2
};
