import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

const ELEMEMT_PROP_PREFIX = 'ek';

const ELEMENT_PROP_TYPES = PropTypes.oneOfType([
    PropTypes.array,
    PropTypes.string,
    PropTypes.object,
    PropTypes.number,
]);

function getClassName(elementName, elementProps, componentProps) {
    const result = [elementName];

    for (const key of elementProps) {
        const propName = `${ELEMEMT_PROP_PREFIX}-${key}`;

        if (propName in componentProps) {
            result.push(
                classNames(componentProps[propName])
                    .split(' ')
                    .map((value) => `${elementName}_${key}_${value}`)
            );
        }
    }

    return classNames(result);
}

function getPropTypes(elementProps) {
    const result = {};

    if (Array.isArray(elementProps)) {
        for (const key of elementProps) {
            result[`${ELEMEMT_PROP_PREFIX}-${key}`] = ELEMENT_PROP_TYPES;
        }
    }

    return result;
}

function createElement(tagName, elementName, elementProps) {
    function element(props) {
        return (
            React.createElement(tagName, {
                className: getClassName(elementName, elementProps, props),
            }, props.children)
        );
    }

    element.displayName = elementName;
    element.propTypes = getPropTypes(elementProps);

    return element;
}


const Grid = createElement('div', 'grid', ['column', 'size', 'direction', 'align', 'valign', 'theme', 'wrap']);
const GridItem = createElement('div', 'grid__item', ['width']);

Grid.Item = GridItem;

export default Grid;

@@ -98,43 +98,8 @@
 ';%0A%0A
-const ELEMEMT_PROP_PREFIX = 'ek';%0A%0A
 cons
@@ -261,33 +261,41 @@
 ame(
-elementName, elementProps
+baseClassName, blockName, modList
 , co
@@ -330,23 +330,25 @@
 sult = %5B
-element
+baseClass
 Name%5D;%0A%0A
@@ -365,36 +365,31 @@
 onst key of 
-elementProps
+modList
 ) %7B%0A        
@@ -408,35 +408,25 @@
 me = %60$%7B
-ELEMEMT_PROP_PREFIX
+blockName
 %7D-$%7Bkey%7D
@@ -620,27 +620,25 @@
 ) =%3E %60$%7B
-elementName
+result%5B0%5D
 %7D_$%7Bkey%7D
@@ -737,28 +737,34 @@
 opTypes(
-elementProps
+blockName, modList
 ) %7B%0A    
@@ -805,28 +805,23 @@
 isArray(
-elementProps
+modList
 )) %7B%0A   
@@ -843,28 +843,23 @@
  key of 
-elementProps
+modList
 ) %7B%0A    
@@ -880,27 +880,17 @@
 %5B%60$%7B
-ELEMEMT_PROP_PREFIX
+blockName
 %7D-$%7B
@@ -993,36 +993,118 @@
 me, 
-element
+blockName, elemName, modList) %7B%0A    const baseClass
 Name
-,
+ =
  elem
-entProps) %7B
+Name ? %60$%7BblockName%7D__$%7BelemName%7D%60 : blockName;%0A
 %0A   
@@ -1234,33 +1234,41 @@
 ame(
-elementName, elementProps
+baseClassName, blockName, modList
 , pr
@@ -1348,23 +1348,25 @@
 yName = 
-element
+baseClass
 Name;%0A  
@@ -1404,20 +1404,26 @@
 pes(
-elementProps
+blockName, modList
 );%0A%0A
@@ -1487,16 +1487,22 @@
  'grid',
+ null,
  %5B'colum
@@ -1607,18 +1607,20 @@
 ', 'grid
-__
+', '
 item', %5B

fix element className