import * as React from 'react';
import * as _ from 'lodash';
import * as DefaultStyles from './style';
import GroupedGridHeader from './Header'
import GroupedGridRow from './Row'

export interface Props {
    header: any,
    styles?: Styles,
    id?: string,
    name?: string,
    children
}

export interface Styles {
    Group?: any,
    HeaderRoot?: any,
    GroupRows?: any,
    RowRoot?: any

}

const GroupedGridElement: React.StatelessComponent<Props> = (props: Props): JSX.Element => {
    const Styles: Styles = _.merge(DefaultStyles, props.styles);
    return (
        <Styles.Group id={props.id && props.id + '-grouped-grid-group-div'} name={props.name && props.name + '-grouped-grid-group-div'}>
            <GroupedGridHeader header={props.header} styles={props.styles && props.styles} id={props.id} name={props.name}>

            </GroupedGridHeader>
            {props.children.map((row, index) =>
                <Styles.GroupRows id={props.id && props.id + '-' + index + '-grouped-grid-group-rows-div'} name={props.name && props.name + '-' + index + '-grouped-grid-group-rows-div'}>
                    <GroupedGridRow key={index} styles={props.styles && props.styles} id={props.id && props.id + '-' + index} name={props.name && props.name + '-' + index}>
                        {row}
                    </GroupedGridRow>
                </Styles.GroupRows>
            )}
        </Styles.Group>
    );
}

export default GroupedGridElement;