import * as React from "react";
import { YMDHms } from "@utils/time";
import { toUpper, map as RDmap, clone } from "ramda";
import { OrderSideEnum, OrderTypeEnum, PositionSideEnum } from "@shared/types";
import {
  getIncomeTypeLabel,
  getMarginTypeLabel,
  getOrderStatusLabel,
  getOrderTypeLabel,
  getSideTypeLabel
} from "@components/OrderList/columnConfigs/mappings";
import { formatFloor, formatMoney, toDefaultNumber } from "@utils/FormatNumber";
import { PositionColumnsDelivery } from "@components/OrderList/columnComps/PositionColumnsDelivery";
import { PositionColumnsLeverage } from "@components/OrderList/columnComps/PositionColumnsLeverage";
import { PositionColumnsPosMargin } from "@components/OrderList/columnComps/PositionColumnsPosMargin";
import Button from "@components/Button";
import { getValueByContr } from "@utils/contractRules";

export const settingMaps: any = {
  createTime: {
    code: "createTime",
    name: "时间",
    width: 120,
    render(value: any): React.ReactNode {
      return <div>{YMDHms(value)}</div>;
    }
  },
  positionSymbol: {
    code: "symbol",
    name: "合约",
    width: 100,
    render(value: any, row: any): React.ReactNode {
      const isLong = row?.positionSide === PositionSideEnum.Long;
      return (
        <div className={`${isLong ? "text-green" : "text-red"}`}>
          {toUpper(value)} {getMarginTypeLabel(row?.marginType)}
        </div>
      );
    }
  },
  symbol: {
    code: "symbol",
    name: "合约",
    width: 70,
    render(value: any): React.ReactNode {
      return <div>{toUpper(value)}</div>;
    }
  },
  orderType: {
    code: "orderType",
    name: "交易类型",
    width: 60,
    render(value: OrderTypeEnum): React.ReactNode {
      return <div className="flex items-center">{getOrderTypeLabel(value)}</div>;
    }
  },
  side: {
    code: "side",
    name: "方向",
    width: 40,
    render(value: any, row: any): React.ReactNode {
      const isBuy = value === OrderSideEnum.Buy;
      return (
        <div className={`font-medium ${isBuy ? "text-[#34c759]" : "text-[#ff3b30]"}`}>
          {getSideTypeLabel(value, row.positionSide)}
        </div>
      );
    }
  },
  price: {
    code: "price",
    name: "价格",
    width: 80,
    render(value: any): React.ReactNode {
      return <div>{formatMoney(formatFloor(value, 2))}</div>;
    }
  },
  orderQty: {
    code: "orderQty",
    name: "数量",
    width: 80,
    render(value: any, row: any): React.ReactNode {
      return <div>{`${formatFloor(value, 3)} ${toUpper(row?.base || "")}`}</div>;
    }
  },
  leverage: {
    code: "leverage",
    name: "杠杆",
    width: 60,
    render(value: any, row: any): React.ReactNode {
      return (
        <PositionColumnsLeverage
          value={value}
          marginType={row?.marginType}
          tradeType={row?.tradeType}
          symbol={row?.symbol}
          pair={row?.pair}
        />
      );
    }
  },
  positionAmt: {
    code: "positionAmt",
    name: `数量`,
    width: 80,
    render(value: any, row: any): React.ReactNode {
      const isLong = row?.positionSide === PositionSideEnum.Long;
      return (
        <div className={`${isLong ? "text-green" : "text-red"}`}>
          {getValueByContr({ value, multiplier: row?.pair?.ctVal, scale: row?.pair?.ctValScale })} {row?.base}
        </div>
      );
    }
  },
  avgEntryPrice: {
    code: "avgEntryPrice",
    name: "开仓均价",
    width: 80,
    render(value: any, row: any): React.ReactNode {
      return <div className="text-[#ff9500]">{formatMoney(formatFloor(value, row?.pair?.tickSizeScale))}</div>;
    }
  },
  markPrice: {
    code: "markPrice",
    name: "标记价格",
    width: 80,
    render(value: any, row: any): React.ReactNode {
      return <div>{formatMoney(formatFloor(value, row?.pair?.tickSizeScale))}</div>;
    }
  },
  liquidationPrice: {
    code: "liquidationPrice",
    name: "强平价格",
    width: 80,
    render(value: any, row: any): React.ReactNode {
      return <div>{formatMoney(formatFloor(value, row?.pair?.tickSizeScale))}</div>;
    }
  },
  posMargin: {
    code: "posMargin",
    name: "保证金",
    width: 70,
    render(value: any, row: any): React.ReactNode {
      return <PositionColumnsPosMargin value={value} pair={row?.pair} />;
    }
  },
  posMarginRate: { code: "posMarginRate", name: "保证金比率", width: 100 },
  unrealisedPnl: {
    code: "unrealisedPnl",
    name: "未实现盈亏(回报率%)",
    width: 150,
    render(value: any, row: any): React.ReactNode {
      const isNegative = toDefaultNumber(value) < 0;
      const { quote, earningRate } = row;
      return (
        <div className={`flex items-center ${isNegative ? "text-red" : "text-green"}`}>
          {`${formatMoney(formatFloor(value, row?.pair?.costSizeScale))} ${toUpper(quote)}`}
          {`(${isNegative ? "" : "+"}${formatFloor(earningRate, 2)}%)`}
        </div>
      );
    }
  },
  positionDelivery: {
    code: "positionDelivery",
    name: "仓位止盈止损",
    width: 100,
    render(value: any, row: any): React.ReactNode {
      return (
        <PositionColumnsDelivery
          value={value}
          symbol={row?.symbol}
          level={row?.leverage}
          avgEntryPrice={row?.avgEntryPrice}
          tickSizeScale={row?.pair?.tickSizeScale}
          positionAmt={row?.positionAmt}
          ctVal={row?.pair?.ctVal}
          ctValScale={row?.pair?.ctValScale}
          costSizeScale={row?.pair?.costSizeScale}
        />
      );
    }
  },

  cumQty: {
    code: "cumQty",
    name: "成交数量",
    width: 80,
    render(value: any, row: any): React.ReactNode {
      return <div>{`${formatFloor(value, 3)} ${toUpper(row?.base || "")}`}</div>;
    }
  },
  postOnly: {
    code: "postOnly",
    name: "被动订单",
    width: 80,
    render(value: any): React.ReactNode {
      return <div>{value ? "是" : "否"}</div>;
    }
  },
  marginType: {
    code: "marginType",
    name: "仓位模式",
    width: 100,
    render(value: any): React.ReactNode {
      return <div>{value}</div>;
    }
  },
  avgPrice: {
    code: "avgPrice",
    name: "成交均价",
    width: 80,
    render(value: any): React.ReactNode {
      return <div>{formatMoney(formatFloor(value, 2))}</div>;
    }
  },
  filledPrice: {
    code: "filledPrice",
    name: "成交均价",
    width: 80,
    render(value: any): React.ReactNode {
      return <div>{formatMoney(formatFloor(value, 2))}</div>;
    }
  },
  commission: {
    code: "commission",
    name: "手续费",
    width: 80,
    render(value: any, row: any): React.ReactNode {
      return (
        <div>
          {formatFloor(value)} {row?.commissionAsset}
        </div>
      );
    }
  },
  positionQty: {
    code: "positionQty",
    name: "最大持仓量",
    width: 80,
    render(value: any): React.ReactNode {
      return <div>{formatFloor(value, 3)}</div>;
    }
  },
  realProfit: {
    code: "realProfit",
    name: "已实现盈亏",
    width: 100,
    render(value: any, row: any): React.ReactNode {
      return (
        <div>
          {formatMoney(formatFloor(value))} {row.commissionAsset}
        </div>
      );
    }
  },
  closeProfit: {
    code: "realProfit",
    name: "平仓收益",
    width: 100,
    render(value: any, row: any): React.ReactNode {
      return (
        <div className={``}>
          {formatMoney(formatFloor(value))} {row.commissionAsset}
        </div>
      );
    }
  },
  incomeType: {
    code: "incomeType",
    name: "类型",
    width: 60,
    render(value: any): React.ReactNode {
      return <div>{getIncomeTypeLabel(value)}</div>;
    }
  },
  conditionalPrice: {
    code: "conditionalPrice",
    name: "触发条件",
    width: 80,
    render(): React.ReactNode {
      return <div>{"最新价格 ≥ 19,998.00"}</div>;
    }
  },
  oneKeyClose: {
    code: "oneKeyClose",
    name: (<div className={`cursor-pointer text-[#007aff] inline-block`}>一键平仓</div>) as any,
    align: "right",
    width: 100,
    render(): React.ReactNode {
      return (
        <div
          className={`border inline-block border-[#0a84ff] rounded-[2px] px-[12px] py-[4px] text-[#007aff]
           text-[12px] cursor-pointer hover:text-[#fff] hover:bg-[#007aff] duration-300`}
        >
          市价全平
        </div>
      );
    }
  },
  killAllOrders: {
    code: "killAllOrders",
    name: (
      <div
        className={`text-blue cursor-pointer`}
        onClick={() => {
          console.log(`全部撤单`);
        }}
      >{`全部撤单`}</div>
    ) as any,
    align: "right",
    width: 80,
    render(): React.ReactNode {
      return <Button color="green" size="small">{`撤单`}</Button>;
    }
  },
  closingTime: {
    code: "closingTime",
    name: "仓位关闭时间",
    width: 80,
    render(value: any): React.ReactNode {
      return <div>{YMDHms(value)}</div>;
    }
  },
  marginCloseOutAmt: {
    code: "marginCloseOutAmt",
    name: "强平数量",
    width: 80,
    render(value: any, row: any): React.ReactNode {
      return (
        <div>
          {formatFloor(value, 3)} {row?.quote || ""}
        </div>
      );
    }
  },
  income: {
    code: "income",
    name: "总额",
    align: "right",
    width: 60,
    render(value: any, row: any): React.ReactNode {
      console.log(row);
      const positive = Number(value) >= 0;
      return (
        <div className={`text-right`}>
          {positive ? "+" : ""}
          {formatMoney(formatFloor(value))} {row?.currency}
        </div>
      );
    }
  },
  orderStatus: {
    code: "orderStatus",
    name: "状态",
    width: 100,
    render(value: any): React.ReactNode {
      return <div>{getOrderStatusLabel(value)}</div>;
    }
  },
  filledQty: {
    code: "filledQty",
    name: "数量",
    width: 80,
    render(value: any, row: any): React.ReactNode {
      return <div>{`${formatFloor(value, 3)} ${toUpper(row?.base || "")}`}</div>;
    }
  },
  taker: {
    code: "taker",
    name: "角色",
    width: 80,
    render(value: any): React.ReactNode {
      return <div>{`${value ? "吃单方" : "挂单方"}`}</div>;
    }
  }
};

export const getColumn = (code: string) => settingMaps[code];

export const getColumns = (codes: Array<string>) => RDmap(getColumn, codes);

export const getConditionalColumns = (needToBeClone: Array<any>) => {
  const _clonedColumns = clone(needToBeClone);
  const _len = _clonedColumns.length;
  _clonedColumns.splice(_len - 2, 0, getColumn("conditionalPrice"));

  return _clonedColumns;
};