/**
 * SearchPayeePanel.js
 */

import React, { Component } from "react";
import { observer } from "mobx-react";
import { BaseContext } from "frontend-react-f4-base-commons";
import { BaseComponents } from "frontend-react-f4-base-ui";
import { Modal } from "antd";
import RightPanel from "../RightPanel/RightPanel";
import CitrineFunctionCodes from "../../enums/CitrineFunctionCodes";
import _ from "underscore";
import { browserHistory } from "react-router";
import BoNoRecords from "../../components/BoNoRecords/BoNoRecords";
import TemplateTable from "../TemplateTable/TemplateTable";
import FeedbackModalMessage from "../FeedbackModalMessage/FeedbackModalMessage";

const { connect } = BaseContext;

const {
  strings,
  // F4DataTable,
  FeedbackModal1,
  Feedback,
  F4Confirmation,
  ActionButton
} = BaseComponents;

@observer
@connect
class SearchPayeePanel extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showErrorModal: false,
      errorModalMsg: "",
      hasAuth: false
    };
  }

  checkAuth = () => {
    const { SessionStore, auth } = this.context.store;
    SessionStore.checkFuncAuthorization(
      auth.sessionUser.user.grp.id,
      CitrineFunctionCodes.RESTRICTED_PAYEE_NM_DEL
    ).then(hasAuth => {
      if (hasAuth) {
        this.setState({
          hasAuth: hasAuth
        });
      }
    });
  };

  onClickCd = data => {
    const { RestrictedPayeeStore } = this.context.store;
    let fields = RestrictedPayeeStore.payeeFields;

    RestrictedPayeeStore.restrictedPayeeInputs = data;
    console.log("id input: ", RestrictedPayeeStore.restrictedPayeeInputs);
    RestrictedPayeeStore.restrictedPayeeList = null;
    RestrictedPayeeStore.resetSearchFields();
    RestrictedPayeeStore.resetErrorList();
    RestrictedPayeeStore.selectedMenuOnSearch = 1;
    // browserHistory.push("/bo-bsc/departmentSearch");
  };

  _createData = () => {
    return [
      {
        headerTitle: strings.global_restrictedpayeenm,
        name: "payeeName",
        type: "text",
        width: 100,
        cell: props => (
          <span
            className="linkInTable"
            onClick={() => this.onClickCd(props.data)}
          >
            {props.data.payeeName}
          </span>
        )
      },

      {
        headerTitle: strings.global_amount,
        name: "amount",
        type: "text",
        width: 100,
        align: "right"
      },
      {
        headerTitle: strings.global_action,
        name: "isAllowedStr",
        type: "text",
        width: 100,
        sortBy: "isAllowed"
      },
      {
        headerTitle: strings.global_character_ignore,
        name: "charToIgnore",
        type: "text",
        width: 100
      },

      {
        headerTitle: null,
        name: "actions",
        type: "text",
        width: 80,
        isSortable: false,
        hideInColumnDisplay: true,
        hideInGrouping: true,
        isInReport: false,
        cell: props => (
          <div className="tableButtons">
            <ActionButton
              showEdit={props.data.showEdit}
              showDelete={props.data.showDelete}
              onEdit={() => this.onEdit(props.data)}
              onDelete={() => this.confirmDelete(false, props.data)}
            />
          </div>
        )
      }
    ];
  };

  showIcon = iconDirectory => {
    let icon = iconDirectory;
    return (
      <div className="scIcon">
        {" "}
        <img src={icon} />{" "}
      </div>
    );
  };

  onClickDownload = multiSort => {
    const { RestrictedPayeeStore } = this.context.store;
    return new Promise(resolve => {
      RestrictedPayeeStore.findBySearchModel(
        RestrictedPayeeStore.searchFilter,
        multiSort,
        res => {
          console.log("report", res);
          if (res.body && !res.body.error) {
            resolve(res.body.content);
          }
        }
      );
    });
  };

  showDataTable = () => {
    const { RestrictedPayeeStore, DownloadReportStore } = this.context.store;
    if (
      RestrictedPayeeStore.restrictedPayeeList &&
      RestrictedPayeeStore.restrictedPayeeList.length > 0
    ) {
      return (
        <div style={{ padding: "5px 60px 10px" }}>
          <TemplateTable
            tableKey={CitrineFunctionCodes.RESTRICTED_PAYEE_NM_SEARCH}
            onClickDownload={this.onClickDownload}
            downloadProps={{
              isDynamic: true,
              params: {
                reportHeader2: strings.formatString(
                  strings.global_reportobj,
                  strings.global_restrictedpayeenm
                )
              },
              fileName: "Restricted_Payee_Report"
            }}
            dataTableRef={table => (RestrictedPayeeStore.dataTableRef = table)}
            options={this._createData()}
            data={
              RestrictedPayeeStore.restrictedPayeeList
                ? RestrictedPayeeStore.restrictedPayeeList
                : null
            }
            hasSelectAll={this.state.hasAuth}
            defaultSort={{ updatedDt: "DESC" }}
            serverSideTotalCount={
              RestrictedPayeeStore.responseBody.totalElements
            }
            onSearch={this.onSearch}
            showDeleteButton={this.state.hasAuth}
            hasExpandable={false}
            onDelete={() => {
              const { RestrictedPayeeStore } = this.context.store;
              let data = RestrictedPayeeStore.dataTableRef.getSelectedRows();
              this.confirmDelete(true, data);
            }}
          />
        </div>
      );
    } else if (
      RestrictedPayeeStore.restrictedPayeeList &&
      RestrictedPayeeStore.restrictedPayeeList.length === 0
    ) {
      return <BoNoRecords />;
    } else {
      let searchIcon = "images/ego-icons/search.svg";
      return (
        <div className="scNoRecordsPanel">
          <div className="scSearch">
            {" "}
            {this.showIcon(searchIcon)}
            <br />{" "}
          </div>
          <div className="scNoRecordsText">
            <span>{strings.message_searchusingrightpanel}</span>
          </div>
        </div>
      );
    }
  };

  showSearchIcon = () => {
    console.log("Entered at showSearchIcon");
    let searchIcon = "images/ego-icons/search.svg";
    return (
      <div className="scNoRecordsPanel">
        <div className="scSearch">
          {this.showIcon(searchIcon)}
          <br />
        </div>
        <div className="scNoRecordsText">
          <span>{strings.message_searchusingrightpanel}</span>
        </div>
      </div>
    );
  };

  onSearch = multiSort => {
    const { auth, RestrictedPayeeStore } = this.context.store;

    RestrictedPayeeStore.resetErrorList();

    if (!multiSort) {
      multiSort = {
        page: 0,
        count: 10,
        sortList: [
          {
            direction: "desc",
            sort: "updatedDt"
          }
        ]
      };
    }

    let fields = RestrictedPayeeStore.searchRestrictedPayeeFields;

    {
      fields != undefined &&
        fields.map(
          field =>
            (RestrictedPayeeStore.searchFilter[field.index] = field.value)
        );
    }

    RestrictedPayeeStore.searchFilter.grpId = auth.sessionUser.user.grp.id;
    RestrictedPayeeStore.searchFilter.filterList = [
      RestrictedPayeeStore.searchFilter.payeeName,
      RestrictedPayeeStore.searchFilter.amount,
      RestrictedPayeeStore.searchFilter.isAllowed,
      RestrictedPayeeStore.searchFilter.charToIgnore
    ];

    RestrictedPayeeStore.findBySearchModelForMaintenance(
      RestrictedPayeeStore.searchFilter,
      multiSort,
      res => {
        console.log("res on Search: ", res);
        if (res.body && !res.body.error) {
          RestrictedPayeeStore.copyFromStore = res.body;
          RestrictedPayeeStore.responseBody = res.body;
          RestrictedPayeeStore.restrictedPayeeList = res.body.content;
          let data = RestrictedPayeeStore.restrictedPayeeList;
          RestrictedPayeeStore.dataTableRef.setState({
            data: data,
            copyOfData: data,
            totalItemsCount: res.body.totalElements
          });
          RestrictedPayeeStore.dataTableRef.forceUpdate();
        } else {
          console.log("Error:", res.body.error);
          _.each(res.body.error.errors, errStr => {
            RestrictedPayeeStore.errors.push(errStr.message);
          });
        }
      }
    );
  };

  onEdit = data => {
    const { RestrictedPayeeStore } = this.context.store;

    RestrictedPayeeStore.resetSearchFields();
    RestrictedPayeeStore.restrictedPayeeInputs = data;
    console.log("id input:  ", RestrictedPayeeStore.restrictedPayeeInputs);
    //console.log("props datas: ", props.data);
    RestrictedPayeeStore.restrictedPayeeList = null;
    browserHistory.push("/bo-bsc/restrictedPayeeEdit");
  };

  confirmDelete = (isMultiple, data) => {
    const {
      RestrictedPayeeStore,
      auth,
      SettingsStore,
      MaintenanceStore
    } = this.context.store;

    MaintenanceStore.requestModel.localUserCd = auth.sessionUser.user.cd;
    MaintenanceStore.requestModel.requiresApprovalFuncCd =
      CitrineFunctionCodes.RESTRICTED_PAYEE_NM_REQUIRES_APPROVAL;
    MaintenanceStore.requestModel.editFuncCd =
      CitrineFunctionCodes.RESTRICTED_PAYEE_NM_EDIT;
    MaintenanceStore.requestModel.deleteFuncCd =
      CitrineFunctionCodes.RESTRICTED_PAYEE_NM_DEL;
    MaintenanceStore.requestModel.actnFuncCd =
      CitrineFunctionCodes.RESTRICTED_PAYEE_NM_DEL;
    MaintenanceStore.requestModel.approveRejectFuncCd =
      CitrineFunctionCodes.RESTRICTED_PAYEE_NM_APPROVE_REJECT;
    MaintenanceStore.requestModel.modelNm = strings.global_payee;
    MaintenanceStore.requestModel.grpId = auth.sessionUser.user.grp.id;
    MaintenanceStore.requestModel.dtlString = JSON.stringify({
      id: data.id,
      payeeName: data.payeeName,
      amount: data.amount,
      isAllowed: data.isAllowed,
      charToIgnore: data.charToIgnore
    });

    if (!isMultiple) {
      SettingsStore.confirm(
        strings.message_del,
        () => {
          MaintenanceStore.requestModel.filterValues = [
            data.payeeName,
            data.amount,
            data.isAllowed,
            data.charToIgnore
          ];
          MaintenanceStore.requestModel.uniqueCds = [data.payeeName];

          MaintenanceStore.saveOrUpdate(
            MaintenanceStore.requestModel,
            response => {
              RestrictedPayeeStore.resetErrorList();
              if (response.body && response.body.error) {
                console.log("Error on Del: ", response);
                MaintenanceStore.errors = [];
                response.body.error.errors.map(error => {
                  MaintenanceStore.errors.push(error.message);
                });
                this.setState({
                  showErrorModal: true,
                  errorModalMsg: MaintenanceStore.errors
                });
                SettingsStore.isScreenLoading = false;
              } else if (!response.body && response.text) {
                console.log("Res on Del: ", response);
                RestrictedPayeeStore.ackMessage = {
                  header: strings.formatString(
                    strings.feedback_success_forapproval,
                    strings.formatString(
                      strings.global_deleteobj,
                      strings.global_restrictedpayeenm
                    )
                  ),
                  refNo: response.text
                };

                SettingsStore.modalSettings.message = (
                  <FeedbackModalMessage
                    header={RestrictedPayeeStore.ackMessage.header}
                    refNo={RestrictedPayeeStore.ackMessage.refNo}
                  />
                );
                SettingsStore.modalSettings.showModal = true;

                SettingsStore.isScreenLoading = false;
                RestrictedPayeeStore.isForApproval = true;
                RestrictedPayeeStore.resetSearchFields();
                RestrictedPayeeStore.restrictedPayeeList = null;
                RestrictedPayeeStore.reset();
                RestrictedPayeeStore.dataTableRef.forceUpdate();
              } else if (!response.text) {
                let request = data;
                request.localUserCd = auth.sessionUser.user.cd;
                if (request && request.localUserCd) {
                  this.onDelete(request);
                }
              }
            }
          );
        },
        () => {
          SettingsStore.isScreenLoading = false;
        }
      );
    } else {
      if (data.length > 0) {
        let maintenanceList = [];
        {
          data.map(item => {
            maintenanceList.push({
              localUserCd: auth.sessionUser.user.cd,
              requiresApprovalFuncCd:
                CitrineFunctionCodes.RESTRICTED_PAYEE_NM_REQUIRES_APPROVAL,
              editFuncCd: CitrineFunctionCodes.RESTRICTED_PAYEE_NM_EDIT,
              deleteFuncCd: CitrineFunctionCodes.RESTRICTED_PAYEE_NM_DEL,
              approveRejectFuncCd:
                CitrineFunctionCodes.RESTRICTED_PAYEE_NM_APPROVE_REJECT,
              actnFuncCd: CitrineFunctionCodes.RESTRICTED_PAYEE_NM_DEL,
              modelNm: strings.global_payee,
              grpId: auth.sessionUser.user.grp.id,
              isAdd: false,
              dtlString: JSON.stringify({
                id: item.id,
                payeeName: item.payeeName,
                amount: item.amount,
                isAllowed: item.isAllowed,
                charToIgnore: item.charToIgnore
              }),
              filterValues: [
                item.payeeName,
                item.amount,
                item.isAllowed,
                item.charToIgnore
              ],
              uniqueCds: [item.payeeName]
            });
          });
        }

        SettingsStore.confirm(
          strings.global_confirm_delete_records,
          () => {
            SettingsStore.isScreenLoading = true;
            MaintenanceStore.saveOrUpdateMultiple(
              {
                requiresApprovalFuncCd:
                  CitrineFunctionCodes.RESTRICTED_PAYEE_NM_REQUIRES_APPROVAL,
                grpId: auth.sessionUser.user.grp.id,
                list: maintenanceList,
                localUserCd: auth.sessionUser.user.cd
              },
              response => {
                MaintenanceStore.errors = [];
                if (response.body && response.body.error.errors) {
                  console.log("Error on Del: ", response);
                  MaintenanceStore.errors = [];
                  response.body.error.errors.map(error => {
                    MaintenanceStore.errors.push(error.message);
                  });
                  this.setState({
                    showErrorModal: true,
                    errorModalMsg: MaintenanceStore.errors
                  });
                  SettingsStore.isScreenLoading = false;
                  RestrictedPayeeStore.restrictedPayeeList = null;
                  RestrictedPayeeStore.reset();
                } else if (!response.body && response.text) {
                  console.log("Res on saveOrUpdate DelMultiple: ", response);

                  SettingsStore.modalSettings.message = (
                    <FeedbackModalMessage
                      header={strings.formatString(
                        strings.feedback_success_forapproval_plural,
                        strings.formatString(
                          strings.global_deleteobj,
                          strings.global_restrictedpayeenms
                        )
                      )}
                      refNo={response.text}
                    />
                  );
                  SettingsStore.modalSettings.showModal = true;

                  RestrictedPayeeStore.isForApproval = true;
                  RestrictedPayeeStore.resetSearchFields();
                  RestrictedPayeeStore.restrictedPayeeList = null;
                  RestrictedPayeeStore.reset();
                  SettingsStore.isScreenLoading = false;
                } else if (!response.body && !response.text) {
                  this.onDeleteMultiple(data);
                }
              }
            );
          },
          () => {
            SettingsStore.isScreenLoading = false;
          }
        );
      }
    }
  };

  setErrors = (resBody, showOnModal) => {
    const { RestrictedPayeeStore, SettingsStore } = this.context.store;
    if (resBody && resBody.error) {
      RestrictedPayeeStore.resetErrorList();
      if (resBody.error.errors && resBody.error.errors.length > 0) {
        resBody.error.errors.map(err => {
          RestrictedPayeeStore.errors.push(err.message);
        });
      } else {
        RestrictedPayeeStore.errors.push(resBody.error.message);
      }
      if (
        showOnModal &&
        RestrictedPayeeStore.errors &&
        RestrictedPayeeStore.errors.length > 0
      ) {
        SettingsStore.modalSettings = {
          status: "error",
          message: RestrictedPayeeStore.errors,
          showModal: true
        };
      }
    }
  };

  onDelete = payeee => {
    const { RestrictedPayeeStore, SettingsStore } = this.context.store;

    console.log("ID TO BE DELETED: ", payeee);
    RestrictedPayeeStore.deleteRestrictedPayee(payeee, res => {
      console.log("DELETE res:", res);
      if (res.body && !res.body.error) {
        RestrictedPayeeStore.payeeSaved = res.body;
        SettingsStore.isScreenLoading = false;
        SettingsStore.modalSettings = {
          status: "success",
          message: (
            <FeedbackModalMessage
              header={strings.formatString(
                strings.global_successfullydeletednorefno,
                strings.global_restrictedpayeenm
              )}
              refNo={
                RestrictedPayeeStore.payeeSaved &&
                RestrictedPayeeStore.payeeSaved.localRefNo
              }
            />
          ),
          showModal: true
        };

        RestrictedPayeeStore.resetInputs();
        RestrictedPayeeStore.resetSearchFields();
        RestrictedPayeeStore.restrictedPayeeList = null;
        RestrictedPayeeStore.dataTableRef.reset();
      } else {
        this.setErrors(res.body, true);
        console.log("pending for approval");
        SettingsStore.modalSettings = {
          status: "error",
          message: "Selected transaction is still pending for approval",
          showModal: true
        };
        SettingsStore.isScreenLoading = false;
      }
    });
  };

  onDeleteMultiple = data => {
    const { RestrictedPayeeStore, SettingsStore, auth } = this.context.store;
    let userCd = auth.sessionUser.user.cd;

    if (data.length > 0) {
      console.log("asdasdasd", data);
      RestrictedPayeeStore.deleteMultiplerestrictedPayee(
        userCd,
        data,
        response => {
          console.log("Delete Multiple Res: ", response);
          if (!response.body && response.text) {
            RestrictedPayeeStore.refNoDeleteMultiple = response.text;
            console.log("Response Body on Delete Multiple: ", response.body);

            SettingsStore.isScreenLoading = false;
            SettingsStore.modalSettings = {
              status: "success",
              message: (
                <FeedbackModalMessage
                  header={strings.formatString(
                    strings.global_successfullydeletedmultinorefno,
                    strings.global_restrictedpayeenms
                  )}
                  refNo={response.text}
                />
              ),
              showModal: true
            };

            RestrictedPayeeStore.resetInputs();
            RestrictedPayeeStore.resetSearchFields();
            RestrictedPayeeStore.restrictedPayeeList = null;
            RestrictedPayeeStore.dataTableRef.reset();
          } else {
            SettingsStore.isScreenLoading = false;
            this.setErrors(res.body, true);
            RestrictedPayeeStore.resetInputs();
            RestrictedPayeeStore.resetSearchFields();
            RestrictedPayeeStore.restrictedPayeeList = null;
            RestrictedPayeeStore.dataTableRef.reset();
          }
        }
      );
    } else {
      this.setState({
        errorModalMsg: "Selected transaction is still pending for approval",
        showModal: true
      });
      // SettingsStore.modalSettings = {
      //   status: "error",
      //   message: "Selected transaction is still pending for approval",
      //   showModal: true
      // };
      SettingsStore.isScreenLoading = false;
    }
  };

  componentDidMount() {
    const { SettingsStore, RestrictedPayeeStore } = this.context.store;
    SettingsStore.confirmationRef = this.confirmation;
    this.checkAuth();
    RestrictedPayeeStore.resetErrorList();
  }

  handleCancel = () => {
    this.setState({
      showErrorModal: false,
      errorModalMsg: ""
    });
  };

  render() {
    const { RestrictedPayeeStore, SettingsStore } = this.context.store;
    return (
      <div>
        <div className="forSearch">
          <div className="col-sm-9 scPanel">
            <div className="enrollmentProcessingPanelHeader">
              <span>
                {strings.formatString(
                  strings.global_searchobj,
                  strings.global_restrictedpayeenm
                )}
              </span>
            </div>

            <F4Confirmation ref={r => (this.confirmation = r)} isBo isYesNo />
            <FeedbackModal1
              title="Success"
              modalSettings={SettingsStore.modalSettings}
            />
            {this.showDataTable()}
          </div>
          <RightPanel
            initialFields={RestrictedPayeeStore.searchRestrictedPayeeFields}
            onClickSearch={e => {
              this.onSearch(null);
              RestrictedPayeeStore.dataTableRef &&
                RestrictedPayeeStore.dataTableRef.reset();
            }}
            funcCd={CitrineFunctionCodes.RESTRICTED_PAYEE_NM_SEARCH}
            hasSuggestedLinks
            hasSearchFilters
            hasAddToBookmarks
          />
        </div>
      </div>
    );
  }
}

SearchPayeePanel.propTypes = {
  // props definition
};

SearchPayeePanel.defaultProps = {
  // default props
};

export default SearchPayeePanel;