import * as React from 'react';
import * as _ from 'lodash';
import { InputDropDownDrawer } from '../InputDropDownDrawer';

export namespace DropDown {
    export interface Props {
        /**
         * Custom input component
         */
        customInput?: any;

        customInputProps?: any;
        /**
        /**
         * Custom component to show when no options
         */
        customEmptyStateMessage?: JSX.Element;
        /**
         * Message to show when no options
         */
        emptyStateMessage?: string;
        /**
         * Value to display inside the input
         */
        inputValue: string;
        /**
         * Function called when an option is selected
         */
        onSelectOption: (value: { toString: () => string }) => void;
        /**
         * Placeholder of the input
         */
        placeholder?: string;
        /**
         * Indicates if the input is read only
         */
        readOnly?: boolean;
        /**
         * Indicates if the dropdown is displayed when there are no options matching the value
         * It must be true to display emptyStateMessage or customEmptyStateMessage
         */
        showDropDownOnEmpty?: boolean;
        /**
         * Prop to customize styles
         */
        styles?: Styles;
        /**
         * List of options to be rendered when the user clicks in the button to display them
         */
        suggestOptions: { toString: () => string }[];

        id?: string;

        name?: string;
    }

    export interface State {
        showDropDown: boolean;
    }

    export interface Styles {
        /**
         * Styles for the component that renders the input and the dropdown
         */
        InputDropDownDrawer?: InputDropDownDrawer.Styles;
    }
}

/**
 * Component that displays an input that drops down a list
 * The input value can only be changed by selecting an option from the list
 * 
 * @version 1.0.0
 * 
 */
export default class DropDown extends React.Component<DropDown.Props, DropDown.State> {
    constructor(props: DropDown.Props) {
        super(props);

        this.state = {
            showDropDown: false
        };
    }

    handleDropDownEvent = (event, show: boolean): void => {
        this.setState((prevState: DropDown.State, props: DropDown.Props) => ({
            showDropDown: show && !props.readOnly && (props.suggestOptions.length > 0 || Boolean(props.showDropDownOnEmpty))
        }));
    };

    handleSelectOption = (event: any, option: { toString: () => string }): void => {
        this.props.onSelectOption(option);
        this.setState({
            showDropDown: false
        });
    };

    render(): JSX.Element {
        const Styles: DropDown.Styles = _.merge({}, this.props.styles);
        return (
            <InputDropDownDrawer
                customInput={this.props.customInput}
                customInputProps={this.props.customInputProps}
                customEmptyStateMessage={this.props.customEmptyStateMessage}
                emptyStateMessage={this.props.emptyStateMessage}
                inputValue={this.props.inputValue}
                onDropDownEvent={this.handleDropDownEvent}
                onSelectOption={this.handleSelectOption}
                placeholder={this.props.placeholder}
                readOnly={true}
                showDropDown={this.state.showDropDown}
                showSelectIcon={true}
                suggestOptions={this.props.suggestOptions}
                styles={Styles.InputDropDownDrawer}
                id={this.props.id && this.props.id}
                name={this.props.name && this.props.name}
            />
        );
    }
}