import React, { useState, useEffect, useRef } from "react";

import { connect } from "react-redux";

import { Typography } from "@material-ui/core";
import cloneDeep from "lodash/cloneDeep";
import {
ActionButton,
Col,
ModalWrapper,
Row,
Tabs,
Svg,
BackButton,
TabPanel,
Loading
} from "fis-reactive-core";
import ProductEntitlements from "../ProductEntitlements/ProductEntitlements";
import AdminTableWrapper from "../AdminTableWrapper/AdminTableWrapper";
import {
userDataHeader,
userMapp,
productHeaderJITP,
productMapJITP,
labelMapping,
INTERNAL_ROLES
} from "./EditOrganizationConstant";
import AddUser from "../AddUser/AddUser";
import AddIdpUser from "../AddIdpUser/AddIdpUser";
import AddUserWithoutIdp from "../AddUser/AddUserWithoutIdp";
import AdditionalInfoOrgForm from "../AdditionalInfoOrgForm/AdditionalInfoOrgForm";
import useStyles from "./EditOrganizationStyle";
import { useSnackbar, VariantType } from "notistack";
import OrganizationForm, { NewOrg } from "../OrganizationForm/OrganizationForm";
import {
fetchOrgDetails,
updateOrganization,
deleteOrganization,
getProductsMetaData,
getOrgUsers
} from "@Redux/Actions/AdministrationActions";
import {
API_ERROR_MESSAGES as apiErrorMsg,
SUCCESS_MESSAGES as apiSuccessMsg
} from "@DataConstant/AdminstrationConstant/adminstrationConstant";
import { AdminDynamicFormsInput } from
"@DataConstant/AdminstrationConstant/additionalAttributesConstant";
import { doRequiredOrgModification } from "@Services/Utility/AdminUtility";

interface Organization extends NewOrg {

productEnablements?: Array<any>;
users?: Array<any>;
}

export interface IEditOrganization {

closeModal: () => void;
nestModalClassName: string;
orgData: Organization;
productCatalog?: Array<any>;
setShowEdit: Function;
allowedActions: Record<string, any>;
 fetchOrgDetails: (
orgId: string,
isMetaDataExist: boolean | undefined
) => Promise<any>;
updateOrganization: (metaDataVal: any, orgId: string) => Promise<any>;
deleteOrganization: (metaDataVal: any, orgId: string) => Promise<any>;
orgMetaData: Array<AdminDynamicFormsInput>;
loggedInUser?: any;
productMetadata?: any;
productUserMetadata?: any;
getProductsMetaData: () => Promise<any>;
portalRoles?: Array<any>;
getOrgUsers: (orgId: string | number) => Promise<any>;
}

