import { useCallback } from 'react';
import { popupApi } from '../utils/api';
import { useAllPopup } from './useAllPopups';
import { t } from '@tempi/editor-site';
const mapPopup = (popup) => {
  return {
    id: popup.id,
    name: popup.name,
    thumbnailUrl: popup.thumbnailUrl,
  };
};
export const usePopupsForEditor = () => {
  const { categories: popupCategories, popups } = useAllPopup();
  const fetchPopupData = useCallback(async (id) => {
    return popupApi.getPopup(id).then((data) => data?.data?.popup?.pbConfig);
  }, []);
  const convertAllPopupToPBECategory = useCallback(
    (categories, popups) => {
      if (!popups?.length) return [];
      const allCategory = {
        id: 0,
        name: t('Tất cả danh mục'),
        popups: popups.map(mapPopup),
      };
      const cookedCategories = categories
        .map(({ id, name }) => {
          const currPopups = popups.filter(({ categoryIds = [] }) =>
            categoryIds.includes(id),
          );
          return {
            id,
            name,
            popups: currPopups.map(mapPopup),
          };
        })
        .filter((el) => el.popups.length);
      return [allCategory, ...cookedCategories];
    },
    // eslint-disable-next-line
    []
  );
  return {
    fetchPopupData,
    dataSelectPopup: convertAllPopupToPBECategory(popupCategories, popups),
  };
};