import React, { forwardRef } from 'react';
import Drawer, { DrawerProps } from '@alifd/meet-react/es/drawer';
import cn from 'classnames';

interface IMobileDrawer extends DrawerProps {
  rootClassName?: string; // drawer根节点的className控制
}

/**
 * 针对meet-react的Drawer做了一层包装，增加了 rootClassName ，设置modal最外层的class， 方便控制modal渲染。 主要是TableProde mobile Filter 使用到了
 * @param props
 * @returns
 */
const MobileDrawer = (props: IMobileDrawer, ref) => {
  const { rootClassName, ...drawerProps } = props;

  // @ts-ignore
  const DrawerRender = Drawer.render;
  if (!DrawerRender || typeof DrawerRender !== 'function') {
    return Drawer;
  }

  const drawerNode = DrawerRender(drawerProps);
  const {
    props: { className },
  } = drawerNode || {};
  if (drawerNode === null) return drawerNode;

  return React.cloneElement(drawerNode, {
    className: cn(className, rootClassName),
    ref,
  });
};

export default forwardRef(MobileDrawer);