import * as React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { OrderPreferenceConfirm } from "../src";

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

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

  const onClose = () => setShow(false);

  return (
    <div>
      <button onClick={() => setShow(true)}>下单偏好设置</button>

      <OrderPreferenceConfirm
        open={show}
        value={1}
        options={[
          {
            desc: "请您填写合约数量，单位为 BTC。",
            disabled: false,
            title: "按数量下单 BTC",
            value: 1
          },
          {
            desc: "按开仓会占用多少数量的USDT保证金进行下单。更改杠杆会导致已存在挂单所需保证金的变动。",
            disabled: false,
            title: "按成本下单 USDT",
            value: 2
          }
        ]}
        onClose={onClose}
        onCancel={() => {
          alert("取消");
          onClose();
        }}
        onOk={value => {
          alert(`确认-${value}`);
          onClose();
        }}
      />
    </div>
  );
};

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