import { useCallback, useMemo } from 'react';
import { blockApi } from '../utils/api';
import { useAllBlock } from './useAllBlocks';
import { t } from '@tempi/editor-site';

const mapBlock = (block) => {
  return {
    id: block.id,
    name: block.name,
    thumbnailUrl: block.thumbnailUrl,
  };
};

export const useBlocksForEditor = () => {
  const { categories: blockCategories, blocks: allBlocks } = useAllBlock();

  const fetchBlockData = useCallback(async (id) => {
    return blockApi.getBlock(id).then((data) => data?.data?.block?.pbConfig);
  }, []);

  const categories = useMemo(
    () => {
      if (!allBlocks?.length) return [];

      const cookedCategories = blockCategories
        .map(({ id, name }) => {
          const currBlocks = allBlocks.filter(({ categoryIds = [] }) =>
            categoryIds.includes(id),
          );
          return {
            id,
            name: t(name),
            blocks: currBlocks.map(mapBlock),
          };
        })
        .filter((el) => el.blocks.length);

      return cookedCategories;
    },
    // eslint-disable-next-line
    [blockCategories, allBlocks]
  );

  return {
    fetchBlockData,
    dataSelectBlock: categories,
  };
};