import { Element, useBuilder, useEditor } from '@tempi/core-editor';
import { getColWidthProps, RowEditor, ColEditor } from '@tempi/core-elements';
import { formatImageUrlQuality } from '@tempi/core-renderer';
import { Card, Col, Image, Row } from 'antd';
import { useSelectBlock } from './hooks/useSelectBlock';
import { nanoid } from 'nanoid';
import { ImagePlaceholder } from './ImagePlaceholder';

export interface LayoutElement {
  imageUrl: string;
  selector: React.ReactElement;
}

interface LayoutSelectProps {
  elements?: LayoutElement[];
}

export const LayoutSelect: React.FC<LayoutSelectProps> = ({
  elements = getLayouts(),
}) => {
  const { query, actions } = useEditor();
  const { setShowModalSelectBlock } = useBuilder();
  const { findIndexInsert } = useSelectBlock();

  const onSelectLayout = (element) => {
    const newNodeTree = query.parseReactElement(element).toNodeTree();
    const insertIndex = findIndexInsert();
    actions.addNodeTree(newNodeTree, 'ROOT', insertIndex);
    setShowModalSelectBlock(false);
  };

  return (
    <Row gutter={[24, 24]}>
      {elements.map((layout, index) => (
        <Col key={index} lg={4} md={6} xs={8}>
          <Card
            hoverable
            bodyStyle={{ padding: 0 }}
            bordered={false}
            key={nanoid()}
            onClick={() => onSelectLayout(layout.selector)}
          >
            <Image
              width="100%"
              preview={false}
              src={formatImageUrlQuality(layout.imageUrl)}
              placeholder={<ImagePlaceholder src={layout.imageUrl} />}
            />
          </Card>
        </Col>
      ))}
    </Row>
  );
};

