import { Fragment, ReactNode } from "react";

import { ConvertContext } from "./context";

type SwapRenderProps = {
  onSwap: () => void;
};

interface ConvertSwapperProps {
  render: (props: SwapRenderProps) => ReactNode;
}

export const ConvertSwapper = ({ render }: ConvertSwapperProps) => {
  const { fromAsset, toAsset } = ConvertContext.useWatch();
  const { clearErrors, setValue } = ConvertContext.useFormContext();

  const onSwap = () => {
    clearErrors();

    setValue("fromAsset", toAsset);
    setValue("toAsset", fromAsset);
    setValue("fromAmount", null);
    setValue("toAmount", null);
    setValue("price", null);
  };

  return <Fragment>{render({ onSwap })}</Fragment>;
};