/* eslint-disable object-curly-newline */
import { Container, Head } from 'Components/Layout/Element';
import builders from '../elements-builders';
import components from '../elements-components';
import elementsProps from '../elements-props';
import titles from '../elements-titles';
import map from '../map';

const render = Object.keys(map).reduce((acc, elementName) => {
  const title = titles[elementName];
  const valueName = map[elementName];
  const Component = components[elementName];
  const props = elementsProps[elementName];
  const builder = builders[elementName];

  const Element = builder(Component, {
    elementName,
    valueName,
  });

  acc[elementName] = {
    render: () => (
      <Container key={elementName}>
        <Head title={title} htmlFor={elementName} />
        <Element {...props} id={elementName} />
      </Container>
    ),
  };

  return acc;
}, {});

export default render;
