/**
 * @Author: ??
 * @Date: ??
 */
import React, { useCallback, useState } from "react";
import { OrderListProps } from "./interface";
import { Tabs } from "../../index";
import "./index.css";
import { OrdersHistory } from "@components/OrderList/tableComps/OrdersHistory";
import { HistoryTrade } from "@components/OrderList/tableComps/HistoryTrade";
import { PositionClosed } from "@components/OrderList/tableComps/PositionClosed";
import { AccountIncome } from "@components/OrderList/tableComps/AccountIncome";
import { Position } from "@components/OrderList/tableComps/Position";
import { OpenOrder } from "@components/OrderList/tableComps/OpenOrder";
import { Conditional } from "@components/OrderList/tableComps/Conditional";
import { BehaviorSubject } from "rxjs";
import { forceReRender } from "@storybook/react";
import { toDefaultNumber } from "@utils/FormatNumber";
import { useObservable } from "rxjs-hooks";
import { PairsService } from "@components/ProjectFutures/services";
import { map } from "rxjs/operators";
import { IFormatCurrentPair } from "@shared/types/interface";

export const initOrderListTotals = {
  position: 0,
  openOrder: 0,
  conditional: 0
};
export const orderListTotalsSub = new BehaviorSubject(initOrderListTotals);
orderListTotalsSub.asObservable().subscribe(forceReRender);

export const OrderListCTX = React.createContext<any[]>([]);
/**
 * ### 引用方法
 * ```tsx
 * import { OrderList } from "@atomintl/exchange-ui";
 * ```
 */
export const OrderList: React.FC<OrderListProps> = props => {
  const {} = props;
  const TabPane = Tabs.TabPane;
  const [currentTab, setCurrentTab] = useState<number | string>(1);
  const bracketsValue = useCallback((num: number | string) => (num ? `(${toDefaultNumber(num)})` : ""), []);
  const pairs = useObservable(() => PairsService.instance.pairs$.pipe(map(val => val))) ?? ([] as IFormatCurrentPair[]);
  const orderTabs = [
    { tab: `仓位${bracketsValue(orderListTotalsSub.value.position)}`, node: <Position pairs={pairs} /> },
    { tab: `当前委托${bracketsValue(orderListTotalsSub.value.openOrder)}`, node: <OpenOrder /> },
    { tab: `条件单${bracketsValue(orderListTotalsSub.value.conditional)}`, node: <Conditional /> },
    // { tab: `仓位${0}`, node: <Position pairs={[]} /> },
    // { tab: `当前委托${0}`, node: <OpenOrder /> },
    // { tab: `条件单${0}`, node: <Conditional /> },
    { tab: `历史委托`, node: <OrdersHistory /> },
    { tab: `历史成交`, node: <HistoryTrade /> },
    { tab: `已平仓`, node: <PositionClosed /> },
    { tab: `资金流水`, node: <AccountIncome /> }
  ];

  return (
    <OrderListCTX.Provider value={pairs}>
      <div className={`h-full bg-[#f9f9f9f0]`}>
        <Tabs
          activeKey={currentTab}
          onChange={setCurrentTab}
          classes={{ root: `orderListRoot`, tab: `orderListTitle` }}
        >
          {orderTabs.map((_item, _index) => (
            <TabPane key={Number(_index + 1)} tab={_item.tab}>
              {_item.node}
            </TabPane>
          ))}
        </Tabs>
      </div>
    </OrderListCTX.Provider>
  );
};

OrderList.defaultProps = {};

export type { OrderListProps };
export default OrderList;