import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from "react";
import { Select } from "../../../select";
import { modal } from "../../../modal";
import { OrderSide } from "@orderly.network/types";
import Button from "../../../button";
import { useMutation } from "@orderly.network/hooks";
import toast from "react-hot-toast";
export const Header = (props)=>{
    const [side, setSide] = useState("");
    const [cancelAll, { error: cancelOrderError, isMutating: cancelMutating }] = useMutation("/v1/orders", "DELETE");
    function cancelAllOrder() {
        modal.confirm({
            title: "Cancel all orders",
            content: /*#__PURE__*/ _jsx("div", {
                className: "orderly-text-base-contrast-54 orderly-text-2xs desktop:orderly-text-sm",
                children: "Are you sure you want to cancel all of your pending orders?"
            }),
            contentClassName: "desktop:orderly-w-[364px]",
            onOk: async ()=>{
                // do cancel all orders
                try {
                    await cancelAll(null, {
                        "source_type": "ALL"
                    });
                } catch (error) {
                    // @ts-ignore
                    if (error?.message !== undefined) {
                        // @ts-ignore
                        toast.error(error.message);
                    }
                } finally{
                    Promise.resolve();
                }
            },
            onCancel: ()=>{
                return Promise.reject();
            }
        });
    }
    const options = useMemo(()=>{
        return [
            {
                label: "All sides",
                value: ""
            },
            {
                label: "Buy",
                value: OrderSide.BUY
            },
            {
                label: "Sell",
                value: OrderSide.SELL
            }
        ];
    }, []);
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-flex orderly-justify-between orderly-items-center orderly-py-3 orderly-font-semibold",
        children: [
            /*#__PURE__*/ _jsx(Select, {
                size: "small",
                options: options,
                value: props.side,
                onChange: (value)=>{
                    // console.log(value);
                    // setSide(value as OrderSide);
                    props.onSideChange(value);
                // props.onSearch?.({ side: value as OrderSide });
                }
            }),
            props.status === "INCOMPLETE" && /*#__PURE__*/ _jsx(Button, {
                size: "small",
                variant: "outlined",
                disabled: props.count <= 0,
                color: "tertiary",
                onClick: cancelAllOrder,
                children: "Cancel all"
            })
        ]
    });
};

//# sourceMappingURL=header.js.map