import { FormControl } from '@mui/material';

import CustomHelperText from '../Base/CustomHelperText';
import CustomInput from '../Base/CustomInput';
import CustomLabel from '../Base/CustomLabel';

import { type InputProps } from './types';

const InputClassic = ({
  sx = {},
  label,
  labelTooltip,
  value,
  helperText,
  errorText,
  onChange,
  placeholder,
  inputRef,
  error,
  success,
  loading,
  maxLength = 100,
  hasCounter = true,
  fullWidth = true,
  multiline,
  minRows,
  maxRows,
  startAdornment,
  endAdornment,
  disabled = false,
  showClear = true,
  startAdormentPosition = 'center',
  id,
  onFocus,
  onKeyDown,
  onBlur,
  onPaste,
  autoFocus,
  transform,
  size,
  autoComplete,
  autoCorrect,
  autoCapitalize,
  type,
  name,
  hasHelperBullet = false,
  inputMode,
  hideErrorText = false,
  step,
}: InputProps) => {
  const composedHelperText = hasHelperBullet ? `• ${helperText}` : helperText;
  const showHelperText = !error || (error && !hideErrorText);

  return (
    <FormControl
      sx={sx}
      error={error}
      fullWidth={fullWidth}
      disabled={disabled}
    >
      <CustomLabel
        label={label}
        success={success}
        labelTooltip={labelTooltip}
      />
      <CustomInput
        value={transform?.output ? transform.output(value) : value}
        onChange={inputValue => {
          onChange?.(
            transform?.input ? transform.input(inputValue) : inputValue,
          );
        }}
        onFocus={onFocus}
        placeholder={placeholder}
        inputRef={inputRef}
        maxLength={maxLength}
        success={success}
        autoFocus={autoFocus}
        loading={loading}
        multiline={multiline}
        minRows={minRows}
        maxRows={maxRows}
        startAdornment={startAdornment}
        endAdornment={endAdornment}
        disabled={disabled}
        showClear={showClear}
        startAdormentPosition={startAdormentPosition}
        id={id}
        transform={transform}
        onKeyDown={onKeyDown}
        onBlur={onBlur}
        autoComplete={autoComplete}
        autoCorrect={autoCorrect}
        autoCapitalize={autoCapitalize}
        type={type}
        name={name}
        size={size}
        inputMode={inputMode}
        onPaste={onPaste}
        step={step}
      />
      {showHelperText && (
        <CustomHelperText
          helperText={error ? errorText : composedHelperText}
          hasCounter={hasCounter}
          maxLength={maxLength}
          value={value}
          success={success}
          error={error}
        />
      )}
    </FormControl>
  );
};

export type { InputProps };

export default InputClassic;