import styles from './styles/rt-grid.module.css';
import config from './styles/component-grid-layout.module.css';
import classnames from 'classnames/bind';
import { RtBaseProps, useRtBaseProps } from '@dpa/react-hoc';
import React, {
  ElementRef,
  ElementType,
  ForwardedRef,
  forwardRef,
} from 'react';
import { RtGridProps } from './rt-grid.types';
import { RtGridChild } from './rt-grid-child';
import { RtFrame } from '@dpa/react-frame-intro';

const cn = classnames.bind(styles);

export const RtGrid = forwardRef(
  <T extends ElementType = 'div'>(
    props: RtGridProps<T> & RtBaseProps<T>,
    ref: ForwardedRef<ElementRef<T>>
  ) => {
    const {
      as: renderAs,
      children,
      direction = 'horizontal',
      width = 'hug',
      ariaLabel,
    } = props;
    const baseProps = useRtBaseProps(props, '0.2.2');

    const Component: ElementType = renderAs || 'div';
    const isArray = children instanceof Array && children.length > 1;
    const computedDirection = isArray ? direction : 'none';

    return (
      <RtFrame
        as={Component}
        isFontSizeProvider
        className={cn(
          'rt-grid',
          'rt-grid-provider',
          `rt-grid--${computedDirection}`,
          `rt-grid--${width}`,
          config[`grid-child-${computedDirection}`]
        )}
        ref={ref}
        aria-label={ariaLabel}
        role={props.role}
        {...baseProps}
      >
        {isArray ? (
          children.map((child, idx) => {
            return (
              <RtGridChild
                key={idx}
                position={
                  idx === 0
                    ? 'leading'
                    : idx === children.length - 1
                    ? 'trailing'
                    : 'intermediate'
                }
              >
                {child}
              </RtGridChild>
            );
          })
        ) : (
          <RtGridChild position="none">{children}</RtGridChild>
        )}
      </RtFrame>
    );
  }
);

RtGrid.displayName = 'RtGrid';