import Decimal from "decimal.js";
import { ControllerRenderProps } from "react-hook-form";
import { selectedSymbolStore } from "../../../../store";
import { useOrderPlacingError } from "../../../useOrderPlacingError";
import { useStepSize } from "../../../useStepSize";
import { BuyForm, OcoOrderValues } from "../types";

const ControllerTotal = ({
  render,
}: {
  render: (state: {
    field: ControllerRenderProps<OcoOrderValues, "total">;
  }) => any;
}) => {
  const { selectedSymbol } = selectedSymbolStore.useState();

  const {
    setValue: buySetValue,
    getValues,
    trigger,
  } = BuyForm.useFormContext();

  const { toStepSize } = useStepSize(selectedSymbol?.symbol, "limit");

  const { getTotalError } = useOrderPlacingError();

  return (
    <BuyForm.Controller
      name="total"
      rules={{
        validate: {
          check: (value) => {
            const { limit, price, amount, stopPrice } = getValues();
            if (!price || !stopPrice || !limit || !amount) {
              return;
            }

            return getTotalError({
              symbol: selectedSymbol?.symbol,
              side: "Buy",
              price: Math.max(Number(limit), Number(price)),
              total: Number(value),
            });
          },
        },
      }}
      render={({ field: { onChange, ...rest } }) =>
        render({
          field: {
            onChange: (_value) => {
              const { limit } = getValues();

              buySetValue(
                "amount",
                limit && _value
                  ? toStepSize(new Decimal(_value).div(Number(limit)))
                  : "",
              );

              onChange(_value);

              trigger(["amount", "total"]);
            },
            ...rest,
          },
        })
      }
    />
  );
};

export { ControllerTotal };