import React from 'react';
import { Card } from 'antd';
import { CollapseEL } from '@components';

const Panel = ({ dispatch, loading, children, localCfg, remoteCfg, title, id, isOpened, ...otherProps }) => {
  // console.log(remoteCfg);

  const hidden = otherProps.hidden || remoteCfg.hidden
  const childrenWithProps = React.Children.map(children, (child) => {
    return React.cloneElement(child, {
      localCfg,
      remoteCfg: remoteCfg.blocks && remoteCfg.blocks.find(b => b.blockId === child.props.id),
      readOnly: remoteCfg.readOnly,
    });
  });

  return hidden ? null : <CollapseEL isOpened={isOpened}><Card title={title} loading={false} id={id}>
    {childrenWithProps}
  </Card></CollapseEL>;
};

export default Panel;