const getLayouts = (): LayoutElement[] => {
  return [
    {
      imageUrl:
        'https://lh3.googleusercontent.com/6SMTwuxkMrCFjkgnZH_NhSGsYJRShcjNYM1hvZpHY2qXMbBWyMyTFlrozt-rXqO0d3Fqn5kifXR9pxT8TvSz3O5cOw16RFj5QQ',
      selector: (
        <Element canvas is={RowEditor}>
          <Element canvas is={ColEditor} {...getColWidthProps(12)} />
        </Element>
      ),
    },
    {
      imageUrl:
        'https://lh3.googleusercontent.com/LrcWPq4INH6UP-k9lGbBEzMaShpUJXREK9xLyFNHrCm6LtSsvb5Hm5IoFT8PgbfWGtRyUctKIvQ-zgCvQLTMB6bF-88I5P4l',
      selector: (
        <Element canvas is={RowEditor}>
          <Element canvas is={ColEditor} {...getColWidthProps(6)} />
          <Element canvas is={ColEditor} {...getColWidthProps(6)} />
        </Element>
      ),
    },
    {
      imageUrl:
        'https://lh3.googleusercontent.com/Ge64ssrAHahQfO8ip1clXlgSHT-KgfCNsbbwYtw2lTaIT-EsKu_K7mC00DDUiLTW6s-hKpb3YZaxocRiKmU5bp4539dDMzE',
      selector: (
        <Element canvas is={RowEditor}>
          <Element canvas is={ColEditor} {...getColWidthProps(4)} />
          <Element canvas is={ColEditor} {...getColWidthProps(4)} />
          <Element canvas is={ColEditor} {...getColWidthProps(4)} />
        </Element>
      ),
    },
    {
      imageUrl:
        'https://lh3.googleusercontent.com/s24yj2PPwfa2xNNrGc5uhy2tZgZdbKRAfrhdTqm8lO9tsuthygZRtSYbuA2SqxB_zMQ4NdfZHpkBV-FmKXnR-nkzuPUdUeLM',
      selector: (
        <Element canvas is={RowEditor}>
          <Element canvas is={ColEditor} {...getColWidthProps(3)} />
          <Element canvas is={ColEditor} {...getColWidthProps(3)} />
          <Element canvas is={ColEditor} {...getColWidthProps(3)} />
          <Element canvas is={ColEditor} {...getColWidthProps(3)} />
        </Element>
      ),
    },
    {
      imageUrl:
        'https://lh3.googleusercontent.com/lhFFHJDjqlMyvZeoKEqXYMggx7_95ls8YMiBJVPMO91TwJxPupAOqIrZ5_fW1CW8-WD6fKsEnAYMxstiAv1AZzLYR-mMJCWZ',
      selector: (
        <Element canvas is={RowEditor}>
          <Element canvas is={ColEditor} {...getColWidthProps(8)} />
          <Element canvas is={ColEditor} {...getColWidthProps(4)} />
        </Element>
      ),
    },
    {
      imageUrl:
        'https://lh3.googleusercontent.com/mN_1dbAJan_2bPOoVEiRKhXTY0j55yULAdScFdJrMvUxk7lTXZJGaeniCp2d5y8HBWA1sNx8eY_1uuxb3kuNstv5FPwM0eAp',
      selector: (
        <Element canvas is={RowEditor}>
          <Element canvas is={ColEditor} {...getColWidthProps(4)} />
          <Element canvas is={ColEditor} {...getColWidthProps(8)} />
        </Element>
      ),
    },
    {
      imageUrl:
        'https://lh3.googleusercontent.com/KTKq3PxhPONjO-XtJVfe1suwyDPBXqZZi3yedo9LOs0NdDQhvURpc282HmWylWECIf7e_2uCUOrOJyRiKCLvBCSOSm72Hhd51g',
      selector: (
        <Element canvas is={RowEditor}>
          <Element canvas is={ColEditor} {...getColWidthProps(3)} />
          <Element canvas is={ColEditor} {...getColWidthProps(6)} />
          <Element canvas is={ColEditor} {...getColWidthProps(3)} />
        </Element>
      ),
    },
    {
      imageUrl:
        'https://lh3.googleusercontent.com/N7pyKWHswt4N_VpVXAZliVQr7xKiGMDCyZ7Jam_CDtZkmg2tCQszFGYXV_BnvfKaMmKDT4B55dAvlcafoVQWQ9ZDE4qUYP2M',
      selector: (
        <Element canvas is={RowEditor}>
          <Element canvas is={ColEditor} {...getColWidthProps(3)} />
          <Element canvas is={ColEditor} {...getColWidthProps(3)} />
          <Element canvas is={ColEditor} {...getColWidthProps(6)} />
        </Element>
      ),
    },
    {
      imageUrl:
        'https://lh3.googleusercontent.com/ZGoMJzb4kH-CZ4DkfBGCFjYaN20DQMHkmY9R4S_OFYmKT_WwFAXijyIzXnyijV2v6z38L1dkUNM2dx5losjqTCZ-TIh7QflP',
      selector: (
        <Element canvas is={RowEditor}>
          <Element canvas is={ColEditor} {...getColWidthProps(6)} />
          <Element canvas is={ColEditor} {...getColWidthProps(3)} />
          <Element canvas is={ColEditor} {...getColWidthProps(3)} />
        </Element>
      ),
    },
    {
      imageUrl:
        'https://lh3.googleusercontent.com/TtWpYgj46b_7aytb59iyfph97Uu2PTC_x6GzFo460t9DqWyPR71f-EwUvExMQmIU4B2rpdgRXW8hsf8iwsEa7w40rnv7N8O2',
      selector: (
        <Element canvas is={RowEditor}>
          <Element canvas is={ColEditor} {...getColWidthProps(2)} />
          <Element canvas is={ColEditor} {...getColWidthProps(2)} />
          <Element canvas is={ColEditor} {...getColWidthProps(2)} />
          <Element canvas is={ColEditor} {...getColWidthProps(2)} />
          <Element canvas is={ColEditor} {...getColWidthProps(2)} />
          <Element canvas is={ColEditor} {...getColWidthProps(2)} />
        </Element>
      ),
    },
  ];
};