import * as React from "react";
 import * as moment from "moment";

import './index.css';
import {  PrimaryButton, IconButton } from "office-ui-fabric-react";
import { FormattedMessage } from "react-intl";

export const CalendarToolbar = (toolbar: any) => {
    const goToBack = () => {
      toolbar.onNavigate("PREV");
    };
    const goToNext = () => {
      toolbar.onNavigate("NEXT");
    };
    const goToCurrent = () => {
      toolbar.onNavigate("TODAY");
    };
  
    const label = () => {
      const date = moment(toolbar.date);
      return (
        <span>
          <span>{date.format("MMMM")} </span>
          <span> {date.format("YYYY")}</span>
        </span>
      );
    };
    
    const _renderButtonText = (item: any): JSX.Element => {
      return(
        <FormattedMessage id={item.text}/>
      )
    };
    return (
      <div className="big-calendar-header">
        <div className="float-left">
          <label>{label()}</label>
        </div>
  
        <div className="float-right">
          <div>
            <PrimaryButton
            text="Today"
            onClick={goToCurrent}
            className="mr-10 btn-raduis"
            onRenderText={_renderButtonText}
          />
          
            {/* <button className="btn calendar-prev-btn mr-1" onClick={goToBack}>
              <span className="simple-icon-arrow-left" />
            </button> */}
            <IconButton  className="d-inline-block-en mr-10 calendar-btn-nav" iconProps={{ iconName: 'ChevronLeftMed' }} title="Emoji" ariaLabel="Emoji" onClick={goToBack}/>
            <IconButton  className=" calendar-btn-nav mr-10 " iconProps={{ iconName: 'ChevronRightMed' }} title="Emoji" ariaLabel="Emoji" onClick={goToNext}/>
            <IconButton  className="d-inline-block-ar mr-10 calendar-btn-nav" iconProps={{ iconName: 'ChevronLeftMed' }} title="Emoji" ariaLabel="Emoji" onClick={goToBack}/>

{/* 
            <button className="btn calendar-next-btn" onClick={goToNext}>
              <span className="simple-icon-arrow-right" />
            </button> */}
          </div>
        </div>
      </div>
    );
  };
  