import { useState, useCallback, useEffect } from "react";
import axios from "axios";

export function useLink({ href }) {
  const [link, setLink] = useState("");

  const getLink = useCallback(async () => {
    if (!href) {
      return;
    }

    if (href.startsWith("http") || href.startsWith("/")) {
      setLink(href);
      return;
    }

    const [type, id] = href.split(":");
    setLink(`/${type}/${id}`);

    try {
      const { data } = await axios(`/api/${type}/${id}`);
      setLink(`/${type}/${data.attributes.slug}`);
    } catch (error) {
      // eslint-disable-next-line no-console
      console.error(error);
    }
  }, [href]);

  useEffect(() => {
    getLink();
  }, [href, getLink]);

  return link;
}