import { FC, useCallback, useState } from "react";
import IconCom from "@icons/IconCom";
import { Edit } from "@icons/Edit";
import * as React from "react";
import { PositionDeliveryModal } from "../../../index";
import { ESide } from "@utils/contractRules";
import { toDefaultNumber } from "@utils/FormatNumber";

export interface PositionColumnsDeliveryProps {
  value: string | number;
  symbol: string;
  level: number | string;
  avgEntryPrice: string | number;
  tickSizeScale: number;
  positionAmt: string | number;
  ctVal: string;
  ctValScale: number;
  costSizeScale: number;
}
export const PositionColumnsDelivery: FC<PositionColumnsDeliveryProps> = props => {
  const { value, symbol, level, avgEntryPrice, tickSizeScale, positionAmt, ctVal, ctValScale, costSizeScale } = props;
  const [open, setOpen] = React.useState(false);
  const onClose = useCallback(() => setOpen(false), []);
  const [initProfitValue, setInitProfitValue] = useState(21000.1234);
  const [initLossValue, setInitLossValue] = useState(16219.2241);

  return (
    <>
      <PositionDeliveryModal
        open={open}
        onClose={onClose}
        initProfitValue={initProfitValue}
        symbol={symbol}
        level={toDefaultNumber(level)}
        side={ESide.LONG}
        avgEntryPrice={toDefaultNumber(avgEntryPrice)}
        tickSizeScale={tickSizeScale}
        newestPrice={``}
        positionAmt={positionAmt}
        ctVal={ctVal}
        ctValScale={ctValScale}
        costSizeScale={costSizeScale}
        profitCancelAction={() => {
          setInitProfitValue(0);
        }}
        initLossValue={initLossValue}
        lossCancelAction={() => {
          setInitLossValue(0);
        }}
        onConfirm={o => {
          onClose();
          console.log(o);
          setInitProfitValue(o.profitV);
          setInitLossValue(o.lossV);
        }}
      />
      <div className={`flex items-center`}>
        <span>{value}</span>
        <IconCom
          onClick={() => {
            setOpen(true);
          }}
        >
          <Edit />
        </IconCom>
      </div>
    </>
  );
};