import * as React from "react";

import {
    MmuiTokenTypeaheadComponent,
    MmuiTokenTypeaheadProps,
    MmuiTokenTypeaheadState
} from "../mmui-react-component";

export interface MmuiBlueTokenTypeaheadProps extends MmuiTokenTypeaheadProps {

}

export interface MmuiBlueTokenTypeaheadState extends MmuiTokenTypeaheadState {

}


export class MmuiBlueTokenTypeaheadComponent<
    P extends MmuiBlueTokenTypeaheadProps,
    S extends MmuiBlueTokenTypeaheadState
> extends MmuiTokenTypeaheadComponent<P, S> {

    constructor(props) {
        super(props);
    }

    tokenDisplayRender(token) {
        const key = `token-${token.id}`;
        let popover;
        const dataContent = 'data-content';
        const dataToggle = 'data-toggle';
        const dataPlacement = 'data-placement';
        const variableAttribute = {
            [dataContent]: token.display,
            [dataToggle]: 'popover',
            [dataPlacement]: 'top',
        };

        if (token.display.length > 14) {
            popover = variableAttribute;
        }

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

    renderTokenField(
        tokenElmtFirst,
        summaryDisplay,
        summaryInput,
        tokenElmts,
        suggestionElmts,
        tokenInputs){

        const tokenfieldClassArray = ['mmui-tokenfield'];
        if (this.state.isExpanded) {
            tokenfieldClassArray.push('mmui-tokenfield-expanded');
        } else {
            tokenfieldClassArray.push('mmui-tokenfield-collapsed');
        }

        const tokenfieldClassNames = tokenfieldClassArray.join(' ');

        let resetLink,
            resetLinkStyle = { display: 'none' },
            suggestionsStyle = { display: 'none' }
        ;
        if (this.state.hasChanged) {
            resetLinkStyle.display = 'block';
        }
        if (this.state.suggestions.length > 0) {
            suggestionsStyle.display = 'block';
        }

        if (this.state.hasReset) {
            resetLink = (
                <button
                    className="btn btn-inline mmui-tokenfield-reset"
                    style={resetLinkStyle}
                    onClick={this.onReset}
                >
                    Reset
                </button>
            );
        }

        return (
            <div className={tokenfieldClassNames}>
                <div className="mmui-tokenfield-summary">
                    <div className="dropdown">
                        <button
                            className='btn btn-secondary dropdown-toggle'
                            onClick={this.onExpandTokenfield}
                            role='button'
                            tabIndex={0}
                            onFocus={this.onExpandTokenfield}
                        >
                            {tokenElmtFirst}&nbsp;{summaryDisplay}{summaryInput}{resetLink}
                        </button>
                    </div>
                </div>
                <div className="mmui-tokenfield-details">
                    <div className="card mmui-tokens-input d-flex flex-row flex-wrap">
                        <div className="mmui-tokens d-flex flex-row flex-wrap">{tokenElmts}</div>
                        <input
                            type="text"
                            className="form-control mmui-form-control mmui-typeahead-input"
                            name={this.getQueryInputName()}
                            value={this.state.typeaheadInput}
                            placeholder={this.state.placeHolder}
                            onChange={this.onTypeaheadInput}
                        />
                    </div>
                    <div className="mmui-token-suggestions" >
                        <div
                            className="card card-suggestions"
                            style={suggestionsStyle}
                        >
                            {suggestionElmts}
                        </div>
                    </div>
                </div>
                {tokenInputs}
            </div>
        );
    }
}