import * as React from 'react';

import { BaseComponent, css } from 'office-ui-fabric-react/lib/Utilities';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { IOverflowSetItemProps, OverflowSet } from 'office-ui-fabric-react/lib/OverflowSet';

import * as stylesImport from 'office-ui-fabric-react/lib/components/OverflowSet/examples/OverflowSet.Example.scss';
import 'office-ui-fabric-react/lib/components/OverflowSet/examples/OverflowSet.Example.scss'
 import './CommandsBar.css'
import { FormattedMessage } from 'react-intl';
// import { Command } from '../Models';
const styles: any = stylesImport;

export class CommandsBar extends BaseComponent<any, any> {
    constructor(props: any) {
        super(props);
    }

    private uploadFileClicked(ctrlId:string){
       let uploadFileCtrl = document.getElementById(ctrlId);
       if(uploadFileCtrl){
           uploadFileCtrl.click();
       }
    }
    
    public render(): JSX.Element {
        return (
            <div className="barItem " style={{ background: 'rgb(244, 244, 244)', }}>
                <OverflowSet
                    className="bar commands"
                    items={this.props.Commands}
                    onRenderOverflowButton={this._onRenderOverflowButton}
                    onRenderItem={this._onRenderItem.bind(this)}
                    
                />
            </div>
        );
    }

    private _onRenderItem(item: IOverflowSetItemProps): JSX.Element {
        if (item.onRender) {
            return item.onRender(item);
        }
        if(item.key.indexOf("upload")>-1)
        {
            return <div >
                <DefaultButton  onRenderText={this._renderButtonText}  iconProps={{ iconName: item.icon }} menuProps={item.subMenuProps} text={item.name} onClick={this.uploadFileClicked.bind(this,'uploadFile' + item.key)} />
                <input type="file" id={'uploadFile' + item.key} onChange={item.onClick} style={{ display:'none' }} ></input>
            </div>            
        }
        return <DefaultButton iconProps={{ iconName: item.icon }} menuProps={item.subMenuProps} text={item.name} onClick={item.onClick} 
                                onRenderText={this._renderButtonText} />;
    }

    // componentDidMount() {
    //     for (var i = 0; i < this.props.Commands.length; i++) {
    //         this.props.Commands.push({
    //             key: this.props.Commands[i].key,
    //             name: this.props.Commands[i].name,
    //             icon: this.props.Commands[i].icon,
    //             onClick: this.props.Commands[i].onClick
    //         })
    //     }
    // }

    private _onRenderOverflowButton(overflowItems: any[] | undefined): JSX.Element {
        return (
            <DefaultButton
                className={css(styles.overflowButton)}
                menuIconProps={{ iconName: 'More' }}
                menuProps={{ items: overflowItems! }}
            />
        );
    }

    private _renderButtonText = (item: any) : JSX.Element | null => {
        return (
            <FormattedMessage id={item.text}/>
        );
      };

 
}

