import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import { LEFT } from '../../constants/alignment';

import './styles/FlexContainer.scss';

const n = createNamespace('FlexContainer');

const FlexContainer = ({
    component: Component,
    itemList,
    flexContainerSettings = {},
    ...otherProps
}) => {
    const {
        rowGap,
        columnGap,
        displayBorder,
        contentAlignment
    } = flexContainerSettings;

    const wrapperModifiers = [
        displayBorder && 'with-border'
    ];

    const wrapperVariables = {
        'row-gap': `${rowGap}px`,
        'column-gap': `${columnGap}px`,
        'justify-content': contentAlignment
    };

    const itemModifier = [
        displayBorder && 'with-border'
    ];

    return (
        <div {...n('wrapper', wrapperModifiers).withVariables(wrapperVariables).props}>
            {itemList?.map(item => (
                <div {...n('item', itemModifier).props} key={item.key}>
                    <Component
                        {...item}
                        {...otherProps}
                    />
                </div>
            ))}
        </div>
    );
};

FlexContainer.propTypes = {
    component: PropTypes.func.isRequired,
    itemList: PropTypes.array.isRequired,
    flexContainerSettings: PropTypes.object
};

FlexContainer.defaultProps = {
    flexContainerSettings: {
        rowGap: 0,
        columnGap: 0,
        displayBorder: false,
        contentAlignment: LEFT
    }
};

export default FlexContainer;
