import { useState, useEffect } from 'react';
import axios from 'axios';

export function useForm(initalValues: any, callback: () => {}) {
  const [values, setValues] = useState(initalValues);

  const handleSubmit = event => {
    if (event) {
      event.preventDefault();
    }
    callback();
  };

  const handleChange = event => {
    event.persist();
    setValues(values => ({
      ...values,
      [event.target.name]: event.target.value
    }));
  };

  return {
    handleChange,
    handleSubmit,
    values
  };
}

export function useAsyncEndpoint(fn) {
  const [res, setRes] = useState({
    complete: false,
    data: null,
    error: false,
    pending: false
  });
  const [req, setReq] = useState();

  useEffect(() => {
    if (!req) {
      return;
    }
    setRes({
      complete: false,
      data: null,
      error: false,
      pending: true
    });
    axios(req)
      .then(res =>
        setRes({
          complete: true,
          data: res.data,
          error: false,
          pending: false
        })
      )
      .catch(() =>
        setRes({
          complete: true,
          data: null,
          error: true,
          pending: false
        })
      );
  }, [req]);

  return [res, (...args) => setReq(fn(...args))];
}