import { ForwardedRef, forwardRef } from 'react';
import {
  RtData,
  RtFormFieldTextProps,
} from '../types/rt-form-field-text.types';
import { RtBaseProps } from '@dpa/react-hoc';
import { RtFormField } from './rt-form-field';
import { RtText } from '@dpa/react-text';
import { RtFormFieldNumber } from './rt-form-field-number';
import { RtFormFieldNumeric } from './rt-form-field-numeric';
import styles from '../styles/rt-form-field-text.module.css';
import classNames from 'classnames/bind';

const cn = classNames.bind(styles);

const RtDataComponent: RtData<HTMLInputElement> = (props) => {
  return (
    <div className={cn('rt-data-wrapper', `rt-data-wrapper--${props.size}`)}>
      <RtText
        as="input"
        id={props.id}
        typography={props.typography}
        specification="main"
        type={props.type}
        placeholder={props.placeholder}
        className={props.className}
        ref={props.forwardedRef}
        value={props.value}
        name={props.name}
        readOnly={props.readonly}
        required={props.required}
        disabled={props.disabled}
        autoComplete={props.autoComplete}
        minLength={props.minLength}
        maxLength={props.maxLength}
        onChange={props.onChange}
        onFocus={props.onFocus}
        onBlur={props.onBlur}
        onKeyUp={props.onKeyUp}
        onKeyDown={props.onKeyDown}
      />
    </div>
  );
};

const RtFormFieldInternalText = forwardRef(function RtFormFieldText(
  props: RtFormFieldTextProps<HTMLInputElement> & RtBaseProps<HTMLDivElement>,
  ref: ForwardedRef<HTMLDivElement>
) {
  return <RtFormField {...props} ref={ref} data={RtDataComponent} />;
});

type CompoundedTextComponent = typeof RtFormFieldInternalText & {
  Number: typeof RtFormFieldNumber;
  Numeric: typeof RtFormFieldNumeric;
};

export const RtFormFieldText =
  RtFormFieldInternalText as CompoundedTextComponent;

RtFormFieldText.Number = RtFormFieldNumber;
RtFormFieldText.Numeric = RtFormFieldNumeric;