import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useMemo, useState } from "react";
import { useConfig, useMutation } from "@orderly.network/hooks";
import Button from "../../../button";
import { Popover, PopoverContent, PopoverTrigger } from "../../../popover";
import { OrderConfirmView } from "../../../block/orderEntry/sections/orderConfirmView";
import { Divider } from "../../../divider";
export const Renew = (props)=>{
    const { record } = props;
    const [open, setOpen] = useState(false);
    const [doCreateOrder, { data, error, reset, isMutating }] = useMutation("/v1/order");
    const [loading, setLoading] = useState(false);
    // @ts-ignore
    const { brokerId } = useConfig();
    const onSubmit = useCallback(()=>{
        setLoading(false);
        setOpen(false);
        const data = {
            symbol: record.symbol,
            order_type: record.type,
            order_price: record.price,
            order_quantity: record.quantity,
            order_amount: record.amount,
            // visible_quantity: record.visible,
            side: record.side,
            // reduce_only: record.reduce_only,
            broker_id: brokerId
        };
        if (Number(record.visible_quantity) < Number(record.quantity)) {
            data.visible_quantity = 0;
        }
        if (typeof record.reduce_only !== "undefined") {
            data.reduce_only = record.reduce_only;
        }
        doCreateOrder(data);
    }, []);
    const ordetEntity = useMemo(()=>{
        return {
            symbol: record.symbol,
            order_type: record.type,
            order_price: record.price,
            order_quantity: record.quantity,
            order_amount: record.amount,
            visible_quantity: record.visible,
            side: record.side,
            broker_id: brokerId
        };
    }, []);
    const base = useMemo(()=>{
        return record.symbol.split("_")[1];
    }, [
        record.symbol
    ]);
    const quote = useMemo(()=>{
        return record.symbol.split("_")[2];
    }, [
        record.symbol
    ]);
    // console.log("renew record", record, base, quote);
    return /*#__PURE__*/ _jsx(Button, {
        size: "small",
        variant: "outlined",
        color: "tertiary",
        loading: isMutating,
        disabled: isMutating,
        onClick: (event)=>{
            // setOpen(true);
            event.preventDefault();
            event.stopPropagation();
            onSubmit();
        },
        children: "Renew"
    });
    return /*#__PURE__*/ _jsxs(Popover, {
        open: open,
        onOpenChange: setOpen,
        children: [
            /*#__PURE__*/ _jsx(PopoverTrigger, {
                children: /*#__PURE__*/ _jsx(Button, {
                    size: "small",
                    variant: "outlined",
                    color: "tertiary",
                    onClick: ()=>{
                        setOpen(true);
                    },
                    children: "Renew"
                })
            }),
            /*#__PURE__*/ _jsx(PopoverContent, {
                align: "end",
                side: "top",
                className: "orderly-w-[340px] orderly-z-20",
                sideOffset: 5,
                children: /*#__PURE__*/ _jsxs("div", {
                    children: [
                        /*#__PURE__*/ _jsx("div", {
                            className: "orderly-flex orderly-justify-start orderly-text-base-contrast orderly-text-lg orderly-pb-2",
                            children: "Renew order"
                        }),
                        /*#__PURE__*/ _jsx(Divider, {
                            className: "orderly-mb-2"
                        }),
                        /*#__PURE__*/ _jsx(OrderConfirmView, {
                            // @ts-ignore
                            order: {
                                ...ordetEntity,
                                total: record.price * record.quantity
                            },
                            symbol: record.symbol,
                            base: base,
                            quote: quote
                        }),
                        /*#__PURE__*/ _jsx(Divider, {
                            className: "orderly-my-2"
                        }),
                        /*#__PURE__*/ _jsxs("div", {
                            className: "orderly-grid orderly-grid-cols-2 sm:orderly-flex sm:orderly-flex-row sm:orderly-justify-end orderly-gap-3 orderly-mt-3",
                            children: [
                                /*#__PURE__*/ _jsx(Button, {
                                    className: "orderly-text-xs desktop:orderly-text-xs orderly-font-bold",
                                    type: "button",
                                    variant: "contained",
                                    color: "tertiary",
                                    disabled: loading,
                                    onClick: ()=>{
                                        setOpen(false);
                                    },
                                    fullWidth: true,
                                    children: "Cancel"
                                }, "cancel"),
                                /*#__PURE__*/ _jsx(Button, {
                                    className: "orderly-text-xs desktop:orderly-text-xs orderly-font-bold",
                                    type: "button",
                                    fullWidth: true,
                                    disabled: loading,
                                    onClick: ()=>{
                                        setLoading(true);
                                        onSubmit();
                                    },
                                    children: "OK"
                                }, "ok")
                            ]
                        })
                    ]
                })
            })
        ]
    });
};

//# sourceMappingURL=renew.js.map