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

export namespace DropDownEmptyState {
    export interface Props {
        /**
         * Custom component to show instead of a message
         */
        customMessage?: JSX.Element;
        /**
         * Message to show with default styling
         */
        message?: string;
        /**
         * Prop to customize styles
         */
        styles?: Styles;

        id?: string;

        name?: string;
    }

    export interface Styles {
        /**
         * Styles for the container of the entire component
         */
        Container?: any;
        /**
         * Styles for showing the message
         */
        Message?: any;
    }
}

/**
 * Component that shows a message. Useful for the dropdown component when there are no options
 * 
 * @version 1.0.0
 * 
 */
export const DropDownEmptyState = (props: DropDownEmptyState.Props) => {
    const Styles: DropDownEmptyState.Styles = _.merge(DefaultStyles, props.styles);

    return (
        <Styles.Container className='drop-down-empty-state-container' id={props.id && props.id + '-empty-state-div'} name={props.name && props.name + '-empty-state-div'}>
            {
                props.message &&
                <Styles.Message className='drop-down-empty-state-message' id={props.id && props.id + '-empty-state-message'} name={props.name && props.name + '-empty-state-message'}> {props.message} </Styles.Message>
            }
            {
                props.customMessage
            }
        </Styles.Container>
    );
};