import { ReactNode } from "react";
import { ControllerRenderProps } from "react-hook-form";

import { useTranslation } from "react-i18next";
import { useOrderPlacingError } from "../useOrderPlacingError";
import { ConvertContext, ConvertFormProps } from "./context";
type ConvertPriceRenderProps = {
  render: (state: {
    field: ControllerRenderProps<ConvertFormProps, "price"> & {
      toAsset?: string;
      hasError?: boolean;
    };
  }) => React.ReactElement;

  renderErrorComponent?: (message?: string) => ReactNode;
};

export const ConvertPriceController = ({
  render,
  renderErrorComponent,
}: ConvertPriceRenderProps) => {
  const { toAsset, fromAmount, fromAsset } = ConvertContext.useWatch();

  const { getPriceError } = useOrderPlacingError();

  const { errors } = ConvertContext.useFormState();

  const canThrowError =
    errors["price"] && fromAmount !== null && fromAmount !== undefined;
  const { t } = useTranslation();

  return (
    <>
      <ConvertContext.Controller
        name="price"
        rules={{
          validate: {
            amount: (value) => {
              if (!value) {
                return t("enterPrice");
              }
              return getPriceError({
                price: Number(value),
                symbol: toAsset,
              });
            },
          },
        }}
        render={({ field: { onChange, value, ...rest } }) => {
          return render({
            field: {
              value: value,
              toAsset: fromAsset
                ? toAsset
                    ?.toLowerCase()
                    ?.replace(fromAsset.toLowerCase(), "")
                    .toUpperCase()
                : "",
              hasError: !!errors.price,
              onChange: (value) => {
                onChange(value ? value : "");
              },
              ...rest,
            },
          });
        }}
      />
      {renderErrorComponent &&
        renderErrorComponent?.(canThrowError ? errors["price"]?.message : "")}
    </>
  );
};