import * as React from "react";


export function renderDropChoiceDropdown(self, summaryDisplayRender, filterInput, selectAllCheck, choiceInputElmts, tooltip){

    const classNameArray = ['mmui-drop-choice'];

    if (self.state.isOpen) {
        classNameArray.push('mmui-drop-choice-expanded');
    } else {
        classNameArray.push('mmui-drop-choice-collapsed');
    }

    const dropdownButtonClasses = ['btn', 'btn-secondary', 'dropdown-toggle'];
    const empty = self.state.choices.length < 1;
    return (
        <>
            {empty ? (
                <div className="dropdown">
                    <button className="btn btn-secondary dropdown-toggle" type="button" disabled={true}>
                        No Options Available
                    </button>
                </div>
            ) : (
                <div
                    id={self.state.id}
                    className={classNameArray.join(' ')}
                >
                    <div className="mmui-drop-choice-body">
                        <div className="dropdown mmui-drop-select-summary">
                            <button
                                className={dropdownButtonClasses.join(' ')}
                                onClick={self.onHeaderClick}
                                role={'button'}
                                tabIndex={0}
                            >
                                {summaryDisplayRender}
                            </button>
                        </div>
                        <div className="mmui-drop-select-details">
                            <div className="card mt-0 mmui-drop-select-body">
                                {filterInput}
                                <div className="form-group mmui-form-group-scroll">
                                    {selectAllCheck}
                                    {choiceInputElmts}
                                </div>
                            </div>
                        </div>
                    </div>
                    {tooltip}
                </div>
            )}
        </>
    );
}