/**
 * AddRestrictedPayeePanel.js
 */

import React, { Component, Fragment } from "react";
import PropTypes from "prop-types";
import { observer } from "mobx-react";
import Col from "react-bootstrap/lib/Col";
import Row from "react-bootstrap/lib/Row";
import { BaseContext } from "frontend-react-f4-base-commons";
import { BaseComponents } from "frontend-react-f4-base-ui";
import { browserHistory } from "react-router";
import LeftPanel from "../LeftPanel/LeftPanel";
import RightPanel from "../RightPanel/RightPanel";
import CitrineFunctionCodes from "../../enums/CitrineFunctionCodes";
import { NoAccessCTR } from "frontend-react-f4-base-ui/lib/containers";
import FeedbackModalMessage from "../FeedbackModalMessage/FeedbackModalMessage";

import StepWizard from "../StepWizard/StepWizard";
import BoHeader from "../BoHeader/BoHeader";
import BoTwoColMainForm from "../BoTwoColMainForm/BoTwoColMainForm";
import BoTwoColForm from "../BoTwoColForm/BoTwoColForm";
import BoTwoColBottom from "../BoTwoColBottom/BoTwoColBottom";

const { connect } = BaseContext;
const {
  strings,
  F4InputField,
  FeedbackModal1,
  Feedback,
  F4ButtonSave,
  F4Form
} = BaseComponents;

@observer
@connect
class AddRestrictedPayeePanel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedSave: false,
      clickedSaveAdd: false,
      clickedNext: false,
      pages: {
        initial: 0,
        confirm: 1,
        ack: 2
      }
    };
  }

  departmentDetails = () => {
    const { RestrictedPayeeStore } = this.context.store;
    return (
      <Fragment>
        <Row>
          <Col md={3}>
            <F4InputField
              // onChange={this.onChangeText.bind(this, "cd")}
              focusLabelClassName="focusLabel"
              labelField={strings.global_cd}
              value={
                RestrictedPayeeStore.Inputs.cd
                  ? RestrictedPayeeStore.Inputs.cd
                  : ""
              }
              required
              maxLength="10"
              onlyLetterNumber
            />
          </Col>
        </Row>
        <Row>
          <Col md={6}>
            <F4InputField
              // onChange={this.onChangeText.bind(this, "dscp")}
              focusLabelClassName="focusLabel"
              labelField={strings.global_description}
              value={
                RestrictedPayeeStore.Inputs.dscp
                  ? RestrictedPayeeStore.Inputs.dscp
                  : ""
              }
              required
              maxLength="100"
            />
          </Col>
        </Row>
      </Fragment>
    );
  };
  render() {
    const { RestrictedPayeeStore, SettingsStore, auth } = this.context.store;

    const copyFromInitial = RestrictedPayeeStore.list;

    // if (
    //   (RestrictedPayeeStore.Inputs.cd == "" && !isAdd) ||
    //   auth.sessionUser.user == null
    // )
    //   return (
    //     <NoAccessCTR
    //       image={<img height="80" src="images/ego-icons/unauthorized-bo.svg" />}
    //     />
    //   );

    return (
      <div onKeyPress={this.handleKeyPress}>
        <FeedbackModal1 modalSettings={SettingsStore.modalSettings} />
        <BoHeader>
          {strings.formatString(strings.global_addobj, strings.global_payee)}
        </BoHeader>
        <F4Form ref={ref => (this.formRef = ref)}>
          <BoTwoColMainForm>
            <BoTwoColForm
              store={RestrictedPayeeStore}
              subTitle={strings.formatString(
                strings.global_objinfo,
                strings.global_payee
              )}
              // isAdd={isAdd}
              // showCopyFrom={isAdd}
              // copyFromProps={
              //   isAdd
              //     ? {
              //         dataList: copyFromInitial,
              //         title: strings.global_deptes,
              //         fields: DepartmentStore.copyFromFields,
              //         fieldInputs: DepartmentStore.nobInputs,
              //         onSearch: this.search,
              //         onClickItem: () =>
              //           setTimeout(this.forceValidateAllFields, 300),
              //         store: DepartmentStore.copyFromStore
              //       }
              //     : null
              // }
            >
              {this.departmentDetails()}
              {/* <BoTwoColBottom store={DepartmentStore} /> */}
            </BoTwoColForm>
          </BoTwoColMainForm>
        </F4Form>
        <div className="twoColRightPanel">
          <RightPanel
            hasAddToBookmarks
            hasManualUpload
            // hasManualUpload={
            //   isAdd &&
            //   (DepartmentStore.hasManualAuth && DepartmentStore.hasUploadAuth)
            // }
            hasSuggestedLinks
            // funcCd={
            //   isAdd
            //     ? CitrineFunctionCodes.DEPARTMENT_ADD
            //     : CitrineFunctionCodes.DEPARTMENT_EDIT
            // }
            style={{ width: "100%", padding: "0" }}
            onClickUpload={() => {
              RestrictedPayeeStore.resetInputs();
              RestrictedPayeeStore.resetErrorList();
              RestrictedPayeeStore.isManual = false;
            }}
          />
        </div>

        <StepWizard
          formRef={this.formRef}
          title={strings.formatString(
            strings.global_objinfo,
            strings.global_payee
          )}
          currentStep={RestrictedPayeeStore.selectedMenuOnAdd + 1}
          totalSteps={3}
          // withQuickSave={isAdd}
          withQuickSave
          // onClickQuickSave={succCB => this.validateAddAndSaveAnother(succCB)}
          onClickQuickSave
          onClickNext={succCB => this.validateAddDepartment(succCB)}
          onClickBack={null}
          store={RestrictedPayeeStore}
          nextButtonRef={ref => (this.buttonRef = ref)}
        />
      </div>
    );
  }
}

AddRestrictedPayeePanel.propTypes = {
  // props definition
};

AddRestrictedPayeePanel.defaultProps = {
  // default props
};

export default AddRestrictedPayeePanel;