import { useState, useEffect } from "react";
import styles from "./input.module.css";
import { InputAdornment, TextField } from "@mui/material";
import { toFarsiNumber } from "../../../utils";
import Typography from "@/components/Typographys/Typography";

interface inputProps {
  className?: string;
  value?:String | any;
  defaultValue?: string;
  onChange?: (value: any , event: any) => void;
  icon?: string;
  align?: string;
  iconFun?: (event: any) => void;
  labelInput?: string;
  maxLength?: string;
  placeholder?: string;
  multiline?: boolean;
  rows?: string ;
  type?: string;
  data?: string;
}
function Input({
  className,
  value,
  defaultValue,
  maxLength,
  onChange = () => {},
  icon,
  align,
  iconFun,
  labelInput,
  placeholder,
  multiline = false,
  rows = undefined,
  type = "text",
  data,
  ...rest
}: inputProps) {
  const [_value, setValue] = useState("");
  const onTextFieldChange = (event :any) => {
    if (data === "all") {
      const innerValue = event.target.value;
      setValue(innerValue);
      onChange(innerValue , event);
    } else {
      const innerValue = event.target.value ?? "";
      setValue(innerValue);
      onChange(innerValue , innerValue);
    }
  };
  useEffect(() => {
    setValue(value);
  }, [value]);
  return (
    <>
      {labelInput ? (
        <Typography color={""} size="large" type="label" className={styles.labelInput}>
          {labelInput}
        </Typography>
      ) : undefined}
      <TextField
        value={toFarsiNumber(_value)}
        type={type}
        className={styles.inputImpo + " " + className}
        fullWidth
        placeholder={placeholder}
        multiline={multiline}
        rows={rows}
        variant="filled"
        InputProps={{
          startAdornment: icon ? (
            <InputAdornment
              position={align === "left" ? "start" : "end"}
              onClick={iconFun}
            >
              {icon}
            </InputAdornment>
          ) : null,
        }}
        inputProps={{
          sx: {
            "&::placeholder": {
              color: "#1D1A22",
              fontSize: "16px",
              opacity: 1,
              letterSpacing: "-0.04em",
              fontVariationSettings: "'wght' 350",
            },
          },
          maxLength,
        }}
        onChange={onTextFieldChange}
        {...rest}
      />
    </>
  );
}

export default Input;
