import * as React from "react";
// import { Component } from 'react';
// import { Route } from "react-router-dom";
// import { TransitionGroup, CSSTransition } from "react-transition-group";
// import { Wizard,  Steps, Step } from "react-albus";
// import { Line } from "rc-progress";
// import { WithWizard } from 'react-albus';
import StepWizard from 'react-step-wizard';
import { WorkflowAction } from "../Models/WorkflowDesigner";
import { FieldsControl } from "../Customizations/Controls/FieldsControl";


class RecordWizardControl extends React.Component<any, any> {
  private child: any;
  constructor(props: any) {
    super(props);
    this.state = {
      //   record: this.props.record,
      stepsCount: 0,
      stepsControls: []
    };
    this.child = React.createRef();
  }

  componentDidMount() {
    this._prepareFieldsLists();
  }
  componentDidUpdate(prevProps: any) {
    if (prevProps.record !== this.props.record) {
      this._prepareFieldsLists();
    }
  }

  _prepareFieldsLists() {


    if (
      this.props.record &&
      this.props.record.fields &&
      this.props.record.fields.length > 0
    ) {
      this.setState({
        stepsCount: Math.max.apply(
          Math,
          this.props.record.fields.map((x: any) => {
            return x.stepNumber;
          })
        )
      });
      //   this.state.forceU

      // this.state.stepsControls=[];
      for (var i = 0; i < 2; i++) {

        let stepsControl = this.props.record.fields.filter(
          (x: any) => {

            return x.stepNumber == i + 1
          }
        );
        if (stepsControl.length > 0)
          this.state.stepsControls.push(stepsControl);
        // this.setState((prevState: any) => ({
        // stepsControls: [...prevState.stepsControls, stepsControl]
        // }))
      }
      this.setState({ stepsControls: this.state.stepsControls });

    }
  }
  handleExecute(action: WorkflowAction) {
    this.props.ExecuteAction(this.props.record, action);
  }

  handleSubmit(controls: any) {

    controls.forEach((x: any) => {
      this.props.record.fields.forEach((y: any) => {
        if (x.id == y.id) {
          y.data = x.data;
        }
      })
    });
    this.setState({ record: this.state.record });
    if (this.child.current.props.totalSteps == this.child.current.props.currentStep) {
      return this.props.saveRecord(this.props.record);
    }
  }
  handleSaveAsDraft(controls: any) {

    controls.forEach((x: any) => {
      this.props.record.fields.forEach((y: any) => {
        if (x.id == y.id) {
          y.data = x.data;
        }
      })
    });
    this.setState({ record: this.state.record });
    if (this.props.record.fields) {
      return this.props.saveRecord(this.props.record);
    }
  }

  render() {
    // 
    // return (
    //   <Wizard>
    //     <Steps>
    //       <Step id="gandalf">
    //         <h1 className="text-align-center">Gandalf</h1>
    //       </Step>
    //       <Step id="dumbledore">
    //         <h1 className="text-align-center">Dumbledore</h1>
    //       </Step>
    //       <Step id="ice king">
    //         <h1 className="text-align-center">Ice King</h1>
    //       </Step>
    //     </Steps>
    //     <WithWizard
    //       render={({ next, previous, step, steps }) => (
    //         <div className="example-buttons">
    //           {steps.indexOf(step) < steps.length - 1 && (
    //             <button className="btn-fluid margin-1-b" onClick={next}>
    //               Next
    //             </button>
    //           )}

    //           {steps.indexOf(step) > 0 && (
    //             <button className="btn-fluid btn-secondary" onClick={previous}>
    //               Back
    //             </button>
    //           )}
    //         </div>
    //       )}
    //     />
    //   </Wizard>
    // );

    return (

      this.state.stepsControls.length > 1 ?
        <StepWizard isHashEnabled={false}>
          <FieldsControl history={this.props.history} isWizard={true} Record={this.props.record} fields={this.state.stepsControls[0]} actions={this.props.record.actions}
            ref={this.child} onSubmit={this.handleSubmit.bind(this)} saveAsDraft={this.handleSaveAsDraft.bind(this)} key={1} hashKey={"1"}
            OnExecuteWorkflowAction={this.handleExecute.bind(this)} />
          <FieldsControl history={this.props.history} isWizard={true} Record={this.props.record} fields={this.state.stepsControls[1]} actions={this.props.record.actions}
            ref={this.child} onSubmit={this.handleSubmit.bind(this)} saveAsDraft={this.handleSaveAsDraft.bind(this)} key={2} hashKey={"2"}
            OnExecuteWorkflowAction={this.handleExecute.bind(this)} />
          {/* <FieldsControl fieldControls={this.state.stepsControls[2]} ref={this.child} onSubmit={this.handleSubmit} key={3} hashKey={"3"}  />     */}
        </StepWizard>
        :
        <FieldsControl history={this.props.history} isWizard={true} Record={this.props.record} fields={this.state.stepsControls[0]} actions={this.props.record.actions}
          ref={this.child} onSubmit={this.handleSubmit.bind(this)} saveAsDraft={this.handleSaveAsDraft.bind(this)} key={1} hashKey={"1"}
          OnExecuteWorkflowAction={this.handleExecute.bind(this)} />

    )
  }
}

export default RecordWizardControl;
