import { useBuilder, useEditor } from '@tempi/core-editor';
import {
  DEFAULT_WEBSITE_HEADER,
  WebsiteHeaderEditor,
} from '@tempi/core-elements';
import { formatImageUrlQuality, ROOT } from '@tempi/core-renderer';
import { Image } from 'antd';
import defaultImage from 'assets/images/default_image.jpg';
import React from 'react';
import { StyledCard, StyledMasonry } from './common';
import { ImagePlaceholder } from './ImagePlaceholder';
import TopBanner_OneImage from './pre-build/top-banner/TopBanner_OneImage';
import { showExistBlockReplaceConfirmModal } from './utils/block';
import {
  getWebsiteFooter1,
  getWebsiteFooter2,
  getWebsiteFooter3,
} from './pre-build/website-footer';
import { BLOCK_TYPES } from '@tempi/types/pb';

interface GlobalBlockSelectProps {
  blockType: string;
}

const TOP_BANNER_THUMBNAIL =
  'https://lh3.googleusercontent.com/mdxIH4waD2N-dxAMmEhuyz2DKmYoswjZQS1EoMIRTzjgK7_T5XPD6j1SvnQw6EC4BAij0tT0nGlzp6nogfq42R1KTN_e4NPC';

export const GlobalBlockSelect: React.FC<GlobalBlockSelectProps> = ({
  blockType,
}) => {
  const { query, actions } = useEditor();
  const { isGlobalWebsite } = window?.config || {};

  const mappingTypesToBlocks: {
    [key: string]: {
      blocks: {
        thumbnailUrl?: string;
        selector?: React.ReactElement;
      }[];
      insertIndex?: number;
      limitedElements?: number;
      hasChildren?: boolean;
    };
  } = {
    TOP_BANNER: {
      blocks: [
        {
          thumbnailUrl: TOP_BANNER_THUMBNAIL,
          selector: TopBanner_OneImage(),
        },
      ],
      insertIndex: 0,
      hasChildren: true,
    },
    HEADER: {
      blocks: [
        {
          thumbnailUrl: isGlobalWebsite
            ? 'https://lh3.googleusercontent.com/nImpmW6Zd8xNOUvxB3qsYVpUvL6_ZS5z6h1kEVNCQeBoMq9h3Nq0H4YBonodCObPYvANdg1IoHN2oZKQbYjYSr9zZsK1RLkA'
            : 'https://lh3.googleusercontent.com/E4N1Brq_42P6i1fdbIrmeucpjSxxIu0gEiwt_Uqmm2zl6bT27XxWDxUZb00bO9v1LQGWIlsFaO8aaSmkuFCKoPQZmyD8rg6E0A',
          selector: <WebsiteHeaderEditor {...DEFAULT_WEBSITE_HEADER} />,
        },
      ],
      insertIndex: 0,
      hasChildren: false,
    },
    FOOTER: {
      blocks: isGlobalWebsite
        ? [
            {
              thumbnailUrl:
                'https://lh3.googleusercontent.com/jG4kucWVYvbivrxBN1HSefxZ4UO0WEo56Ry5oZdDNUanoioW70OiiOiFRFTTLuqFKDicK4XqNFr-0jcUeB61XDNst9uPRplD',
              selector: getWebsiteFooter3(),
            },
          ]
        : [
            {
              thumbnailUrl:
                'https://lh3.googleusercontent.com/rWOHHJcOaB6lGo5cjOYncLx7hZIscMB1DHpaSTDa-bDuPBvzf2NNTAasM4wzQQL5ip1uhnPz_fQZ-xVY8tmhlb58oiPIVWa1=rw-w0',
              selector: getWebsiteFooter2(),
            },
            {
              thumbnailUrl:
                'https://lh3.googleusercontent.com/OhDNRZ9mRuE2qhDmbh7meliZD0Qz_jEQnEhRHaiw_GhSK_KIyYHB1knV7C2sUZiP7WzdET4Bo0P4EVLMGzQGW6fT15IgWM96eQ=rw-w0',
              selector: getWebsiteFooter1(),
            },
          ],
      hasChildren: true,
    },
  };

  const {
    blocks,
    insertIndex: indexInsertConfig,
    limitedElements = 1,
    hasChildren,
  } = mappingTypesToBlocks[blockType] || {};

  const { setShowModalSelectBlock } = useBuilder();

  const onSelectBlock = (element: React.ReactElement) => {
    let newNodeTree;
    let insertIndex = indexInsertConfig;
    const BLOCK_KEY =
      {
        HEADER: 'HEADER',
        FOOTER: 'FOOTER',
        TOP_BANNER: 'TOP_BANNER',
      }[blockType] || '';

    // --- Set id for the node tree ( such as "HEADER", "FOOTER" , etc...)
    if (hasChildren) {
      // If the block has children, we need to set id for the first node only
      let isFirstNode = true;
      newNodeTree = query.parseReactElement(element).toNodeTree((node) => {
        if (isFirstNode) {
          isFirstNode = false;
          node.id = BLOCK_KEY;
        }
      });
    } else {
      newNodeTree = query.parseReactElement(element).toNodeTree((node) => {
        node.id = BLOCK_KEY;
      });
    }

    const { rootNodeId } = newNodeTree;
    const newNode = newNodeTree.nodes[rootNodeId];
    const { nodes } = query.node(ROOT).get().data;

    /**
     * If the block is HEADER, we need to insert it after the TOP_BANNER block
     */

    if (blockType === BLOCK_TYPES.HEADER) {
      if (nodes.includes(BLOCK_TYPES.TOP_BANNER)) {
        insertIndex = 1;
      }
    }

    /** Check if the block is already exist in the page */

    const existElements = nodes.filter((id) => {
      const nodeData = query.node(id).get().data;
      return (
        nodeData.props?.blockType === newNode.data.props?.blockType &&
        nodeData.custom.tag === 'globalblock' &&
        id !== rootNodeId
      );
    });

    if (existElements.length >= limitedElements || nodes.includes(BLOCK_KEY)) {
      showExistBlockReplaceConfirmModal(blockType, () => {
        const removedElement =
          existElements[existElements.length - 1] || BLOCK_KEY;
        actions.history.throttle().delete(removedElement);
        actions.history.throttle().addNodeTree(newNodeTree, ROOT, insertIndex);
        setShowModalSelectBlock(false);
      });

      return;
    }

    actions.addNodeTree(newNodeTree, ROOT, insertIndex);

    setShowModalSelectBlock(false);
  };

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