"use client";
import { Controls, Elements, Layouts } from "../../../../components";
import usePortal from "../../../../hooks/usePortal";
import { Exchange } from "../../../../prefabs";
import { Vault } from "../../../../prefabs/treasury";
import { useState } from "react";
export default function Trade(props) {
    const [mode, setMode] = useState(true);
    const option = props?.option || "market";
    const responsive = props?.responsive || false;
    const [deposit, setDeposit] = useState();
    const [withdraw, setWithdraw] = useState();
    const color = {
        deposit: "orange",
        withdraw: "blue",
    };
    const [handleConfirm, closeConfirm] = usePortal(<Exchange.Modals.Confirmation mode={mode} color={color} onClose={() => closeConfirm()}/>);
    return (<>
            <Layouts.Col gap={1}>
                <Layouts.Contents.SlideContainer style={{ gap: `${responsive ? 2 : 3}em` }} contents={[
            {
                active: responsive ? mode === true : true,
                style: {
                    height: "max-content",
                    overflow: "hidden",
                },
                children: (<Vault.Controls.Trade mode={true} assets={[props?.quote, props?.base]} price={props?.price} fee={props?.fee} onChange={(v) => setDeposit(v)}/>),
            },
            {
                active: responsive ? mode === false : true,
                style: {
                    height: "max-content",
                    overflow: "hidden",
                },
                children: (<Vault.Controls.Trade mode={false} assets={[props?.base, props?.quote]} price={props?.price} fee={props?.fee} onChange={(v) => setWithdraw(v)}/>),
            },
        ]}/>
                <Layouts.Row fix>
                    <Layouts.Row gap={!responsive ? 6 : 4} fix>
                        <Controls.Button icon={"revert-bold"} hide={!responsive} fit/>
                        <Controls.Button type={"solid"} color={color.deposit} style={{
            ...(responsive && mode === false ? { maxWidth: "4em" } : { maxWidth: "100%" }),
        }} onClick={(e, o) => {
            mode === false && setMode(true);
            (mode === true || !responsive) && handleConfirm(null, { order: o });
        }}>
                            <Elements.TextCollapse text={"DEPOSIT"} condition={responsive && mode === false}/>
                        </Controls.Button>
                        <Controls.Button type={"solid"} color={color.withdraw} style={{
            ...(responsive && mode ? { maxWidth: "4em" } : { maxWidth: "100%" }),
        }} onClick={(e, o) => {
            mode === true && setMode(false);
            (mode === false || !responsive) && handleConfirm(null, { order: o });
        }}>
                            <Elements.TextCollapse text={"WITHDRAW"} condition={responsive && mode === true}/>
                        </Controls.Button>
                    </Layouts.Row>
                </Layouts.Row>
            </Layouts.Col>
        </>);
}
//# sourceMappingURL=Trade.jsx.map