lti-web-client/src/components/input/TextInput.tsx

'use client';

import {
  ChangeEventHandler,
  FocusEventHandler,
  HTMLInputTypeAttribute,
  ReactNode,
} from 'react';

import { cn } from '@/lib/helper';

export interface TextInputProps {
  type?: HTMLInputTypeAttribute;
  label?: string;
  bottomLabel?: string;
  name: string;
  value?: string | number;
  placeholder?: string;
  className?: {
    wrapper?: string;
    label?: string;
    inputWrapper?: string;
    input?: string;
    inputPrefix?: string;
    inputSuffix?: string;
    inputPrefixSuffixWrapper?: string;
  };
  isError?: boolean;
  isValid?: boolean;
  disabled?: boolean;
  readOnly?: boolean;
  required?: boolean;
  isLoading?: boolean;
  errorMessage?: string;
  startAdornment?: ReactNode;
  endAdornment?: ReactNode;
  inputPrefix?: ReactNode;
  inputSuffix?: ReactNode;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  onBlur?: FocusEventHandler<HTMLInputElement>;
}

const TextInput = ({
  type = 'text',
  label,
  bottomLabel,
  name,
  value,
  placeholder,
  className,
  isError,
  isValid,
  errorMessage,
  startAdornment,
  endAdornment,
  inputPrefix,
  inputSuffix,
  disabled = false,
  required = false,
  onChange,
  onBlur,
  readOnly = false,
  isLoading = false,
}: TextInputProps) => {
  return (
    <div
      className={cn(
        'w-full flex flex-col gap-0 text-start rounded-lg',
        className?.wrapper
      )}
    >
      {label && (
        <label
          htmlFor={name}
          className={cn(
            'w-full py-2 text-xs font-semibold leading-5',
            {
              'text-error': isError,
            },
            className?.label
          )}
        >
          {label}
          {required && (
            <>
              {' '}
              <span className='tooltip tooltip-error' data-tip='required'>
                <span className='text-error'> *</span>
              </span>
            </>
          )}
        </label>
      )}

      {inputPrefix || inputSuffix ? (
        <div
          className={cn(
            'relative flex text-sm',
            className?.inputPrefixSuffixWrapper
          )}
        >
          {inputPrefix && (
            <div
              className={cn(
                'inline-flex items-center px-3 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
                {
                  'bg-base-100 border-base-content/10': !disabled,
                  'bg-base-200 border-base-content/10': disabled,
                  'border-error': isError,
                  'border-success!': isValid,
                },
                className?.inputPrefix
              )}
            >
              {inputPrefix}
            </div>
          )}

          <div
            className={cn(
              'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center border-base-content/10',
              {
                'border-error': isError,
                'border-success!': isValid,
                'rounded-l-none!': inputPrefix,
                'rounded-r-none!': inputSuffix,
                'input-disabled': disabled,
                'cursor-not-allowed': disabled,
                'bg-base-100': !disabled,
                'bg-base-200': disabled,
              },
              className?.inputWrapper
            )}
          >
            {startAdornment && startAdornment}

            <input
              type={type}
              id={name}
              name={name}
              placeholder={placeholder}
              value={value}
              onChange={onChange}
              onBlur={onBlur}
              disabled={disabled}
              className={cn(
                'grow bg-transparent outline-none',
                {
                  'cursor-not-allowed': disabled,
                  'text-gray-500': disabled,
                },
                className?.input
              )}
              readOnly={readOnly}
            />

            {(isLoading || endAdornment) && (
              <div className='flex flex-row gap-2'>
                {isLoading && <span className='loading loading-spinner' />}

                {endAdornment && endAdornment}
              </div>
            )}
          </div>

          {inputSuffix && (
            <div
              className={cn(
                'inline-flex items-center px-3 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
                {
                  'bg-base-100 border-base-content/10': !disabled,
                  'bg-base-200 border-base-content/10': disabled,
                  'border-error': isError,
                  'border-success!': isValid,
                },
                className?.inputSuffix
              )}
            >
              {inputSuffix}
            </div>
          )}
        </div>
      ) : (
        <div
          className={cn(
            'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 flex items-center border-base-content/10',
            {
              'border-error': isError,
              'border-success!': isValid,
              'bg-base-100': !disabled,
              'bg-base-200': disabled,
            },
            className?.inputWrapper
          )}
        >
          {startAdornment && startAdornment}

          <input
            type={type}
            id={name}
            name={name}
            placeholder={placeholder}
            value={value}
            onChange={onChange}
            onBlur={onBlur}
            disabled={disabled}
            className={cn(
              'grow bg-transparent outline-none',
              {
                'cursor-not-allowed': disabled,
                'text-gray-500': disabled,
              },
              className?.input
            )}
            readOnly={readOnly}
          />

          {(isLoading || endAdornment) && (
            <div className='flex flex-row gap-2'>
              {isLoading && <span className='loading loading-spinner' />}

              {endAdornment && endAdornment}
            </div>
          )}
        </div>
      )}

      {!isError && bottomLabel && (
        <p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
      )}
      {isError && errorMessage && (
        <p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
      )}
    </div>
  );
};

export default TextInput;