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

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

const Template: ComponentStory<typeof AdjustingLeverModal> = args => {
  const [show, setShow] = React.useState(false);
  const onClose = useCallback(() => setShow(false), []);

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

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

export const DefaultValue = Template.bind({});
DefaultValue.args = {
  defaultLever: 1,
  defaultMarginType: MarginTypeEnum.Isolated,
  defaultOriginalNodes: [1, 5, 10, 25, 50],
  askLimits: [
    { initialLeverage: "100.0", notionalCap: "100000.000000000000000000" },
    { initialLeverage: "57.1", notionalCap: "200000.000000000000000000" },
    { initialLeverage: "40.0", notionalCap: "300000.000000000000000000" },
    { initialLeverage: "30.8", notionalCap: "400000.000000000000000000" },
    { initialLeverage: "25.0", notionalCap: "500000.000000000000000000" },
    { initialLeverage: "21.1", notionalCap: "600000.000000000000000000" },
    { initialLeverage: "18.2", notionalCap: "700000.000000000000000000" },
    { initialLeverage: "16.0", notionalCap: "800000.000000000000000000" },
    { initialLeverage: "14.3", notionalCap: "900000.000000000000000000" },
    { initialLeverage: "12.9", notionalCap: "1000000.000000000000000000" },
    { initialLeverage: "11.8", notionalCap: "1100000.000000000000000000" },
    { initialLeverage: "7.3", notionalCap: "1800000.000000000000000000" },
    { initialLeverage: "6.9", notionalCap: "1900000.000000000000000000" },
    { initialLeverage: "6.6", notionalCap: "10000000.000000000000000000" }
  ]
};

export const WithPositions = Template.bind({});
WithPositions.args = {
  defaultLever: 13
};