import * as React from "react";
import { RecordService } from "../../Services";
import {  Modal, DefaultButton } from "office-ui-fabric-react";
// import { FormattedMessage } from "react-intl";

import "./WorkflowActions.css";
import { Sorting, Pagination } from "../../Models";
import { RecordsListView } from "..";
import { FieldsControl } from "../../Customizations/Controls/Correspondence/FieldsControl";
class WorkflowActions extends React.Component<any, any> {
  private EntityId = 15;
  private _recordService: RecordService = new RecordService();
  private _pageSize = 5;
  _getRecord() {
    // let _this = this;
    // this._loadingService.show();
    this._recordService
      .getEmptyRecord(this.EntityId)
      .then( 
        result => {
    //debugger;
          let nameIndex = result.fields.map(function(e) { return e.displayName; }).indexOf('Name');
          result.fields.splice(nameIndex, 1);
          this.setState({
            record: result
          });
    
          this.setState({ showActionsModal: true });

          // this._loadingService.hide();
        },
        err => {
          // this._loadingService.hide();
        }
      )
      .catch(err => {
        // _this._loadingService.hide();
      });
  };

  loadRecordsWithNewCriteria = (sorted: number, sortedDescending: boolean, page: number) => {
    
    const criteria = this.state.criteria;

    if (sorted > -1) {
        criteria.sorting = new Sorting();
        criteria.sorting.fieldId = sorted;
        criteria.sorting.direction = sortedDescending == true ? 1 : 0;
    }
    else {
        criteria.sorting = null;
    }

    criteria.pagination = new Pagination();
    criteria.pagination.start = page;
    criteria.pagination.count = this._pageSize;

}



componentDidMount() {
  this.props.onRef(this)
}

componentWillUnmount() {
  this.props.onRef(undefined)
}

  constructor(props: any) {
    super(props);
    this.state = {
      record: {},
      showActionsModal: false,
      totalPages: 0,
      actionRecords: []
    };

  }
  render() {
    return (
      <div>
        {/* <PrimaryButton
          onClick={this._showActionModal}
          text="Actions"
          onRenderText={this._onRenderButtonText}
        /> */}
        <Modal
          titleAriaId="titleId"
          subtitleAriaId="subtitleId"
          isOpen={this.state.showActionsModal}
          onDismiss={this._closeActionsModal}
          isBlocking={true}
          containerClassName="modal-actions-style"
        >
          <div className="ms-modalExample-header">
            <span id="titleId">Workflow Actions</span>
          </div>
          <div id="subtitleId" className="ms-modalExample-body">
            <div className="ms-Grid">
              <div className="ms-Grid-col ms-sm12 ms-md12 ms-lg12">
                <FieldsControl actionBtnName={"Add"} colLgBtnClass={"ms-lg2"} colLgFieldClass={"ms-lg5"} fields={this.state.record.fields} onSubmit={this.handleSubmit.bind(this)} />
              </div>
              <div className="ms-Grid-col ms-sm12 ms-md12 ms-lg12">
              <RecordsListView
                TotalPages={this.state.totalPages}
                Records={this.state.actionRecords}
                LoadRecordsWithNewCriteria={this.loadRecordsWithNewCriteria.bind(
                  this
                )}
                Actions={[{iconName: "Delete", actionType: 0}]}
                deleteItem={this.handleDelete.bind(this)}
              />
              </div>
              <DefaultButton onClick={this._closeActionsModal}  text="Close" />

            </div>
          </div>
        </Modal>
      </div>
    );
  }

  // private _onRenderButtonText = (item: any): JSX.Element => {
  //   return <FormattedMessage id={item.text} />;
  // };
  public showActionModal = () => {
    this._getRecord();

  };

  private _closeActionsModal = (): void => {
    this.setState({ showActionsModal: false });
  };

  handleSubmit(controls: any){ 
    controls.forEach((x : any)=> {
        this.state.record.fields.forEach((y:any) => {
            if(x.id == y.id){
              y.data = x.data;
            }
        })
    });
    this.setState({record:this.state.record});
    this.state.actionRecords.push(this.state.record);
    // this.setState({actionRecords: this.state.record})
    this.forceUpdate();
    this._getRecord();
    // if(this.child.current.props.totalSteps == this.child.current.props.currentStep){
    //  this.props.saveRecord(this.props.record);
    // }
  }

  handleDelete(record: any, index:number){
    // let arr;
    //debugger;
    // arr =  this.state.actionRecords.filter((x: any) => {
    //   return x.inde;
    // })
    this.state.actionRecords.splice(index, 1)
    this.setState({actionRecords: this.state.actionRecords});

  }

}

export default WorkflowActions;
