frontPanel/src/ui_kit/CustomTextField.tsx

import React, { useState } from "react";
import { Box, FormControl, TextField, Typography, useTheme } from "@mui/material";
import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
import type { InputProps, SxProps, Theme } from "@mui/material";

interface CustomTextFieldProps {
  placeholder: string;
  value?: string;
  error?: string;
  emptyError?: boolean;
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
  text?: string;
  maxLength?: number;
  sx?: SxProps<Theme>;
  InputProps?: Partial<InputProps>;
}

export default function CustomTextField({
  placeholder,
  value,
  onChange,
  onKeyDown,
  onBlur,
  text,
  sx,
  error,
  emptyError,
  InputProps,
  maxLength = 200,
}: CustomTextFieldProps) {
  const theme = useTheme();

  const [inputValue, setInputValue] = useState(value || text || "");
  const [isInputActive, setIsInputActive] = useState(false);

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const inputValue = event.target.value;
    setInputValue(inputValue);

    if (onChange) {
      onChange(event);
    }
  };

  const handleInputFocus = () => {
    setIsInputActive(true);
  };

  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
    setIsInputActive(false);

    if (onBlur) {
      onBlur(event);
    }
  };

  return (
    <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
      <TextField
        defaultValue={text}
        fullWidth
        value={inputValue}
        placeholder={placeholder}
        onChange={handleInputChange}
        error={!!error || emptyError}
        label={error}
        onFocus={handleInputFocus}
        onBlur={handleInputBlur}
        onKeyDown={onKeyDown}
        sx={{
          "& .MuiInputBase-root": {
            backgroundColor: theme.palette.background.default,
            height: "48px",
            borderRadius: "10px",
          },
          "& .MuiInputLabel-root": {
            fontSize: "13.5px",
            marginTop: "3px",
          },
        }}
        InputProps={InputProps}
        inputProps={{
          maxLength: maxLength,
          sx: {
            borderRadius: "10px",
            fontSize: "18px",
            lineHeight: "21px",
            py: 0,
          },
          ...sx,
        }}
        data-cy="textfield"
      />
      {isInputActive && inputValue.length >= maxLength - 7 && (
        <Box
          sx={{
            display: "flex",
            marginTop: "5px",
            marginLeft: "auto",
            position: "absolute",
            bottom: "-25px",
            right: "0",
          }}
        >
          <Typography fontSize="14px">{inputValue.length}</Typography>
          <span>/</span>
          <Typography fontSize="14px">{maxLength}</Typography>
        </Box>
      )}
    </FormControl>
  );
}