"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Phone } from "lucide-react";
import { Input } from "./input.js";
import { cn } from "../../lib/utils/index.js";
const countryCodes = [
  { code: "+54", country: "AR", name: "Argentina" },
  { code: "+1", country: "US", name: "United States" },
  { code: "+34", country: "ES", name: "Espa\xF1a" },
  { code: "+52", country: "MX", name: "M\xE9xico" },
  { code: "+44", country: "GB", name: "United Kingdom" },
  { code: "+33", country: "FR", name: "France" },
  { code: "+49", country: "DE", name: "Germany" },
  { code: "+39", country: "IT", name: "Italy" },
  { code: "+55", country: "BR", name: "Brazil" },
  { code: "+57", country: "CO", name: "Colombia" }
];
function PhoneInput({
  value = "",
  onChange,
  placeholder = "N\xFAmero de tel\xE9fono",
  disabled = false,
  className,
  showCountryCode = true,
  defaultCountry = "AR"
}) {
  const [selectedCountry, setSelectedCountry] = React.useState(
    countryCodes.find((c) => c.country === defaultCountry) || countryCodes[0]
  );
  const formatPhoneNumber = (input) => {
    const digits = input.replace(/\D/g, "");
    if (digits.length <= 3) return digits;
    if (digits.length <= 6) return `${digits.slice(0, 3)}-${digits.slice(3)}`;
    if (digits.length <= 10) return `${digits.slice(0, 3)}-${digits.slice(3, 6)}-${digits.slice(6)}`;
    return `${digits.slice(0, 3)}-${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
  };
  const handlePhoneChange = (e) => {
    const formatted = formatPhoneNumber(e.target.value);
    const fullValue = showCountryCode ? `${selectedCountry.code} ${formatted}` : formatted;
    onChange(fullValue);
  };
  const displayValue = showCountryCode && value.startsWith(selectedCountry.code) ? value.substring(selectedCountry.code.length).trim() : value;
  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex", className), children: [
    showCountryCode && /* @__PURE__ */ jsx("div", { className: "flex items-center border border-r-0 border-input bg-background px-3 rounded-l-md", children: /* @__PURE__ */ jsx(
      "select",
      {
        value: selectedCountry.code,
        onChange: (e) => {
          const country = countryCodes.find((c) => c.code === e.target.value);
          if (country) {
            setSelectedCountry(country);
            const phoneOnly = value.replace(/^\+\d+\s*/, "");
            onChange(`${country.code} ${phoneOnly}`);
          }
        },
        disabled,
        className: "bg-transparent border-0 outline-none text-sm",
        children: countryCodes.map((country) => /* @__PURE__ */ jsx("option", { value: country.code, children: country.code }, country.code))
      }
    ) }),
    /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
      /* @__PURE__ */ jsx(Phone, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
      /* @__PURE__ */ jsx(
        Input,
        {
          type: "tel",
          value: displayValue,
          onChange: handlePhoneChange,
          placeholder,
          disabled,
          className: cn(
            "pl-9",
            showCountryCode ? "rounded-l-none" : "",
            className
          )
        }
      )
    ] })
  ] });
}
export {
  PhoneInput
};
