import { FC, useCallback } from "react";
import { formatFloor, formatMoney } from "@utils/FormatNumber";
import { AdjustingMarginModal } from "../../../index";
import * as React from "react";
import { Edit } from "@icons/Edit";
import IconCom from "@icons/IconCom";

export interface PositionColumnsPosMarginProps {
  value: string | number;
  pair: any;
}
export const PositionColumnsPosMargin: FC<PositionColumnsPosMarginProps> = props => {
  const { value, pair } = props;
  const [open, setOpen] = React.useState(false);
  const onClose = useCallback(() => setOpen(false), []);

  return (
    <>
      <AdjustingMarginModal
        open={open}
        onClose={onClose}
        maxIncreaseMargin={`3200.09`}
        posMargin={value}
        positionAmt={10}
        averagePosPrice={19000}
        marginRatio={0.5}
        amtRate={0.03}
        takerRate={0.05}
        onConfirm={o => {
          onClose();
          console.log(o);
        }}
      />
      <div className={`flex items-center`}>
        <span className={`mr-[4px]`}>{formatMoney(formatFloor(value, pair?.costSizeScale))}</span>
        <IconCom
          onClick={() => {
            setOpen(true);
          }}
        >
          <Edit />
        </IconCom>
      </div>
    </>
  );
};