import EditGrayA from "@/components/icons/EditGrayA";
import EditOrangeA from "@/components/icons/EditOrangeA";
import { Button, TextField } from "@mui/material";

// تابع تبدیل اعداد فارسی و عربی به انگلیسی
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 EditField({
  changeData,
  multiline,
  icon,
  placeholder,
  data,
  name,
  iconGray,
  isTransparent,
  noDisable,
  type,
  props,
  error,
}) {
  const handleChange = (e) => {
    let inputValue = e.target.value;

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

      // محدودیت تعداد ارقام
      if (name === "national_code" && inputValue.length > 10) {
        inputValue = inputValue.slice(0, 10);
      } else if (name === "phone" && inputValue.length > 11) {
        inputValue = inputValue.slice(0, 11);
      } else if (name === "insurance_id" && inputValue.length > 16) {
        inputValue = inputValue.slice(0, 16);
      }
    }

    changeData(inputValue, "value", name);
  };

  return (
    <div className="relative w-full">
      <TextField
        {...props}
        rows={multiline}
        multiline={multiline}
        type={type || "text"}
        value={data?.value || ""}
        placeholder={placeholder || ""}
        disabled={noDisable ? false : !data?.isEdit}
        error={!!error}
        helperText={error || ""}
        className={`!w-full res-field-account dark:!bg-transparent ${isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"} }`}
        onChange={handleChange}
        sx={{
          "& .MuiFormLabel-root": {
            top: "-4px !important",
          },
          "& .MuiInputBase-input": { padding: "12.5px 14px" },
          "& .MuiOutlinedInput-notchedOutline": {
            border: "1px solid #D7D7D7 !important",
          },
          "& .MuiInputBase-root": {
            padding: "0 !important",
            borderRadius: "8px !important",
          },
          "& .MuiFormHelperText-root": {
            marginLeft: "0",
            marginRight: "14px",
          },
          ".Mui-focused": {
            "& .MuiOutlinedInput-notchedOutline": {
              border: "1px solid #5559CE !important",
              transition: "0.5s all",
            },
          },
          "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
          {
            display: "none",
          },
        }}
      />
      <Button
        className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1 ${multiline ? "!top-[24px]" : "!top-1/2"}`}
      // onClick={() => {
      // changeData(!data.isEdit, "isEdit", name);
      // }}
      >
        {icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
      </Button>
    </div>
  );
}

export default EditField;