import { Form } from "antd";
import { TitleProps } from "antd/es/typography/Title";
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 {
  phone: string;
  setPhone: (phone: string) => void;
  propName?: string
  label?: string
}

const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({ phone, setPhone, propName, label }) => {
  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: "" },
        {
          validator: (_, value) => {
            if (!value || value.length <= 3) {
              return Promise.reject(new Error(""));
            }
            return Promise.resolve();
          },
        },
      ]}
      normalize={(value) => {
        if (value && setPhone) {
          setPhone(value);
        }
        return value;
      }}
    >
      <PhoneInputWrapper
        phone={phone}
        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",
          pattern: "[0-9]*",
        }}
      />
    </div>
  );
};

export default ProPhoneInput;