import * as React from 'react';
import * as _ from 'lodash';
import PillList from "../PillList";

export namespace InputPillList {
    /**
     * Properties for Pill Button
     */
    export interface Props {
        /** Label to show on the pill */
        items: string[];
        /** On Click function
         * @param {name} name The name of the clicked pill
         */
        onClick: (name: string) => void;
        /** Set new group of items
         * @param {items} items The new set of items
         */
        updateItems: (items: 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>
         */
        styles?: Styles;
        /** Placeholder value */
        placeholder?: string;

        id?: string;

        name?: string;
    }
    export interface State {
        inputText: string,
    }
    export interface Styles {
        PillListStyles?: any,
        TextInputStyles?: any,
    }
}

class InputPillList extends React.Component<InputPillList.Props, InputPillList.State> {

    constructor(props: InputPillList.Props) {
        super(props);
        this.state = { inputText: '' };
    }

    onChangeText = (value: string) => {
        this.setState({ inputText: (value ? value : '') });
    }

    addPill = (newPillText: string) => {
        if (newPillText && newPillText.trim().length > 0) {
            const items = _.union(this.props.items, [newPillText]);
            this.props.updateItems(items);
            this.setState({
                inputText: '',
            });
        }
    }

    render() {

        const { inputText } = this.state;
        const { disable, styles, items, placeholder } = this.props;
        const children = React.Children.map(this.props.children, (child: any) => {

            if (child.type.name && child.type.name === 'TextInput') {
                return React.cloneElement(child, {
                    value: inputText,
                    onChange: (value: string) => this.onChangeText(value),
                    placeholder,
                    styles: (styles && styles.TextInputStyles) ? styles.TextInputStyles : {},
                    onClickSave: (text: string) => this.addPill(text),
                    disable,
                    showDone: true,
                    id: this.props.id && this.props.id,
                    name: this.props.name && this.props.name
                });
            } else if (child.type.name && child.type.name === 'PillList') {
                return React.cloneElement(child, {
                    items,
                    onClick: (name: string) => this.props.onClick(name),
                    disable,
                    styles: (styles && styles.PillListStyles ? styles.PillListStyles : {}),
                    id: this.props.id && this.props.id,
                    name: this.props.name && this.props.name
                });
            } else {
                return child;
            }
        })

        return (
            <div>{children}</div>
        );
    }
}

export default InputPillList;