import * as React from "react";

import {MmuiDropChoiceMultipleComponent, MmuiDropChoiceMultipleProps} from "../../mmui-react-component";
import {renderDropChoiceDropdown} from "./common";

export interface MmuiBlueDropChoiceMultipleProps extends MmuiDropChoiceMultipleProps {

}


export class MmuiBlueDropChoiceMultipleComponent<P extends MmuiBlueDropChoiceMultipleProps> extends MmuiDropChoiceMultipleComponent<P> {
    constructor(props) {
        super(props);
    }

    getTokenRender(choice, parent = undefined){

        let key = `token-${choice.id}`,
            display = choice.display,
            isCheckedParent =
                choice.isChecked &&
                choice.children &&
                choice.children.length > 0;
        if (parent) {
            display = `${parent.display} - ${display}`;
        } else if (isCheckedParent) {
            display = `${display} - All`;
        }

        return (
            <span
                key={key}
                id={key}
                className="badge badge-secondary mmui-token"
                data-token-id={choice.id}
                data-token-display={choice.display}
                onMouseOver={this.onTokenMouseOver.bind(this)}
                onMouseOut={this.onTokenMouseOut.bind(this)}
            >
                <span className="mmui-token-display">{display}</span>
                <button
                    className="btn btn-inline mmui-token-remove"
                    onClick={this.onTokenRemove}
                >
                    <span className="icon-sm icon-cancel-white" data-token-id={choice.id}></span>
                </button>
            </span>
        )
    }

    renderChoiceInput(choice) {
        const choiceInputProps: any = {
                id: choice.id,
                name: choice.name,
                value: choice.value,
                checked: choice.isChecked,
            },
            choiceStyle: any = { display: 'block' };
        if (choice.isParent) {
            choiceInputProps['data-isparent'] = 'true';
        } else {
            choiceInputProps['data-parentid'] = choice.parentValue;
        }

        if (!choice.isVisible) {
            choiceStyle.display = 'none';
        }

        if (!this.props.hasParentSelection && choice.children) {
            return <span>{choice.display}</span>;
        }

        return (
            <div key={choice.id} style={choiceStyle} >
                <div className="custom-control custom-checkbox">
                    <input
                        type="checkbox"
                        className="custom-control-input"
                        {...choiceInputProps}
                        data-display={choice.display}
                        onChange={this.onChoiceChange}
                    />
                    <label className="custom-control-label" htmlFor={choice.id}>{choice.display}</label>
                </div>
            </div>
        );
    }

    renderDropdown(summaryDisplayRender, filterInput, selectAllCheck, choiceInputElmts, tooltip){
        return renderDropChoiceDropdown(this, summaryDisplayRender, filterInput, selectAllCheck, choiceInputElmts, tooltip);
    }
}