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

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

const Template: ComponentStory<typeof AdjustingMarginModal> = args => {
  const [show, setShow] = React.useState(true);
  const onClose = useCallback(() => setShow(false), []);
  
  return <>
    <AdjustingMarginModal
      {...args}
      open={show}
      onClose={onClose}
      onConfirm={o => {
        onClose();
        console.log(o);
      }}
    />
    <button onClick={() => setShow(true)}>show modal</button>
  </>
}

export const Normal = Template.bind({});
Normal.args = {
  maxIncreaseMargin: 39999,
  posMargin: 8,
  positionAmt: 1,
  averagePosPrice: 16800,
  marginRatio: 0.5,
  amtRate: 0.03,
  takerRate: 0.05,
  liquidationPriceScale: 3,
  side: 1
}