const EditOrganization: React.FC<IEditOrganization> = ({

closeModal,
nestModalClassName,
orgData,
productCatalog,
setShowEdit,
allowedActions,
fetchOrgDetails,
orgMetaData,
updateOrganization,
deleteOrganization,
loggedInUser,
productMetadata,
productUserMetadata,
getProductsMetaData,
portalRoles,
getOrgUsers
}) => {
const classes = useStyles();
const { enqueueSnackbar } = useSnackbar();
const showMessageToast = (variant: VariantType, message: string) => {
enqueueSnackbar(message, { variant });
};
const componentIsMounted = useRef(true);
const [isApiCall, setApiCall] = useState(true);
const [isUsersLoader, setIsUsersLoader] = useState(false);
const [tabState, setTabState] = useState(0);
const [usersList, setUsersList] = useState(undefined);
const [orgDetails, setOrgDetails] = useState(orgData);
const [modalStatus, setModalStatus] = useState<{
open: boolean;
type:
| "edit-product"
| "add-user"
| "add-user-without-idp"
| "additional-infoOrg"
| "add-idp-user"
| null;
dataToPass: any;
isEdit?: boolean;
}>({
open: false,
type: null,
dataToPass: null,
 isEdit: false
});

const updateStatus = (status) => {

switch (status) {
case "DISABLED":
return "Enable";
case "ENABLED":
return "Edit";
default:
return;
}
};

const getProductList = (
productEnablements,
metaDataValues,
productsMetadata
) => {
if (!productEnablements) {
return [];
}
const list = [];
for (let i = 0; i < productCatalog.length; i++) {
const product = productEnablements.find(
(el) =>
el.productID === productCatalog[i].id &&
productCatalog[i].packageStatus !== "COMING_SOON"
);

if (product) {
let contractEndDt = "";
if (allowedActions["view/metadata/Product"]) {
const prodMetadata = productsMetadata.find((el) => {
return el.id === productCatalog[i].id;
});
let endDateMetaData =
prodMetadata.metadata &&
prodMetadata.metadata.filter(
(el) => el.code === "cdg-contract-end-date"
);

let contractEndDtId =
endDateMetaData.length > 0 ? endDateMetaData[0].id : null;

if (contractEndDtId && metaDataValues) {

let dateArray = metaDataValues.filter(
(e) => e.id === contractEndDtId
);
contractEndDt =
dateArray && dateArray.length > 0 ? dateArray[0].value : "";
}
}
let obj = {
id: productCatalog[i].id,
name: productCatalog[i].name,
status: product.enablementStatus,
className:
product.enablementStatus === "ENABLED"
 ? "enabled-row"
: "disabled-row",
statusBtn: allowedActions[
"api/graphql/mutation/updateOrgProductEnablement"
]
? updateStatus(product.enablementStatus)
: "View",
variantId: productCatalog[i].variants[0].id,
lastUpdated: product.modifiedDate,
contractEndDt: contractEndDt
};
list.push(obj);
}
}
return list;
};

const [productsList, setProductList] = useState([]);

const handleChange = (event, newValue) => {

setTabState(newValue);
if (newValue === 1 && !usersList) {
getOrgUsersCall();
}
};

const getEnabledProducts = () => {

let products = productsList.filter(
(productDetail) => productDetail.status === "ENABLED"
);
return cloneDeep(products);
};

const getRoles = () => {

let validPortalRoles = [];
if (portalRoles && orgDetails) {
const orgRole = orgDetails["roles"].filter(role => role["roleID"] &&
role["roleID"]["applicationID"]["id"] == "ethos_portal_orgs");

if (orgRole[0]["roleID"]["id"] === "external_org") {

validPortalRoles = portalRoles.filter(role => !
INTERNAL_ROLES.includes(role.id));
} else {
validPortalRoles = portalRoles;
}
}
return validPortalRoles;
}

const openModal = (type, dataToPass?, isEdit?) => {

setModalStatus({
open: true,
type: type,
dataToPass,
isEdit
});
};

const closeInnerModal = () => {

 setModalStatus({
open: false,
type: null,
dataToPass: null,
isEdit: false
});
};

const onSubmit = () => {

//Submit updated Org
};

const updateOrg = (metaDataValues) => {

console.log("metaDataValues...", metaDataValues);
console.log("orgDetails", orgDetails);
let deleteValues = [];
let updateValues = [];
orgDetails.metadataValues.filter(function (val) {
metaDataValues.some(function (e) {
if (val.id === e.id && val.value !== e.value) {
e.value === "" ? deleteValues.push(e.id) : updateValues.push(e);
}
});
});
setApiCall(true);
// if (orgDetails) {
// updateOrganization(metaDataValues, orgDetails.id)
// .then((result) => {
// orgDetails.formattedModifiedAt =
// result.updateOrganization && result.updateOrganization.modifiedAt;
// setOrgDetails({
// ...orgDetails,
// metadataValues: result.updateMetadataValuesForOrganization
// });
// closeInnerModal();
// showMessageToast("success", apiSuccessMsg.ORG_UPDATED);
// })
// .catch((el) => showMessageToast("error", apiErrorMsg[el]))
// .finally(() => {
// setApiCall(false);
// });
// }

// if (orgDetails) {
// console.log("updateOrganization");
// updateOrganization(updateValues, orgDetails.id)
// .then((result) => {
// console.log("result updateOrganization ", result);
// orgDetails.formattedModifiedAt =
// result.updateOrganization && result.updateOrganization.modifiedAt;
// setOrgDetails({
// ...orgDetails,
// metadataValues: result.updateMetadataValuesForOrganization
// });
// closeInnerModal();
// showMessageToast("success", apiSuccessMsg.ORG_UPDATED);
// })
// .catch((el) => showMessageToast("error", apiErrorMsg[el]))
 // .finally(() => {
// setApiCall(false);
// });
// }

// if (orgDetails) {
// console.log("clling delte api");
// deleteOrganization(deleteValues, orgDetails.id)
// .then((result) => {
// console.log("res after delte", result);
// orgDetails.formattedModifiedAt =
// result.updateOrganization && result.updateOrganization.modifiedAt;
// setOrgDetails({
// ...orgDetails,
// metadataValues: result.updateMetadataValuesForOrganization
// });
// closeInnerModal();
// showMessageToast("success", apiSuccessMsg.ORG_UPDATED);
// })
// .catch((el) => showMessageToast("error", apiErrorMsg[el]))
// .finally(() => {
// setApiCall(false);
// });
// }

if (orgDetails) {
const deleteOrgDetails = deleteValues.length > 0 &&
deleteOrganization(deleteValues, orgDetails.id);
const updateOrgDetails = updateValues.length > 0 &&
updateOrganization(updateValues, orgDetails.id);
let callArray = [deleteOrgDetails, updateOrgDetails];

// if (deleteValues.length > 0) {
// // callArray = [deleteOrgDetails];
// callArray.push(deleteOrgDetails);

// console.log("in if (deleteValues.length > 0) { ",callArray);

// }
// if (updateValues.length > 0) {
// console.log("in if (updateValues.length > 0) { ", callArray);
// callArray = [...callArray, updateOrgDetails];
// }
// let callArray = [updateOrgDetails];

Promise.all(callArray)
.then((result) => {
console.log("result updateOrganization ", result);

// orgDetails.formattedModifiedAt =
// // result[0].updateOrganization &&
result[0].updateOrganization.modifiedAt;
// result[0].updateOrganization &&
result[0].updateOrganization.modifiedAt;

// setOrgDetails({
// ...orgDetails,
// metadataValues: result[0].updateMetadataValuesForOrganization
 // });

// if (result.length == 2) {
// orgDetails.formattedModifiedAt =
// // result[0].updateOrganization &&
result[0].updateOrganization.modifiedAt;
// result[1].updateOrganization &&
result[1].updateOrganization.modifiedAt;

// setOrgDetails({
// ...orgDetails,
// metadataValues: result[1].putMetadataValuesForOrg
// });
// closeInnerModal();
// showMessageToast("success", apiSuccessMsg.ORG_UPDATED);
// }

// else {

// orgDetails.formattedModifiedAt =
// // result[0].updateOrganization &&
result[0].updateOrganization.modifiedAt;
// result[0].updateOrganization &&
result[0].updateOrganization.modifiedAt;

// setOrgDetails({
// ...orgDetails,
// metadataValues: result[0].deleteMetadataValuesForOrg
// });
// closeInnerModal();
// showMessageToast("success", apiSuccessMsg.ORG_UPDATED);

orgDetails.formattedModifiedAt = result[1] ?
(result[1].updateOrganization && result[1].updateOrganization.modifiedAt) :
result[0].updateOrganization && result[0].updateOrganization.modifiedAt;
// result[0].updateOrganization &&
result[0].updateOrganization.modifiedAt;

// (result[1].updateOrganization &&
result[1].updateOrganization.modifiedAt) || (result[0].updateOrganization &&
result[0].updateOrganization.modifiedAt);

// let arr = deleteValues && updateValues ?

result[1].putMetadataValuesForOrg.filter(item => deleteValues.indexOf(item.id) !==
-1);

if (deleteValues.length >0 && updateValues.length > 0) {

console.log("in if 399");
result[1].putMetadataValuesForOrg.filter(item => {
if (deleteValues.indexOf(item.id) !== -1) {
item.value="";
}
});
}
setOrgDetails({
...orgDetails,
metadataValues: result[1] ? result[1].putMetadataValuesForOrg :
result[0].putMetadataValuesForOrg || result[0].deleteMetadataValuesForOrg
});
 closeInnerModal();
showMessageToast("success", apiSuccessMsg.ORG_UPDATED);
// }
})
.catch((el) => showMessageToast("error", apiErrorMsg[el]))
.finally(() => {
setApiCall(false);
});
}

};
const getOrgUsersCall = () => {
setIsUsersLoader(true);

getOrgUsers(orgDetails.id)
.then((result) => {
if (componentIsMounted.current) {
setUsersList([...result]);
}
})
.catch((el) => showMessageToast("error", apiErrorMsg[el]))
.finally(() => {
if (componentIsMounted.current) {
setIsUsersLoader(false);
}
});
};
useEffect(() => {
setApiCall(true);
const isMetaDataExist = orgMetaData && !!orgMetaData.length;
if (orgDetails) {
const fetchOrgs = fetchOrgDetails(orgDetails.id, isMetaDataExist);
const productsMetadataCall =
!productCatalog[0].metadata && getProductsMetaData();
let callArray = [fetchOrgs];
if (!productCatalog[0].metadata) {
callArray = [...callArray, productsMetadataCall];
}
Promise.all(callArray)
.then((result) => {
if (componentIsMounted.current) {
const { organization } = result[0];
if (organization) {
setOrgDetails({
...orgDetails,
...doRequiredOrgModification(organization)
});
const productsMetadata = result[1] ? result[1] : productCatalog;
setProductList(
getProductList(
organization.productEnablements,
organization.metadataValues,
productsMetadata
)
);
}
}
})
.catch((err) => {
 console.error(err);
})
.finally(() => {
if (componentIsMounted.current) {
setApiCall(false);
}
});
}
return () => {
componentIsMounted.current = false;
};
//eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const updateUserInfo = (user) => {

const index = usersList.findIndex((el) => el.id === user.id);
if (index) {
usersList[index] = { ...user };
setUsersList([...usersList]);
}
};
const tabsList = ["Product Administration", "User Administration"];

const renderModalContent = () => {

switch (modalStatus.type) {
case "additional-infoOrg":
return (
<AdditionalInfoOrgForm
orgData={orgDetails}
closeModal={closeInnerModal}
isEdit={true}
addEditOrg={(orgDetails, metaDataValues) => {
// closeInnerModal();
updateOrg(metaDataValues);
}}
metadataValues={orgDetails.metadataValues}
/>
);
case "edit-product":
return (
<ProductEntitlements
closeModal={closeInnerModal}
orgData={orgDetails}
productData={cloneDeep(modalStatus.dataToPass)}
showMessageToast={showMessageToast}
productsList={cloneDeep(productsList)}
setProductList={setProductList}
usersData={usersList}
updateUsersData={setUsersList}
updateOrgDetails={setOrgDetails}
updateStatus={updateStatus}
productMetadata={productMetadata[modalStatus.dataToPass["id"]]}
productUserMetadata={
productUserMetadata[modalStatus.dataToPass["id"]]
}
/>
);
case "add-user":
return (
 <AddUser
closeInnerModal={closeInnerModal}
orgData={orgDetails}
products={getEnabledProducts()}
isEdit={modalStatus.isEdit}
userInfo={modalStatus.dataToPass}
showMessageToast={showMessageToast}
updateUserInfo={updateUserInfo}
ethosPortalRoles={getRoles()}
updateUsersList={(newUser) => setUsersList([...usersList, newUser])}
userList={usersList}
openAddIdpUserModal={() => openModal("add-idp-user")}
/>
);
case "add-user-without-idp":
return (
<AddUserWithoutIdp
closeInnerModal={closeInnerModal}
orgData={orgDetails}
userDetails={cloneDeep(usersList)}
setUserDetails={setUsersList}
products={getEnabledProducts()}
isEdit={modalStatus.isEdit}
userInfo={modalStatus.dataToPass}
showMessageToast={showMessageToast}
/>
);
case "add-idp-user":
return (
<AddIdpUser
orgData={orgDetails}
closeInnerModal={closeInnerModal}
openAddUserModal={(userDetails) =>
openModal("add-user", userDetails)
}
showMessageToast={showMessageToast}
/>
);
default:
return null;
}
};

const mapValueForMetadata = (id) => {

const i = orgDetails["metadataValues"].find((el) => el.id === id);
return i ? i.value : "--";
};
const modifyReadableData = () => {
const displayOrder = [
"emsID",
"cloudID",
"firmName",
"formattedCreatedAt",
"formattedModifiedAt"
];
const orgDataToShow = {};
for (let i = 0; i < displayOrder.length; i++) {
orgDataToShow[displayOrder[i]] = {
label: labelMapping[displayOrder[i]],
 value: orgDetails[displayOrder[i]] || "--"
};
}
if (orgMetaData && orgDetails["metadataValues"]) {
orgMetaData.forEach(
(el) =>
(orgDataToShow[el.id] = {
label: el.name,
value: mapValueForMetadata(el.id)
})
);
}
return orgDataToShow;
};

return (
<>
<Row className={classes["heading-data"]}>
<Col md={12} sm={12} justify={"flex-start"} className="admin-header">
{allowedActions["api/graphql/query/allOrganizations"] ? (
<div className="back-button">
<ActionButton
type="button"
variant="text"
onClick={() => {
closeModal();
setShowEdit(false);
}}
aria-label="Back to all orgs"
>
<Svg svgtype="custom-svg-icon" name={BackButton} />
</ActionButton>
</div>
) : (
<div style={{ width: "35px" }}></div>
)}
<Typography variant="h2" className="page-name">
{orgDetails.name}
</Typography>

{allowedActions[
"api/graphql/mutation/updateMetadataValuesForOrganization"
] &&
!isApiCall && (
<ActionButton
type="button"
size="small"
onClick={() => openModal("additional-infoOrg")}
className="edit-org-btn"
>
Edit
</ActionButton>
)}
</Col>
</Row>
<div className={classes["edit-org"]}>
{isApiCall ? (
<Loading position="absolute" background={false} />
) : (
<>
<Row className="org-data">
<Col md={12} sm={12} className="org-details">
<OrganizationForm
afterSubmit={onSubmit}
isEdit={true}
orgData={modifyReadableData()}
formId="editOrgForm"
/>
</Col>
</Row>
<Row className="tab-data">
<Col md={12} sm={12}>
<Tabs
id="edit-org-tabs"
value={tabState}
onChange={handleChange}
aria-label="admin-tabs"
tabsList={tabsList}
/>
</Col>
</Row>
{tabState === 0 && (
<TabPanel
tabsType="edit-org-tabs"
value={tabState}
index={0}
maxWidth={false}
>
<Row className="scrollable-data-section products-tab">
<Col lg={12} md={12} sm={12} className={`scrollable-data`}>
<AdminTableWrapper
isSorting={true}
defaultSortField={"name"}
headers={
allowedActions["view/metadata/Product"]
? productHeaderJITP["viewMetaData"]
: productHeaderJITP["hideMetaData"]
}
data={productsList}
showLoading={false}
mapDataConfig={
allowedActions["view/metadata/Product"]
? productMapJITP["viewMetaData"]
: productMapJITP["hideMetaData"]
}
liveSorting={true}
actions={{
link: (productData) =>
openModal("edit-product", productData),
button: (productData) =>
openModal("edit-product", productData)
}}
/>
</Col>
</Row>
</TabPanel>
)}
{tabState === 1 && (
 <TabPanel
tabsType="edit-org-tabs"
value={tabState}
index={1}
maxWidth={false}
>
{(allowedActions["api/graphql/mutation/createUser"] ||
allowedActions[
`api/graphql/mutation/organization/$
{loggedInUser.organization.id}/createUser`
]) && (
<Row className="add-user-section">
<Col md={12} sm={12} justify={"flex-start"}>
<ActionButton
type="button"
variant="contained"
color="primary"
title={"Add User"}
className={"add-user-button"}
onClick={() => openModal("add-user", null)}
>
<i className="fa fa-plus" id="add-user-icon"></i>
<Typography variant="caption" id="add-user-text">
{"Add a User"}
</Typography>
</ActionButton>
</Col>
</Row>
)}
<Row className="scrollable-data-section">
<Col md={12} sm={12} className="scrollable-data">
<AdminTableWrapper
isSorting={true}
defaultSortField={"email"}
headers={userDataHeader}
data={usersList}
mapDataConfig={userMapp}
showLoading={isUsersLoader}
actions={{
link: (userDetails) =>
openModal("add-user", userDetails, true)
}}
/>
</Col>
</Row>
</TabPanel>
)}
</>
)}
</div>
{modalStatus.open && (
<ModalWrapper
openDialog={modalStatus.open}
maxWidth="lg"
onUtilityEvent={() => closeInnerModal}
className={nestModalClassName}
>
{renderModalContent()}
</ModalWrapper>
 )}
</>
);
};

const mapStateToProps = ({ global, administration }) => {

return {
productCatalog: global.productCatalog,
allowedActions: global.allowedActions,
orgMetaData: administration.orgMetaData,
loggedInUser: global.user,
productMetadata: administration.productMetadata,
productUserMetadata: administration.productUserMetadata,
portalRoles: administration.portalRoles
};
};

const mapDispatchToProps = {
fetchOrgDetails,
updateOrganization,
deleteOrganization,
getProductsMetaData,
getOrgUsers
};

export default connect(mapStateToProps, mapDispatchToProps)(EditOrganization);