"use client";

import { countries, type Country } from "@/lib/countries";
import { cn } from "@/lib/utils";
import * as React from "react";
import { CountrySelect } from "../country-select";

export interface PhoneInputProps
  extends Omit<React.ComponentProps<"input">, "type" | "onChange"> {
  country?: Country;
  onCountryChange?: (country: Country) => void;
  onChange?: (value: string) => void;
  value?: string;
}

const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
  (
    {
      className,
      country,
      onCountryChange,
      onChange,
      value,
      disabled,
      ...props
    },
    ref
  ) => {
    const [selectedCountry, setSelectedCountry] = React.useState<Country>(
      country || countries[0]
    );

    React.useEffect(() => {
      if (country) {
        setSelectedCountry(country);
      }
    }, [country]);

    const handleCountryChange = (newCountry: Country) => {
      setSelectedCountry(newCountry);
      onCountryChange?.(newCountry);
    };

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {

      const value = e.target.value.replace(/\D/g, "");
      onChange?.(value);
    };

    return (
      <div
        className={cn(
          "flex h-14 w-full items-center rounded-xl border border-border bg-card relative",
          className
        )}
      >

        <CountrySelect
          selectedCountry={selectedCountry}
          onCountryChange={handleCountryChange}
          disabled={disabled}
        />

        <input
          ref={ref}
          type="tel"
          value={value}
          onChange={handleInputChange}
          disabled={disabled}
          className={cn(
            "h-full flex-1 bg-transparent px-3 text-start  text-sm leading-[22px] text-foreground placeholder:text-muted-foreground outline-none rounded-e-xl",
            "disabled:cursor-not-allowed disabled:opacity-50"
          )}
          {...props}
        />
      </div>
    );
  }
);

PhoneInput.displayName = "PhoneInput";

export { PhoneInput };