import { RtFrame } from '@dpa/react-frame-intro';
import {
  RtGridChildContext,
  RtGridRadius,
  RtGridSize,
  useGridChild,
} from '@dpa/react-grid';
import { RtPopover } from '@dpa/react-popover';
import classNames from 'classnames/bind';
import { ForwardedRef, forwardRef, ReactNode } from 'react';
import styles from '../styles/rt-form-field.module.css';

const cn = classNames.bind(styles);

export const RtFormFieldDataContent = forwardRef(
  function RtFormFieldDataContent(
    {
      children,
      id,
      ariaLabel,
      size,
      radius,
      isGridChild,
      ...rest
    }: {
      children: ReactNode;
      size: RtGridSize;
      radius: RtGridRadius;
      id: string;
      ariaLabel?: string;
      isGridChild?: boolean;
    } & Record<string, any>,
    ref: ForwardedRef<HTMLDivElement>
  ) {
    const { gridChildClassname, gridAttributes } = useGridChild({
      size,
      radius,
    });

    const Component = (
      <RtFrame
        as="div"
        className={cn('rt-form-field-data-content', {
          [gridChildClassname]: isGridChild,
        })}
        surface="wrapper"
        ref={ref}
        {...rest}
        {...(isGridChild ? gridAttributes : {})}
      >
        <RtGridChildContext.Provider value={null}>
          {children}
        </RtGridChildContext.Provider>
      </RtFrame>
    );

    if (ariaLabel)
      return (
        <RtPopover
          use="achromatic-ashy"
          size="xs"
          position="top"
          alignment="middle"
          label={ariaLabel}
          trigger={['focus']}
          tail
        >
          {Component}
        </RtPopover>
      );

    return Component;
  }
);