__IMPORT_CLONEELEMENT__;
import { createElement } from '__RAX_OR_REACT__';
import { render } from '__RAX_OR_REACTDOM__';
import PropTypes from 'prop-types';

import { normalizeToArray } from '../common/utils';

export default function ShadowView(props) {
  const { children } = props;

  function viewRef(el) {
    el &&
      render(
        normalizeToArray(children).map((child, index) =>
          cloneElement(child, { root: el, key: index })
        ),
        el.shadowRoot || el.attachShadow({ mode: 'open' })
      );
  }

  return (
    <div className='shadow-node' style={{ height: '100%' }} ref={viewRef} />
  );
}

ShadowView.propTypes = {
  children: PropTypes.any,
};