import useSWR from 'swr';
import { Image } from 'antd';
import { useAuth } from '@tempi/auth';
import { componentApi, MAPPING_CATEGORY } from '@tempi/editor-site';
import {
  __federation_method_setRemote,
  __federation_method_getRemote,
  __federation_method_unwrapDefault,
} from '__federation__';

export const getModule = async (
  scope: string,
  url: string,
  element: string,
) => {
  try {
    await __federation_method_setRemote(scope, {
      url: () => Promise.resolve(url),
      format: 'esm',
      from: 'vite',
    });
    const moduleWrapper = await __federation_method_getRemote(scope, element);
    const module = await __federation_method_unwrapDefault(moduleWrapper);
    return module;
  } catch (e) {
    console.error(e);
  }
};

export const getCustomElementEditor = async (id: number) => {
  const { cdnBaseUrl } = window?.config || {};
  const CustomElementEditor = await getModule(
    `bundle_${id}_latest.js`,
    `${cdnBaseUrl}/bundle_${id}_latest.js`,
    './selector',
  );
  CustomElementEditor.craft = {
    ...CustomElementEditor.craft,
    props: {
      ...(CustomElementEditor.craft.props || {}),
      customId: id,
    },
    custom: {
      ...(CustomElementEditor.craft.custom || {}),
      tag: `customelement`,
    },
    displayName: CustomElementEditor.craft.displayName,
  };
  return CustomElementEditor;
};

export const useCustomComponent = () => {
  const { merchantIdsDisplayCustomComponent = [] } = window?.config || {};
  const { currentMerchant } = useAuth();
  const isMerchantPermitted =
    merchantIdsDisplayCustomComponent.length === 0 ||
    merchantIdsDisplayCustomComponent.includes(currentMerchant?.id);
  const { data, mutate, error } = useSWR(
    isMerchantPermitted ? 'v1/components' : null,
    async () => {
      const res = await componentApi.getListComponent({
        offset: 0,
        limit: 200,
        isShow: true,
      });
      const listComponents = res?.components;
      const customComponents = [];
      const resolvers = {};

      const getCustomElementsFn = listComponents.map((el) => {
        return getCustomElementEditor(el.id)
          .then((editor) => ({
            element: el,
            editor,
          }))
          .catch(() => null);
      });
      const selectors = (await Promise.all(getCustomElementsFn)).filter(
        Boolean,
      );

      selectors.forEach(({ element, editor: CustomElementEditor }) => {
        resolvers[`CustomElement${element.id}`] = CustomElementEditor;
        const fetchedElement = {
          category: [MAPPING_CATEGORY[element.categoryId]],
          icon: (
            // eslint-disable-next-line react/jsx-no-undef
            <Image
              height={20}
              width={20}
              preview={false}
              style={{ marginBottom: 8 }}
              src={element.iconUrl}
            />
          ),
          selector: <CustomElementEditor />,
          key: `CUSTOM_ELEMENT_${element.id}`,
          name: element.name,
          trackingContentName: element.name,
        };
        customComponents.push(fetchedElement);
      });

      return {
        customComponents,
        resolvers,
      };
    },
    {
      revalidateOnFocus: false,
    },
  );

  return {
    customLoaded: isMerchantPermitted ? data && !error : true,
    customComponents: data?.customComponents || [],
    mutateComponent: mutate,
    resolvers: data?.resolvers || {},
  };
};