import * as React from "react";
import type { ComponentStory, ComponentMeta } from "@storybook/react";
import { PositionDeliveryModal } from "../src";
import { useCallback, useEffect, useState } from "react";
import { ESide } from "../src/_utils/contractRules";

export default {
  title: "lib/PositionDeliveryModal",
  component: PositionDeliveryModal
} as ComponentMeta<typeof PositionDeliveryModal>;

const Template: ComponentStory<typeof PositionDeliveryModal> = args => {
  const [show, setShow] = React.useState(true);
  const onClose = useCallback(() => setShow(false), []);
  const [initPxs, setInitPxs] = useState({
    tpTriggerPxType: "mark",
    tpTriggerPx: 20000,
    slTriggerPxType: "index",
    slTriggerPx: 0
  });

  useEffect(() => {
    setTimeout(() => {
      setInitPxs({
        tpTriggerPxType: "mark",
        tpTriggerPx: 20000,
        slTriggerPxType: "index",
        slTriggerPx: 10000
      });
    }, 3000);
  }, []);

  useEffect(() => {
    if (!!show) {
      setInitPxs(initPxs);
    }
  }, [show]);

  return (
    <>
      <PositionDeliveryModal
        {...args}
        open={show}
        onClose={onClose}
        initPxs={initPxs}
        setInitPxs={setInitPxs}
        onConfirm={o => {
          onClose();
          console.log(o);
        }}
      />
      <button onClick={() => setShow(true)}>show modal</button>
    </>
  );
};

export const Normal = Template.bind({});
Normal.args = {
  symbol: `BTCUSDT`,
  level: `10`,
  side: ESide.LONG,
  avgEntryPrice: `19207.4399`,
  newestPrice: `21207.0010`,
  posMargin: "8.0001",
  positionAmt: "1",
  ctVal: "0.01",
  ctValScale: 4,
  costSizeScale: 4
};