import type { RefObject } from "react";
import { useState, useEffect } from "react";
import { useListeners } from "./useListeners";
import { constants } from "../../constants";

/**
 * Получает результат отправки формы
 * @template T - тип данных ответа, который приходит в `detail.resp` после отправки формы.
 * @returns {{
 *   resp: T
 * }} Возвращает объект с полем `resp`: `null` до события отправки или значение ответа формы после события.
 * @example
 * import { useRef } from "react";
 * import { useFormResponse } from "@delement/ui/utils/react";
 * import { Form, FormRow, FormCol, Btn, Input } from "@delement/ui/components";
 *
 * const App = () => {
 *
 *   const formRef = useRef(null);
 *   const { resp } = useFormResponse(formRef); // `null` либо результат запроса
 *
 *   return <Form ref={formRef}>
 *       <FormRow>
 *         <FormCol>
 *           <Input name={"test1"} value={"value1"}/>
 *         </FormCol>
 *       </FormRow>
 *       <FormRow>
 *         <FormCol>
 *           <Btn label={"Отправить"} type={"submit"}/>
 *         </FormCol>
 *       </FormRow>
 *    </Form>
 * }
 */
export const useFormResponse = <T = unknown>(ref: RefObject<unknown>): {
  resp: T | null;
} => {

  const [ resp, setResp ] = useState<T | null>(null);

  const onDone = ({ detail }: { detail: {
    resp: T | null;
  }; }) => setResp(detail.resp);

  useListeners<CustomEvent<{ resp: T | null; }>>({
    listeners: {
      [constants.formBubbles.formSuccess]: onDone,
      [constants.formBubbles.formError]: onDone,
    },
    ref,
  });

  useEffect(() => {
    return () => {
      setResp(null);
    };
  }, []);

  return { resp };
};