import { Form } from "antd";
import useFormInstance from "antd/es/form/hooks/useFormInstance";
import { PhoneNumberUtil } from "google-libphonenumber";
import { FunctionComponent, useMemo } 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 {
  propName?: string;
  label?: string;
  getValueCallback?: (value: string) => void;
  value?: string;
  onChange?: (value: string) => void;
}

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

  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();
          },
        },
      ]}
      style={{ direction: "ltr" }}
    >
      <PhoneInputWrapper
        onChange={(value) => {
          form.setFieldValue(propName, value);
          getValueCallback?.(value);
          onChange?.(value);
        }}
        phone={value || form.getFieldValue(propName)}
        themeName={themeName}
        placeholder={t("login.mobileNumber")}
        propName={propName}
        label={label}
      />
    </Form.Item>
  );
};

export const PhoneInputWrapper = ({
  phone,
  themeName,
  placeholder,
  value,
  onChange,
  propName,
  label,
}: {
  phone?: string;
  themeName: string;
  placeholder: string;
  value?: string;
  onChange?: (value: string) => void;
  propName?: string;
  label?: string;
}) => {
  const inputStyle = useMemo(
    () => ({
      borderRadius: 1000,
      height: 50,
      width: "100%",
      color: themeName === "light" ? "#000" : "#FFF",
      backgroundColor: themeName === "light" ? "#FFF" : ProBlack1,
      textAlign: "left" as const,
      direction: "ltr" as const,
      paddingLeft: "50px",
      paddingRight: "50px",
      borderColor: themeName === "light" ? "#d9d9d9" : "#363636",
    }),
    [themeName],
  );

  return (
    <div className="pro-phone-input">
      <PhoneInput
        key={themeName}
        country={"om"}
        inputStyle={inputStyle}
        placeholder={label || placeholder}
        value={value || phone}
        onChange={(value) => {
          onChange?.(value);
        }}
        buttonStyle={{
          backgroundColor: "transparent",
          border: 0,
          borderLeft: "1px solid #363636",
          borderRadius: 0,
          position: "relative",
          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;