import { Form } from "../../utilities/form/Form.mjs";
import { Field } from "../../utilities/form/Field.mjs";
import { ConfigService } from "../../configService/index.mjs";
import { apiMutate } from "../../utilities/useAxiosMutate.mjs";
import { Typography as Typography$1 } from "../dataDisplay/typography/Typography.mjs";
import { AmbientCard } from "../surfaces/cards/AmbientCard/AmbientCard.mjs";
import { LinearProgress as LinearProgress$1 } from "../loading/LinearProgress.mjs";
import { FluentTextField } from "../inputs/textField/FluentTextField.mjs";
import { FormControl as FormControl$1 } from "../utilityDisplay/FormControl.mjs";
import { IndicatorChip } from "../utilityDisplay/IndicatorChip.mjs";
import { FluentCardText } from "../surfaces/cards/fluentCards/FluentCardText.mjs";
import { Box as Box$1 } from "../Box.mjs";
import { Grid as Grid$1 } from "../Grid.mjs";
import { ListElement } from "../mapLayout/ui/ListCard.mjs";
import { FluentCheckbox } from "../inputs/checkbox/FluentCheckbox.mjs";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Divider, FormControlLabel, makeStyles } from "@material-ui/core";
import { DateTime } from "luxon";
import { useTranslation } from "react-i18next";
//#region src/UI/forms/PaymentReversalForm.jsx
const useStyles = makeStyles((theme) => ({
	formControlHalf: { width: "40%" },
	formControl: { width: "100%" },
	formControlMargin: {
		width: "100%",
		marginTop: "5px"
	},
	formControlCheck: {
		width: "100%",
		marginTop: "5px",
		marginLeft: "3px"
	},
	submitControl: { marginTop: "35px" },
	assetTypeLabel: { top: theme.spacing(-.7) },
	labelText: {
		color: "rgba(0, 0, 0)",
		fontSize: "0.875rem"
	},
	main: {
		flexGrow: 1,
		padding: "0 24px",
		display: "flex",
		justifyContent: "space-between",
		alignItems: "center"
	},
	appIcon: {
		width: 24,
		height: 24,
		color: theme.palette.text.primary
	},
	arrowIcon: {
		width: 12,
		height: 12
	},
	linkTitle: { marginRight: theme.spacing(1) },
	formControlGeneral: {
		width: "100%",
		marginLeft: "5px",
		marginTop: "5px"
	},
	cardNumber: { width: "60%" },
	accordion: {
		width: "100%",
		margin: "0px",
		padding: "0px",
		boxShadow: "none",
		backgroundColor: "inherit",
		"&:before": { display: "none" },
		"&$expanded": { margin: "0px" }
	},
	accordionSummary: {
		padding: "0px",
		paddingLeft: "5px",
		margin: "0px",
		minHeight: "0px",
		backgroundColor: "inherit",
		flexDirection: "row-reverse",
		"&$expanded": {
			margin: "0px",
			padding: "0px",
			minHeight: "0px"
		}
	},
	expanded: {
		margin: "0px",
		paddingLeft: "5px"
	},
	content: {
		margin: 0,
		backgroundColor: "inherit",
		"&$expanded": { margin: 0 }
	},
	accordionDetails: {
		padding: "0px",
		display: "block",
		margin: "0px"
	},
	cardContent: { backgroundColor: "#FAFAFA" },
	listItem: {
		paddingTop: "3px",
		paddingBottom: "3px",
		fontSize: "0.875rem"
	},
	listItemDetail: {
		display: "flex",
		justifyContent: "flex-end"
	},
	listItemAccordion: {
		paddingTop: "3px",
		paddingBottom: "3px",
		paddingLeft: "0px"
	},
	divider: { margin: "0px 12px" },
	dividerBold: {
		margin: "0px 12px",
		backgroundColor: "black"
	},
	itemCheckbox: { padding: "0px" },
	itemDescription: { color: "grey" },
	list: { backgroundColor: "#FFF" },
	dropdown: {
		marginTop: theme.spacing(-1),
		backgroundColor: "#FFF"
	},
	locationDropDown: {
		margin: theme.spacing(0),
		marginTop: theme.spacing(-.5),
		fontSize: "0.75rem"
	},
	box: {
		display: "flex",
		justifyContent: "space-around",
		flexDirection: "row",
		paddingBottom: "15px",
		gap: "10px",
		[theme.breakpoints.down("sm")]: {
			flexDirection: "column",
			flexWrap: "wrap",
			alignItems: "flex-start"
		}
	}
}));
const PAYMENT_APPROVED = 1;
const PAYMENT_DENIED = 43;
const RESULT_SUCCESS = 200;
const RESULT_FAILURE = 401;
const PaymentReversalForm = ({ id, paymentData, onSubmitCompleted }) => {
	const classes = useStyles();
	const { t } = useTranslation();
	const [loading, setLoading] = useState(true);
	const [paymentTransaction, setPaymentTransaction] = useState(void 0);
	/**
	* API call to get the payment transaction details
	*/
	const getPaymentTransaction = useCallback(async (payload) => {
		if (!payload) return null;
		return apiMutate(ConfigService.pgV1ApiUrl, `PaymentTransaction/search`, {
			method: "POST",
			data: payload
		}, {});
	}, []);
	/**
	* API call to get the account information by account number
	*/
	const reverseTransactionExecute = useCallback(async (transactionID) => {
		if (!transactionID) return null;
		return apiMutate(ConfigService.pgV1ApiUrl, `PaymentTransaction/${transactionID}`, { method: "DELETE" }, {});
	}, []);
	/**
	* submitAccountDetailsForm
	* @param {*} formData
	* @return {*}
	*/
	const handleSubmitPaymentReversal = (values) => {
		if (!paymentData?.transactionId) return;
		reverseTransactionExecute(paymentData?.transactionId).then(() => {
			onSubmitCompleted?.({
				transactionId: paymentData?.transactionId,
				error: false
			});
		}).catch((error) => {
			onSubmitCompleted?.({
				transactionId: paymentData?.transactionId,
				error
			});
		});
	};
	useEffect(() => {
		const fetchData = async () => {
			try {
				setLoading(true);
				const response = await getPaymentTransaction({
					eagerLoad: true,
					pageNumber: 1,
					pageSize: 20,
					filterElements: [{
						searchField: "transactionId",
						searchValue: paymentData?.transactionId,
						searchOperator: "="
					}],
					orderElements: []
				});
				if (response?.data) setPaymentTransaction(response?.data?.pageList?.[0]);
			} catch (err) {
				console.error(err);
			} finally {
				setLoading(false);
			}
		};
		if (paymentData?.transactionId) fetchData();
	}, [getPaymentTransaction, paymentData]);
	const statusText = useMemo(() => {
		return paymentTransaction?.responseCode === PAYMENT_APPROVED && paymentTransaction?.paymentResultID === RESULT_SUCCESS ? "Approved" : paymentTransaction?.responseCode === PAYMENT_DENIED && paymentTransaction?.paymentResultID === RESULT_FAILURE ? "Declined" : "Undetermined";
	}, [paymentTransaction]);
	const statusCode = useMemo(() => {
		return paymentTransaction?.responseCode === PAYMENT_APPROVED && paymentTransaction?.paymentResultID === RESULT_SUCCESS ? "ok" : paymentTransaction?.responseCode === PAYMENT_DENIED && paymentTransaction?.paymentResultID === RESULT_FAILURE ? "error" : "warning";
	}, [paymentTransaction]);
	return /* @__PURE__ */ React.createElement(Box$1, null, loading && /* @__PURE__ */ React.createElement(Box$1, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(LinearProgress$1, null)), /* @__PURE__ */ React.createElement(Box$1, { className: classes.box }, /* @__PURE__ */ React.createElement(FluentCardText, {
		title: "Value",
		description: `$${paymentData?.amount}`
	}), /* @__PURE__ */ React.createElement(FluentCardText, {
		title: "Status",
		description: /* @__PURE__ */ React.createElement(IndicatorChip, {
			text: statusText,
			status: statusCode
		})
	})), /* @__PURE__ */ React.createElement(AmbientCard, { fullWidth: true }, /* @__PURE__ */ React.createElement(Typography$1, {
		variant: "subtitle2",
		style: {
			marginTop: "0px",
			marginBottom: "10px"
		}
	}, t("Payment Details")), /* @__PURE__ */ React.createElement(Box$1, {
		display: "flex",
		flexDirection: "column"
	}, /* @__PURE__ */ React.createElement(Grid$1, {
		container: true,
		spacing: 1
	}, [
		[t("Transaction ID"), paymentData?.transactionId || t("N/A")],
		[t("Date/Time"), paymentData?.transactionDate ? DateTime.fromJSDate(new Date(paymentData?.transactionDate)).toFormat("EEE, MMM d, yyyy") : t("N/A")],
		[t("Processor"), paymentData?.paymentSourceName || t("No Information found")],
		[t("Response Code"), paymentData?.authorizationNumber || t("N/A")]
	].map(([k, v]) => /* @__PURE__ */ React.createElement(Grid$1, {
		item: true,
		xs: 12,
		sm: 6
	}, /* @__PURE__ */ React.createElement(ListElement, {
		subject: k,
		value: v,
		hideDivider: true
	}))))), /* @__PURE__ */ React.createElement(Divider, { style: {
		marginTop: "10px",
		marginBottom: "10px"
	} }), /* @__PURE__ */ React.createElement(Box$1, {
		display: "flex",
		flexDirection: "column"
	}, /* @__PURE__ */ React.createElement(Grid$1, {
		container: true,
		spacing: 1
	}, [
		[t("Customer Name"), paymentTransaction?.reference3 || t("N/A")],
		[t("Type"), paymentData?.tender || t("N/A")],
		[t("Card Holder Name"), t("N/A")],
		[t("CC Number"), paymentData?.cardLast4 || t("N/A")],
		[t("Company"), paymentTransaction?.applicationClient?.name || t("N/A")],
		[t("Expiration Date"), paymentData?.date || t("N/A")],
		[t("AVS"), t("N/A")],
		[t("Status"), paymentData?.authorizationNumber ? "Approved" : "Declined"],
		[t("Confirmation"), paymentData?.authorizationNumber || t("N/A")]
	].map(([k_0, v_0]) => /* @__PURE__ */ React.createElement(Grid$1, {
		item: true,
		xs: 12,
		sm: 6
	}, /* @__PURE__ */ React.createElement(ListElement, {
		subject: k_0,
		value: v_0,
		hideDivider: true
	}))))), /* @__PURE__ */ React.createElement(Divider, { style: {
		marginTop: "10px",
		marginBottom: "10px"
	} }), /* @__PURE__ */ React.createElement(Box$1, {
		display: "flex",
		flexDirection: "column"
	}, /* @__PURE__ */ React.createElement(Grid$1, {
		container: true,
		spacing: 1
	}, [
		[t("First Attempt Date"), paymentData?.date || t("N/A")],
		[t("Initial Transaction"), paymentData?.date || t("N/A")],
		[t("Next Attempt Date"), paymentData?.date || t("N/A")],
		[t("Retry Count"), t("N/A")]
	].map(([k_1, v_1]) => /* @__PURE__ */ React.createElement(Grid$1, {
		item: true,
		xs: 12,
		sm: 6
	}, /* @__PURE__ */ React.createElement(ListElement, {
		subject: k_1,
		value: v_1,
		hideDivider: true
	}))))), /* @__PURE__ */ React.createElement(Divider, { style: {
		marginTop: "10px",
		marginBottom: "10px"
	} }), /* @__PURE__ */ React.createElement(Form, {
		id,
		onSubmit: handleSubmitPaymentReversal,
		render: ({ handleSubmit, form, values: values_0 }) => {
			return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormControl$1, { className: classes.formControl }, /* @__PURE__ */ React.createElement(Field, {
				component: FluentTextField,
				ComponentProps: {
					label: t("Amount to Reverse"),
					variant: "outlined",
					margin: "normal",
					size: "small",
					disabled: false,
					fullWidth: true,
					autoComplete: "off",
					inputProps: {
						maxLength: 256,
						autocomplete: "off"
					}
				},
				name: "amountToReverse",
				initialValue: paymentData?.amount,
				onChange: () => {},
				required: true
			})), /* @__PURE__ */ React.createElement(FormControl$1, { className: classes.formControlGeneral }, /* @__PURE__ */ React.createElement(FormControlLabel, {
				control: /* @__PURE__ */ React.createElement(Field, {
					component: FluentCheckbox,
					name: "isSendCustomerPaymentConfirmation",
					type: "checkbox",
					defaultValue: false,
					required: false,
					onChange: () => {},
					size: "small"
				}),
				label: t("Send Customer Payment Confirmation")
			})));
		}
	})));
};
//#endregion
export { PaymentReversalForm };

//# sourceMappingURL=PaymentReversalForm.mjs.map