import * as React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { OrderConfirm } from "../src";
import { OrderSideEnum } from "@atomintl/exchange-shared";

export default {
  title: "确认弹窗/OrderConfirm",
  component: OrderConfirm
} as ComponentMeta<typeof OrderConfirm>;

// Story模版
const Template: ComponentStory<typeof OrderConfirm> = args => {
  const [show, setShow] = React.useState(true);
  const onClose = () => setShow(false);

  return (
    <div>
      <button onClick={() => setShow(true)}>下单确认</button>

      <OrderConfirm
        orderDetails={{
          sideText: "平多",
          symbol: "BTCUSDT",
          side: OrderSideEnum.Buy,
          isMarket: true,
          quantityValue: 0.011,
          base: "BTC",
          isClose: true,
          diyOrderCell: {
            label: "预计盈亏",
            value: "12345",
            unit: "USDT"
          }
        }}
        open={show}
        onClose={onClose}
        onCancel={() => {
          alert("取消");
          onClose();
        }}
        onOk={() => {
          alert("确认");
          onClose();
        }}
      />
    </div>
  );
};

export const Normal = Template.bind({});