import { Image } from 'antd';
import React from 'react';
import { Element, useBuilder, useEditor } from '@tempi/core-editor';
import {
  DEFAULT_HEADER,
  HeaderEditor,
  LogoEditor,
  MenuColEditor,
  MenuEditor,
  MenuItemEditor,
} from '@tempi/core-elements';
import { ROOT, formatImageUrlQuality } from '@tempi/core-renderer';
import defaultImage from 'assets/images/default_image.svg';
import { StyledCard, StyledMasonry } from './common';
import { useSelectBlock } from './hooks';
import { ImagePlaceholder } from './ImagePlaceholder';

export enum ElementBlockType {
  HEADER = 'HEADER',
}

interface ElementBlockSelectProps {
  type: string;
}

export const ElementBlockSelect: React.FC<ElementBlockSelectProps> = ({
  type,
}) => {
  const mappingTypeToBlocks: {
    [key: string]: {
      thumbnailUrl: string;
      selector: React.ReactElement;
    }[];
  } = {
    [ElementBlockType.HEADER]: [
      {
        thumbnailUrl:
          'https://lh3.googleusercontent.com/TlAVCBQRSm06hwV3uNEUd7CFs5Pr4J-OX63vYVHoW94QD5ta9Pw1tvI3qhvdjrcCKuuIJjnJIYQNYX39kZN62E46sLAd25WK',
        selector: (
          <Element is={HeaderEditor} {...DEFAULT_HEADER.header}>
            <Element is={LogoEditor} {...DEFAULT_HEADER.logo} />
            <MenuEditor>
              <Element canvas is={MenuColEditor} type="left">
                {DEFAULT_HEADER.centerMenuItems.map((menuItem, index) => (
                  <MenuItemEditor key={index} {...menuItem} />
                ))}
              </Element>
              <Element canvas is={MenuColEditor} type="right">
                {DEFAULT_HEADER.rightMenuItems.map((menuItem, index) => (
                  <MenuItemEditor key={index} {...menuItem} />
                ))}
              </Element>
            </MenuEditor>
          </Element>
        ),
      },
    ],
  };
  const blocks = mappingTypeToBlocks[type];

  const { setShowModalSelectBlock } = useBuilder();

  const { findIndexInsert } = useSelectBlock();

  const { query, actions } = useEditor();

  const onSelectBlock = (element: React.ReactElement) => {
    const insertIndex = findIndexInsert();
    const newNodeTree = query.parseReactElement(element).toNodeTree();

    actions.addNodeTree(newNodeTree, ROOT, insertIndex);

    setShowModalSelectBlock(false);
  };

  if (!blocks?.length) return null;

  return (
    <StyledMasonry columns={2}>
      {blocks?.map(({ selector, thumbnailUrl }, index) => (
        <StyledCard
          key={index}
          hoverable
          cover={
            <Image
              alt="example"
              src={
                thumbnailUrl
                  ? formatImageUrlQuality(thumbnailUrl)
                  : defaultImage
              }
              preview={false}
              placeholder={<ImagePlaceholder src={thumbnailUrl} />}
            />
          }
          onClick={() => onSelectBlock(selector)}
          bodyStyle={{ padding: 0 }}
        />
      ))}
    </StyledMasonry>
  );
};