import { arabicCountries } from "@/config/arabCountries";
import { cn } from "@/utlis";
import { useLocale, useTranslations } from "next-intl";
import { Dispatch, SetStateAction } from "react";
import {
  ControllerFieldState,
  ControllerRenderProps,
  FieldValues,
  UseFormStateReturn,
} from "react-hook-form";
import { defaultCountries, PhoneInput } from "react-international-phone";
import "react-international-phone/style.css";

export type PhoneInputProps<FieldType extends FieldValues = any> = {
  field?: ControllerRenderProps<FieldType, any>;
  fieldState?: ControllerFieldState;
  formState?: UseFormStateReturn<FieldType>;
  label?: string;
  withLabel?: boolean;
  withoutTranslate?: boolean;
  className?: string;
  inputClassName?: string;
  buttonClassName?: string;
  icon?: React.ReactNode;
  isPassword?: boolean;
  error?: string;
  phoneValue: string;
  setPhoneValue: Dispatch<SetStateAction<string>>;
};

export const PhoneNumber = ({
  className,
  inputClassName,
  buttonClassName,
  label,
  withLabel = true,
  field,
  fieldState,
  formState,
  withoutTranslate = false,
  error,
  icon,
  phoneValue,
  setPhoneValue,
  ...props
}: PhoneInputProps) => {
  const locale = useLocale();
  const t = useTranslations("VALIDATION");
  return (
    <>
      <div
        className={cn(
          "flex flex-col relative items-start gap-2 mt-1 border border-borderClr focus-within:ring-1 focus-within:ring-primary rounded-xl",
          fieldState?.error?.message && "ring-1 ring-red-500",
          className,
        )}
      >
        <div className="relative w-full">
          <PhoneInput
            inputClassName={cn(
              "px-3 !py-0 !h-12 w-full !rounded-xl !border-none !bg-transparent !text-sm !outline-none !text-primaryText placeholder:!text-primaryText placeholder:text-end placeholder:font-medium",
              inputClassName,
            )}
            className={cn(
              "!bg-transparent rounded-xl items-center",
              locale === "ar" && "flex-row-reverse",
            )}
            defaultCountry="sa"
            countrySelectorStyleProps={{
              buttonClassName: cn(
                "!border-0 !h-12 !rounded-xl !bg-transparent flex items-center",
                buttonClassName,
              ),
              buttonContentWrapperClassName:
                "flex-row-reverse px-2 h-12 items-center",
              style: { direction: "ltr" },
              dropdownStyleProps: {
                style: {
                  zIndex: 100,
                  border: "none",
                },
                listItemClassName:
                  locale === "ar" ? "flex-row-reverse gap-2" : "",
              },
            }}
            countries={locale === "ar" ? arabicCountries : defaultCountries}
            value={phoneValue}
            onChange={(value) => {
              setPhoneValue(value);
              field?.onChange(value);
            }}
            disabled={formState?.isSubmitting}
            {...props}
            placeholder="رقم الجوال"
          />
        </div>
      </div>
      {fieldState?.error?.message && (
        <small
          className={cn(
            "p-1 text-red-500 text-sm",
            !fieldState?.error?.message && "invisible",
          )}
        >
          {t(fieldState?.error?.message) ?? "."}
        </small>
      )}
    </>
  );
};