import { StyledCard, StyledMasonry } from './common';
import { LayoutSelect } from './LayoutSelect';
import { Image } from 'antd';
import { ImagePlaceholder } from './ImagePlaceholder';
import { MenuKeyPrefix } from './constants';
import { GlobalBlockSelect } from './GlobalBlockSelect';
import { ElementBlockSelect } from './ElementBlockSelect';
import {
  formatImageUrlQuality,
  PageBuilderResponse,
} from '@tempi/core-renderer';
import defaultImage from 'assets/images/default_image.svg';
import { Block } from '@tempi/editor-site';
import {
  deserializePB,
  SerializedNodes,
  useBuilder,
  useEditor,
} from '@tempi/core-editor';
import { useBlocksForEditor, useSelectBlock } from './hooks';

export const RenderBlockSelection = ({
  selectedMenu,
  setLoading,
  blocks,
}: {
  selectedMenu: string;
  setLoading: React.Dispatch<React.SetStateAction<boolean>>;
  blocks: Block[];
}) => {
  const { findIndexInsert, getInsertDestination } = useSelectBlock();
  const { addBlock } = useEditor();
  const { setShowModalSelectBlock: setVisible, setInsertIndex } = useBuilder();
  const { fetchBlockData } = useBlocksForEditor();
  const onSelectBlock = (data?: PageBuilderResponse) => {
    if (!!data) {
      const indexInsert = findIndexInsert();
      addBlock(
        deserializePB(data) as SerializedNodes,
        indexInsert,
        getInsertDestination(),
      );
      setInsertIndex(undefined);
      setVisible(false);
    }
  };

  const handleSelectBlock = async (id?: number) => {
    if (!!id) {
      try {
        setLoading(true);
        const data = await fetchBlockData(id);
        onSelectBlock(data);
        setVisible(false);
      } finally {
        setLoading(false);
      }
    }
  };

  if (selectedMenu === 'layout') return <LayoutSelect />;

  /**
   * Guide: Add more block selection here
   */

  if (selectedMenu.includes(MenuKeyPrefix.Tempi))
    return (
      <StyledMasonry columns={2}>
        {blocks.map((block) => (
          <StyledCard
            key={block?.id}
            hoverable
            cover={
              <Image
                alt="example"
                src={
                  block?.thumbnailUrl
                    ? formatImageUrlQuality(block?.thumbnailUrl)
                    : defaultImage
                }
                preview={false}
                placeholder={<ImagePlaceholder src={block?.thumbnailUrl} />}
              />
            }
            onClick={() => handleSelectBlock(block?.id)}
            bodyStyle={{ padding: 0 }}
          />
        ))}
      </StyledMasonry>
    );

  if (selectedMenu.includes(MenuKeyPrefix.Global))
    return (
      <GlobalBlockSelect
        blockType={selectedMenu.replace(MenuKeyPrefix.Global, '')}
      />
    );

  if (selectedMenu.includes(MenuKeyPrefix.Element))
    return (
      <ElementBlockSelect
        type={selectedMenu.replace(MenuKeyPrefix.Element, '')}
      />
    );

  return null;
};