import { TextField } from "@mui/material";
import { styleTextSelectRight } from "@/mui";

// تابع تبدیل اعداد فارسی به انگلیسی
const convertPersianToEnglish = (str) => {
  const persianNumbers = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
  const arabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];

  let result = str;
  for (let i = 0; i < 10; i++) {
    const regex = new RegExp(persianNumbers[i], 'g');
    result = result.replace(regex, i.toString());
    const arabicRegex = new RegExp(arabicNumbers[i], 'g');
    result = result.replace(arabicRegex, i.toString());
  }
  return result;
};

function Field({
  title,
  error,
  placeholder,
  inputProps,
  type,
  dir,
  value,
  updateState,
}) {
  const handleChange = (e) => {
    let inputValue = e.target.value;

    // اگر type تلفن است، فقط اعداد انگلیسی را قبول کن
    if (type === "tel") {
      // ابتدا اعداد فارسی و عربی را به انگلیسی تبدیل کن
      inputValue = convertPersianToEnglish(inputValue);
      // فقط اعداد انگلیسی را نگه دار
      inputValue = inputValue.replace(/[^0-9]/g, '');
    }

    updateState(inputValue);
  };

  return (
    <TextField
      label={title}
      error={error}
      dir={dir || "rtl"}
      type={type || "text"}
      value={value}
      onChange={handleChange}
      className="!w-full !mx-auto !bg-[#FFF]"
      InputProps={inputProps}
      placeholder={placeholder || ""}
      sx={{
        ".MuiOutlinedInput-notchedOutline.muirtl-1d3z3hw-MuiOutlinedInput-notchedOutline":
        {
          border: error && "1px solid red !important",
        },
        ...styleTextSelectRight,
        // Hide Icon Number
        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
        {
          display: "none",
        },
        "& input[type=number]": {
          MozAppearance: "textfield",
        },
        "& .MuiInputBase-input": {
          padding: "12.5px 14px",
          color: "#0009",
        },
        "& .MuiInputBase-root": { borderRadius: "6px !important" },
        "& .MuiOutlinedInput-notchedOutline": {
          border: "1px solid #E9ECEF !important",
        },
        ".Mui-focused": {
          "& .MuiOutlinedInput-notchedOutline": {
            border: "1px solid #5559CE !important",
            transition: "0.5s all",
          },
        },
      }}
    />
  );
}

export default Field;