import { Form } from "antd";
import useFormInstance from "antd/es/form/hooks/useFormInstance";
import { TitleProps } from "antd/es/typography/Title";
import { PhoneNumberUtil } from "google-libphonenumber";
import { FunctionComponent } from "react";
import { useTranslation } from "react-i18next";
import PhoneInput from "react-phone-input-2";
import { useAppSelector } from "redux/hooks";
import { ProBlack1 } from "ThemeConstants";

interface ProPhoneInput extends TitleProps {
  propName?: string;
  label?: string;
  getValueCallback?: (value: string) => void;
}

const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
  propName,
  label,
  getValueCallback,
}) => {
  const form = useFormInstance();
  const { t } = useTranslation();
  const { themeName } = useAppSelector((state) => state.theme);
  const { isRTL } = useAppSelector((state) => state.locale);

  return (
    <Form.Item
      name={propName}
      label={label}
      rules={[
        { required: true, message: t("validation.phoneRequired") },
        {
          validator: (_, value) => {
            // Initialize the PhoneNumberUtil instance
            const phoneUtil = PhoneNumberUtil.getInstance();
            if (
              value &&
              !phoneUtil.isValidNumber(
                phoneUtil.parseAndKeepRawInput(`+${value}`),
              )
            )
              return Promise.reject(new Error(t("validation.invalidPhone")));

            return Promise.resolve();
          },
        },
      ]}
    >
      <PhoneInputWrapper
        onChange={(value) => {
          form.setFieldValue(propName, value);
          getValueCallback?.(value);
        }}
        phone={form.getFieldValue(propName)}
        themeName={themeName}
        isRTL={isRTL}
        placeholder={t("login.mobileNumber")}
        propName={propName}
        label={label}
      />
    </Form.Item>
  );
};

export const PhoneInputWrapper = ({
  phone,
  themeName,
  isRTL,
  placeholder,
  value,
  onChange,
  propName,
  label,
}: {
  phone?: string;
  themeName: string;
  isRTL: boolean;
  placeholder: string;
  value?: string;
  onChange?: (value: string) => void;
  propName?: string;
  label?: string;
}) => {
  return (
    <div className="pro-phone-input">
      <PhoneInput
        country={"om"}
        inputStyle={{
          borderRadius: 1000,
          height: 50,
          width: "100%",
          color: themeName === "light" ? "#000" : "#FFF",
          backgroundColor: themeName === "light" ? "#FFF" : ProBlack1,
          textAlign: isRTL ? "right" : "left",
          direction: isRTL ? "rtl" : "ltr",
          paddingLeft: "50px",
          paddingRight: "50px",
          borderColor: themeName === "light" ? "#d9d9d9" : "#363636",
        }}
        placeholder={label || placeholder}
        value={value || phone}
        onChange={(value) => {
          onChange?.(value);
        }}
        buttonStyle={{
          backgroundColor: "transparent",
          border: 0,
          borderLeft: "1px solid #363636",
          borderRadius: 0,
          position: "relative",
          ...(isRTL && {
            top: -25,
            right: 25,
          }),
          ...(!isRTL && {
            top: -25,
          }),
        }}
        autocompleteSearch
        inputProps={{
          id: propName || "phone", // Required for accessibility & autofill
          name: propName || "phone",
          required: true,
          autoFocus: false,
          autoComplete: "tel",
          type: "tel",
          inputMode: "numeric",
        }}
      />
    </div>
  );
};

export default ProPhoneInput;
