import { MenuProps } from 'antd';
import { MenuItem, ModalBlockSelection } from './ModalBlockSelection';
import { RenderBlockSelection } from './RenderBlockSelection';
import { MenuKeyPrefix } from './constants';
import { useEffect, useMemo, useState } from 'react';
import { useBuilder } from '@tempi/core-editor';
import { Block, t } from '@tempi/editor-site';
import { useBlocksForEditor } from './hooks';
import { elementBlockTempi } from './common';

export const BlockSelection: React.FC<{
  extraTempiBlocks?: MenuItem[];
}> = ({ extraTempiBlocks = elementBlockTempi }) => {
  const [menuItems, setMenuItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const [selectedTempiCat, setSelectedTempiCat] = useState<number>();
  const [selectedMenu, setSelectedMenu] = useState('layout');
  const [blocks, setBlocks] = useState<Block[]>([]);
  const { showModalSelectBlock: visible, setShowModalSelectBlock: setVisible } =
    useBuilder();
  const { dataSelectBlock: categories } = useBlocksForEditor();
  useEffect(() => {
    if (categories.length > 0) {
      const cat =
        categories.find((el) => el.id === selectedTempiCat) || categories[0];
      setBlocks(cat.blocks);
    }
    // eslint-disable-next-line
  }, [selectedTempiCat, JSON.stringify(categories)]);
  useEffect(() => {
    if (categories.length > 0) {
      setSelectedTempiCat(categories[0].id);
    }
    // eslint-disable-next-line
  }, [JSON.stringify(categories)]);
  const onMenuSelected: MenuProps['onClick'] = (e) => {
    const selectedKey = e.key;
    setSelectedMenu(selectedKey);
    if (selectedKey.includes(MenuKeyPrefix.Tempi)) {
      setSelectedTempiCat(
        parseInt(selectedKey.slice(MenuKeyPrefix.Tempi.length)),
      );
    }
  };
  const tempiBlockCategoriesItem: MenuItem[] = useMemo(
    () => [
      {
        key: 'layout',
        label: t('Bố cục'),
      },
      ...extraTempiBlocks,
      ...categories.map((cate) => ({
        key: `${MenuKeyPrefix.Tempi}${cate.id}`,
        label: cate.name,
      })),
    ],
    // eslint-disable-next-line
    [JSON.stringify(categories)],
  );
  useEffect(() => {
    setMenuItems(tempiBlockCategoriesItem);
    // eslint-disable-next-line
  }, [tempiBlockCategoriesItem]);
  return (
    <>
      <ModalBlockSelection
        {...{
          visible,
          setVisible,
          loading,
          selectedMenu,
          setSelectedMenu,
          menuItems,
          onMenuSelected,
          renderRightWrapper: () => (
            <RenderBlockSelection {...{ selectedMenu, setLoading, blocks }} />
          ),
        }}
      />
    </>
  );
};