import React, { useCallback } from 'react';
import { MediaFigure } from './media-figure';
import { MediaBody } from './media-body';
import { SRow } from '../../s-components/layout/s-row';
import { TCssRules } from '../../types';

type TProps = TCssRules & {
  children: React.ReactNode;
};

interface StaticComponents {
  Figure: React.ComponentType<
    TCssRules & {
      children: React.ReactNode;
    }
  >;
  Body: React.ComponentType<
    TCssRules & {
      children: React.ReactNode;
    }
  >;
}

export const Media: React.FC<TProps> & StaticComponents = props => {
  const renderChildren = useCallback((node: any /*, i*/) => {
    if (!node) {
      return node;
    }
    if (node.type && node.type.name === 'MediaFigure') {
      return node;
      // return React.cloneElement(node, {
      //   // border: '1px solid white',
      // });
    }
    return React.cloneElement<any>(node as any, {
      flexGrow: 1,
      flexBasis: 'auto',
      flexShrink: 1,
    });

    // return node;
  }, []);

  const { children, ...css } = props;

  return <SRow {...css}>{React.Children.map(children, renderChildren)}</SRow>;
};

Media.Figure = MediaFigure;
Media.Body = MediaBody;