import { ForwardedRef, forwardRef } from 'react';

import { RtSplitterPanelProps } from './rt-splitter-panel.types';
import { useRtBaseProps } from '@dpa/react-hoc';

import styles from '../../styles/rt-splitter.module.css';

import cn from 'classnames';

export const RtSplitterPanel = forwardRef(
  (props: RtSplitterPanelProps, ref: ForwardedRef<HTMLDivElement>) => {
    const { children, size } = props;
    const { ...baseProps } = useRtBaseProps(props, '0.2.2');

    const hasSize = size !== undefined;

    return (
      <div
        ref={ref}
        className={cn(styles['rt-splitter-panel'], {
          [styles['rt-splitter-panel-hidden']]: size === 0,
        })}
        style={{
          flexBasis: hasSize ? size : 'auto',
          flexGrow: hasSize ? 0 : 1,
        }}
        {...baseProps}
      >
        {children}
      </div>
    );
  }
);