/**
 * @description 下单面板组件
 *
 * @date 创建时间 2022-10-25 16:25
 * @author 开发人员 yena.he
 */

import React, { FC } from "react";
import { MarginTypeEnum } from "@shared/types";
import Header from "./Header";
import Balance from "./Balance";
import OrderForm from "./OrderForm";
import { PlaceOrderService } from "../services";
import { useObservable } from "rxjs-hooks";
import { map } from "rxjs/operators";

export interface PlaceOrdersProps {}
const PlaceOrders: FC<PlaceOrdersProps> = () => {
  const leverage = useObservable(() => PlaceOrderService.instance.leverage$.pipe(map(val => val))) ?? 1;
  const marginType =
    useObservable(() => PlaceOrderService.instance.marginType$.pipe(map(val => val))) ?? MarginTypeEnum.Cross;

  return (
    <div className="w-80 text-xs h-full min-h-screen text-derive-11 ">
      {/* 头部全仓&杠杆 / 个人偏好 */}
      <Header leverage={leverage} marginType={marginType} />
      {/* 下单面板 */}
      <OrderForm leverage={leverage} marginType={marginType} />
      {/* 账户资产 */}
      <Balance />
    </div>
  );
};

PlaceOrders.defaultProps = {};
export default PlaceOrders;