import PropTypes from 'prop-types';
import classnames from 'classnames';
import ContainerBreakpoint from "../../../application/ContainerBreakpoint/index.js";
import ModuleContainer from "../../ModuleContainer/index.js";
import Toggle from '../Toggle';
import Row from '../Row';
import Column from '../Column';
import classes from './styles.module.scss';
const LayoutNode = function LayoutNode(props) {
  const {
    node,
    components
  } = props;
  const {
    type,
    card,
    grow,
    props: nodeProps = {}
  } = node;
  if (type === 'toggle') {
    return <Toggle node={node} components={components} LayoutNode={LayoutNode} />;
  }
  if (type === 'row') {
    return <Row node={node} components={components} LayoutNode={LayoutNode} />;
  }
  if (type === 'column') {
    return <Column node={node} components={components} LayoutNode={LayoutNode} />;
  }
  const Component = components[type];
  if (!Component) return null;
  return <ContainerBreakpoint as={ModuleContainer} className={classnames({
    [classes.grow]: grow,
    [classes.ad]: type === 'ElectionAd'
  })} forwardProps={{
    card,
    node
  }}>
      <Component {...nodeProps} />
    </ContainerBreakpoint>;
};
LayoutNode.defaultProps = {
  components: {}
};
LayoutNode.propTypes = {
  node: PropTypes.shape({
    type: PropTypes.string.isRequired,
    card: PropTypes.bool,
    grow: PropTypes.bool,
    props: PropTypes.shape({})
  }).isRequired,
  components: PropTypes.shape({})
};
export default LayoutNode;