import React, { useState } from "react";
import { OrderConfirmProps, OrderDetails } from "./interface";
import "./styles/index.css";
import Modal from "@components/Modal";
import { Checkbox } from "@atomintl/aui-next";
import OrderCell from "./Cell";
import { MarginTypeEnum, OrderSideEnum } from "@shared/types";
/**
 * 下单确认组件
 *
 *
 * ### 引用方法
 * ```tsx
 * import { OrderConfirm } from "@atomintl/exchange-ui"
 * ```
 */
const OrderConfirm: React.FC<OrderConfirmProps> = props => {
  const { onConfirm } = props;
  const orderDetails = props.orderDetails ?? ({} as OrderDetails);
  const {
    marginType = MarginTypeEnum.Cross,
    leverage = 1,
    diyOrderCell,
    ordPx,
    quote,
    price,
    base,
    symbol,
    quantityValue,
    cost,
    orderValue,
    settleCurrency,
    liquidationPrice,
    isClose,
    isMarket,
    isCondition,
    sideText,
    side = OrderSideEnum.Buy
  } = orderDetails;
  const [checked, setChecked] = useState(false);

  return (
    <Modal
      {...props}
      title={
        <>
          <span className={side === OrderSideEnum.Buy ? "text-green" : "text-red"}>{sideText}</span>
          {symbol || ""}
        </>
      }
      cancelText="取消"
      okText={sideText}
      confirmConfig={{ color: side === OrderSideEnum.Buy ? "green" : "red" }}
      onOk={() => onConfirm?.(checked)}
    >
      <ul className="nts-order-detail-ul">
        <OrderCell
          label="仓位杠杆"
          value={
            <span>
              {marginType === MarginTypeEnum.Cross ? "全仓" : "逐仓"} {leverage}x
            </span>
          }
        />
        {isCondition ? <OrderCell label="触发价格" value={<span>{ordPx || ""}</span>} unit={quote} /> : ""}
        <OrderCell label="价格" value={<span>{isMarket ? "最优5档" : price}</span>} unit={isMarket ? "" : quote} />
        <OrderCell label="数量" value={quantityValue} unit={base} />
        {cost && !isClose ? <OrderCell label="成本" value={cost} unit={settleCurrency} /> : ""}
        {orderValue && !isClose ? <OrderCell label="订单价值" value={orderValue} unit={settleCurrency} /> : ""}
        {!isClose ? (
          <OrderCell
            label="预估强平价格"
            value={liquidationPrice || "--"}
            unit={base}
            classes={{ value: "!text-yellow" }}
          />
        ) : (
          ""
        )}
        {diyOrderCell ? <OrderCell {...diyOrderCell} /> : null}
      </ul>
      <div>
        <Checkbox margin="20px 0 0" checked={checked} onChange={event => setChecked(event?.target.checked)}>
          <span className="nts-order-detail-checkbox">不再展示，您可在【更多-偏好设置】中重新设置。</span>
        </Checkbox>
      </div>
    </Modal>
  );
};

OrderConfirm.defaultProps = {};

export { OrderConfirmProps, OrderDetails } from "./interface";
export default OrderConfirm;