import * as React from 'react';
import * as DefaultStyles from './style';
import * as _ from 'lodash';
import ButtonPill from "../Pill";

export namespace PillList {
    /**
     * Properties for Pill List
     */
    export interface Props {
        /** Items to show on the pill */
        items?: string[];
        /** On Click function
         * @param {name} name The name of the clicked pill
         */
        onClick?: (name: string) => void;
        /** Disable value: true if the pill component should be disabled */
        disable?: boolean;
        /** 
         * Style for the pill List. It accepts three elements inside:<br/>
         * - ListContainer: Styled component for the container of the pill buttons<br/>
         * - PillContainer: Styled component for the container of the pill button<br/>
         * - PillButtonStyles: Object that contains the styles for the pill button<br/>
         */
        styles?: Styles;
        id?: string;
        name?: string;
    }
    export interface State { }
    export interface Styles {
        ListContainer?: any;
        PillContainer?: any;
        PillButtonStyles?: any;
    }
}

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

    return (
        <Styles.ListContainer id={props.id && props.id + '-pill-list-container'} >
            {
                props.items ? props.items.map((label: string, i: number) => {
                    return (
                        <Styles.PillContainer key={'pill_' + i + '_' + label} id={props.id && props.id + '-' + i + '-pill-container'} >
                            <ButtonPill
                                name={label}
                                onClick={props.onClick ? props.onClick : () => void 0}
                                disable={props.disable}
                                styles={props.styles && props.styles.PillButtonStyles ? props.styles.PillButtonStyles : {}}
                                id={props.id && props.id + '-' + i}

                            />
                        </Styles.PillContainer>
                    );
                }) : null
            }
        </Styles.ListContainer>
    );

}

export default PillList;