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

export namespace MenuItem {
    export interface Props {
        onClick?: (item: string) => void;
        selectedValue?: boolean;
        displayValue: string;
        item: string;
        disabled?: boolean;
        styles?: Styles;
        image?: string;
        id?: string;
        name?: string;
    }

    export interface Styles {
        MenuItem: any;
        MenuImage: any;
        SubTitle: any;
    }
}

const MenuItem = (props: MenuItem.Props): JSX.Element => {
    const Styles: MenuItem.Styles = _.assignIn(
        { ...DefaultStyles },
        _.pickBy(props.styles)
    );
    return (
        <Styles.MenuItem

            id={props.id && props.id}
            data-testid={"menuItem"}
            selected={props.selectedValue ? props.selectedValue : false}
            onClick={() =>
                props.onClick && !props.disabled
                    ? props.onClick(props.item)
                    : {}
            }
            disabled={props.disabled}
            name={props.name && props.name}

        >
            <Styles.SubTitle id={props.id && props.id + '-subtitle'} name={props.name && props.name + '-subtitle'}>{props.displayValue}</Styles.SubTitle>
            <Styles.MenuImage image={props.image} id={props.id && props.id + '-image'} name={props.name && props.name + '-subtitle'} />
        </Styles.MenuItem>
    );
};

export default MenuItem;