import { Page, useResolver } from '@tempi/editor-site';
import { useEffect, useState } from 'react';
import { getCustomElementEditor } from './useCustomComponent';

export const useLoadResolver = ({ currentPage }: { currentPage: Page }) => {
  const [loadedResolver, setLoadedResolver] = useState(false);
  const { resolver, addResolver } = useResolver();
  useEffect(() => {
    const loadResolvers = async () => {
      setLoadedResolver(false);
      const newResolversConfig = Object.values(currentPage?.content || {})
        .map((el: any) => {
          if (el.tag !== 'customelement') return null;
          const id = (el.customAttributes as any).customelement
            .customId as number;
          if (!id || el.resolvedName in resolver) return null;
          return {
            id: id,
            resolvedName: el.resolvedName,
          };
        })
        .filter(Boolean);
      const resolversFn = newResolversConfig.map(({ id, resolvedName }) => {
        return getCustomElementEditor(id)
          .then((el) => ({ [resolvedName]: el }))
          .catch(() => null);
      });
      const newResolvers = (await Promise.all(resolversFn))
        .filter(Boolean)
        .reduce((acc, curr) => {
          return { ...acc, ...curr };
        }, {});

      if (Object.keys(newResolvers).length) {
        addResolver(newResolvers);
      }
      setTimeout(() => {
        setLoadedResolver(true);
      }, 0);
    };

    if (currentPage?.id) {
      loadResolvers();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentPage?.id]);

  return {
    loadedResolver,
  };
};