import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { memo, useCallback } from "react";
import { Decimal } from "@orderly.network/utils";
import { parseNumber } from "../../../utils/num";
import { InfoIcon } from "../../../icon";
import { modal } from "../../../modal";
import { Divider } from "../../../divider";
import { feeDecimalsOffset } from "../utils";
import { useIndexPrice } from "@orderly.network/hooks";
export const Summary = /*#__PURE__*/ memo((props)=>{
    const { nativeToken, depositFee = 0n } = props;
    const { data: symbolPrice } = useIndexPrice(`SPOT_${nativeToken?.symbol}_USDC`);
    const dstGasFee = new Decimal(depositFee.toString())?.div(new Decimal(10).pow(18)).toString();
    const feeAmount = `${new Decimal(dstGasFee).toFixed(feeDecimalsOffset(4), Decimal.ROUND_UP)} ${nativeToken?.symbol}`;
    // Using useMemo causes a delay in data display
    const getFeeElement = ()=>{
        const totalFee = new Decimal(dstGasFee)?.mul(symbolPrice || 0)?.toFixed(3, Decimal.ROUND_UP);
        return `Fee ≈ $ ${totalFee || 0} ${Number(depositFee) ? `(${feeAmount})` : ""}`;
    };
    const onShowFee = useCallback(()=>{
        const message = [];
        let dstGasFee = new Decimal(depositFee.toString())?.div(new Decimal(10).pow(18)).toString();
        if (dstGasFee) {
            message.push(/*#__PURE__*/ _jsxs(_Fragment, {
                children: [
                    /*#__PURE__*/ _jsxs("div", {
                        children: [
                            "Destination gas fee:",
                            /*#__PURE__*/ _jsx("span", {
                                className: "orderly-text-base-contrast/60 orderly-mx-2",
                                children: feeAmount
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        children: "Additional gas tokens are required to cover operations on the destination chain."
                    }),
                    /*#__PURE__*/ _jsx(Divider, {})
                ]
            }));
        }
        modal.alert({
            title: "Fee",
            message: /*#__PURE__*/ _jsx("div", {
                className: "orderly-text-base-contrast/30 orderly-space-y-3 orderly-text-3xs desktop:orderly-text-xs",
                children: message
            })
        });
    }, [
        nativeToken?.symbol,
        props.src?.symbol,
        depositFee
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-flex-1 orderly-text-4xs orderly-text-base-contrast-36 desktop:orderly-text-3xs",
        children: [
            /*#__PURE__*/ _jsx("div", {
                className: "orderly-flex orderly-items-center orderly-justify-between",
                children: /*#__PURE__*/ _jsx("div", {
                    children: `1 ${props.src?.symbol || "USDC"} = ${props.price ? parseNumber(props.price, {
                        precision: 3,
                        rule: "price"
                    }) : "-"} ${props.dst.symbol || "USDC"}`
                })
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-mt-1 orderly-inline-flex orderly-items-center",
                onClick: onShowFee,
                children: [
                    /*#__PURE__*/ _jsx(InfoIcon, {
                        size: 14,
                        className: "orderly-mr-1"
                    }),
                    /*#__PURE__*/ _jsx("span", {
                        children: getFeeElement()
                    })
                ]
            })
        ]
    });
});

//# sourceMappingURL=summary.js.map