import * as React from "react";
import * as _ from "lodash";
import * as DefaultStyles from "./styles";


export namespace SideMenuComponent {
    export interface Props {
        onClick: (item: string) => void;
        styles?: Styles;
        children: JSX.Element[];
        id?: string;
        name?: string;
    }

    export interface Styles {
        MenuListContainer?: any;
        Container?: any;
        SubTitle?: any;
        MenuEligibleItem?: any;
        MenuItem?: any;
        MenuImage?: any;
    }
}

const SideMenuComponent = (props: SideMenuComponent.Props): JSX.Element => {
    const Styles: SideMenuComponent.Styles = _.merge(
        DefaultStyles,
        props.styles
    );

    const children: JSX.Element[] = props.children.map((child, index) => {
        let childCopy = _.clone(child);
        childCopy.props = {
            ...childCopy.props,
            onClick: () => props.onClick(child.props.item),
            id: props.id && props.id + '-' + child.props.id,
            name: props.name && props.name + '-' + child.props.name,
        };
        return childCopy;
    });

    return (
        <Styles.MenuListContainer id={props.id && props.id + '-side-menu-list-container'} name={props.name && props.name + '-side-menu-list-container'}>
            <Styles.Container data-testid={"sideMenu"} id={props.id && props.id + '-side-menu-container'} name={props.name && props.name + '-side-menu-container'}>
                {children}
            </Styles.Container>
        </Styles.MenuListContainer>
    );
};

export default SideMenuComponent;