import * as React from 'react';
import { COLOR_PALETTE } from '../../constants/colors';
import * as _ from 'lodash';
import * as DefaultStyles from './style';


export namespace ButtonPill {
    /**
     * Properties for Pill Button
     */
    export interface Props {
        /** Label to show on the pill */
        name: 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 button. It is an object that can have 5 optional props (each one a style component):<br>
         * - Pill: Div used as container for read-only or disabled pills.<br>
         * - PillWrapper: Div used as the container for pills that show an icon on hover.<br>
         * - PillText: Div used as the element that contains the text.<br>
         * - DeleteIcon: The span that includes the icon.<br>
         * - DeleteContainer: The div element that surrounds the icon.
         */
        styles?: Styles;
        id?: string;

    }
    export interface Styles {
        Pill?: any;
        PillWrapper?: any;
        PillText?: any;
        DeleteIcon?: any;
        DeleteContainer?: any;
    }
}

/**
 * Pill Component that can be closed by pressing an icon inside the button visible on hover.
 * 
 * @version 1.0.0
 * 
 */
const ButtonPill = (props: ButtonPill.Props): JSX.Element => {
    const Styles: ButtonPill.Styles = _.merge(DefaultStyles, props.styles);

    /**
     * Get the text inside the pill
     */
    const pillContent = (): JSX.Element => {
        return (
            <Styles.PillText id={props.id && props.id + '-pill-text'} name={props.name + '-pill-text'}> {props.name} </Styles.PillText>
        );
    }

    const renderEnabled = (props: ButtonPill.Props): JSX.Element => {
        return (
            <Styles.PillWrapper id={props.id ? props.id + '-pill-wrapper' : props.name} name={props.name + '-pill-wrapper'} >
                {pillContent()}
                <Styles.DeleteContainer onClick={(e) => props.onClick(props.name)} id={props.id && props.id + '-pill-delete-container'} name={props.name + '-pill-delete-container'} >
                    <Styles.DeleteIcon id={props.id && props.id + '-pill-delete-icon'} name={props.name + '-pill-delete-icon'} />
                </Styles.DeleteContainer>
            </Styles.PillWrapper>
        );
    }

    const renderDisabled = (props: ButtonPill.Props): JSX.Element => {
        return (
            <Styles.Pill id={props.id ? props.id + '-pill' : props.name}>
                {pillContent()}
            </Styles.Pill>
        );
    }

    return (
        props.disable ? renderDisabled(props) : renderEnabled(props)
    );
}

export default ButtonPill;