import {
  RtData,
  RtFormFieldTextProps,
} from '../types/rt-form-field-text.types';
import classNames from 'classnames/bind';
import styles from '../styles/rt-form-field.module.css';
import config from '../styles/component-values-form-field.module.css';
import { ForwardedRef, forwardRef, RefObject, useId } from 'react';
import { useFormField } from '../hooks/use-form-field';
import { RtBaseProps, useRtBaseProps } from '@dpa/react-hoc';
import { useDefaultProps } from '../hooks/use-default-props';
import { RtFormFieldDataContent } from './rt-form-field-data-content';
import { useFormFieldLayout } from '../hooks/use-form-field-layout';
import { RtGrid } from '@dpa/react-grid';
import { RtFrame } from '@dpa/react-frame-intro';

const cn = classNames.bind(styles);

export const RtFormField = forwardRef(function RtFormField(
  _props: RtFormFieldTextProps<any> &
    RtBaseProps<HTMLDivElement> & { data: RtData<any> },
  ref: ForwardedRef<HTMLDivElement>
) {
  const props = useDefaultProps(_props);

  const {
    symbolActionSize,
    localInputRef,
    canClear,
    formFieldDataContentRef,
    formatLabel,
    GridWrapper,
    isInnerGrid,
    gridAttributes,
    gridChildClassname,
    gridProps,
    showPrefixSuffix,
    isAmbulantLabelFloating,
    handleFocus,
    handleClick,
    handleChange,
    handleBlur,
    handleClear,
    handleMouseEnter,
    handleMouseLeave,
    handleKeyDown,
    handleKeyUp,
    handleTrailingActionClick,
  } = useFormField(props);

  const localId = useId();
  const { id: propId, ...baseProps } = useRtBaseProps(props, '0.2.2');
  const id = propId || localId;

  const {
    ChevronButton,
    ClearButton,
    ContentLeadingIcon,
    ContentLeadingSlotWrapper,
    ContentLines,
    ContentTrailingIcon,
    ContentTrailingSlotWrapper,
    FormFieldDetails,
    FormFieldLabel,
    TrailingAction,
    Hint,
  } = useFormFieldLayout(props, {
    canClear,
    formatLabel,
    isAmbulantLabelFloating,
    id,
    showPrefixSuffix,
    symbolActionSize,
    handleClear,
    localInputRef,
    handleBlur,
    handleChange,
    handleFocus,
    handleKeyDown,
    handleKeyUp,
    data: props.data,
    handleTrailingActionClick,
    formFieldDataContentRef,
  });

  return (
    <RtFrame
      isFontSizeProvider
      className={cn(
        config[`rt-form-field-${props.size}`],
        'rt-form-field-text',
        `rt-form-field-text--${props.size}`,
        `rt-form-field-text--${props.ui}`,
        isAmbulantLabelFloating
          ? 'rt-form-field-text--floating'
          : 'rt-form-field-text--not-floating',
        {
          [gridChildClassname]: !isInnerGrid,
        }
      )}
      ref={ref}
      {...(!isInnerGrid ? gridAttributes : {})}
      {...baseProps}
      style={{ width: props.width === 'full' ? '100%' : props.width }}
    >
      {FormFieldLabel}
      <GridWrapper {...gridProps}>
        <RtFormFieldDataContent
          id={id}
          ref={formFieldDataContentRef as RefObject<HTMLDivElement>}
          radius={'primary'}
          size={props.size}
          use={props.use}
          modifier={props.modifier}
          surfaceState={props.disabled ? 'disabled' : 'native'}
          ariaLabel={props.ariaLabel}
          isGridChild={isInnerGrid}
          onMouseDown={handleClick}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          {ContentLeadingSlotWrapper}
          {ContentLeadingIcon}
          {ContentLines}
          {ClearButton}
          {ChevronButton}
          {ContentTrailingIcon}
          {ContentTrailingSlotWrapper}
          {TrailingAction}
        </RtFormFieldDataContent>
        {Hint}
        {FormFieldDetails}
      </GridWrapper>
    </RtFrame>
  );
});