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

function EditField({
  changeData,
  multiline,
  icon,
  placeholder,
  data,
  name,
  iconGray,
  isTransparent,
  noDisable,
  type,
  props,
}) {
  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}
        className={`!w-full res-field-account dark:!bg-transparent ${
          isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
        }`}
        onChange={(e) => {
          changeData(e.target.value, "value", name);
        }}
        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",
          },
          ".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;