import * as React from 'react';

import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
import { IButtonProps, DefaultButton } from 'office-ui-fabric-react';
import { FormattedMessage } from 'react-intl';

export class NewCommandBar extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
  }

  onRenderItem() {

  }
  public render(): JSX.Element {
    // debugger;
    const customButton = (props: IButtonProps) => {
      let text = props.text;
      //props.text = undefined;
      return (
        <DefaultButton
          allowDisabledFocus={props.allowDisabledFocus}
          aria-posinset={props['aria-posinset']}
          aria-setsize={props['aria-setsize']}
          className={props.className}
          iconProps={props.iconProps}
          menuProps={props.menuProps}
          onClick={props.onClick}
          styles={props.styles}
        >
          {/* <FormattedMessage  id=""/>
             */}
          <FormattedMessage id={text || "command"} />
        </DefaultButton>
      );
    };
    const customeOverflowBotton = (props: IButtonProps) => {
      let text = props.text;

      //props.text = undefined;
      return (
        <DefaultButton
          allowDisabledFocus={props.allowDisabledFocus}
          aria-posinset={props['aria-posinset']}
          aria-setsize={props['aria-setsize']}
          className={props.className}
          iconProps={props.iconProps}
          menuProps={props.menuProps}
          onClick={props.onClick}
          styles={props.styles}
        >
          {/* <FormattedMessage  id=""/>
             */}
          <FormattedMessage id={text || " "} />
        </DefaultButton>
      );
    };
    return (
      <div>
        <CommandBar
          items={this.props.Commands}
          overflowButtonProps={{ ariaLabel: 'More commands' }}
          ariaLabel={'Use left and right arrow keys to navigate between commands'}
          buttonAs={customButton}
          //  contextualMenuItemAs={}
          overflowButtonAs={customeOverflowBotton}
          className="command-bar-recordslist"
        />
      </div>
    );
  }

}
