import { t } from '@tempi/editor-site';
import styled from '@emotion/styled';
import { useBuilder, useEditor, useNode } from '@tempi/core-editor';
import { RootEditor as BaseRootEditor } from '@tempi/core-elements';
import { Button, Image, Space, Typography } from 'antd';
import React, { useEffect, useMemo } from 'react';
import robot from 'assets/images/loading_builder.svg';
const { Title } = Typography;
const DefaultSection: React.FC<{
  onClick: () => void;
  title: string;
}> = ({ onClick, title }) => {
  return (
    <Wrapper>
      <Title level={4} style={{ marginBottom: 24 }}>
        {title}
      </Title>
      <Image
        style={{ marginBottom: 24 }}
        width={200}
        src={robot}
        preview={false}
      />
      <Space>
        <Button shape="round" type="primary" onClick={onClick}>
          {t('common.add_block')}
        </Button>
      </Space>
    </Wrapper>
  );
};
export interface RootProps {
  children?: React.ReactNode;
  title?: string;
}
export const RootEditor = ({
  children,
  title = t('common.builder_desc'),
  ...rest
}: RootProps) => {
  const { actions } = useEditor();
  const { childNodes } = useNode((node) => ({
    childNodes: node.data.nodes,
  }));
  useEffect(() => {
    actions.selectNode('ROOT');
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const { setShowModalSelectBlock } = useBuilder();
  const showRobots = useMemo(() => {
    return !childNodes?.length;
  }, [childNodes]);

  return (
    <BaseRootEditor {...rest}>
      {children}
      {showRobots && (
        <DefaultSection
          key="default-section"
          title={title}
          onClick={() => setShowModalSelectBlock(true)}
        />
      )}
    </BaseRootEditor>
  );
};
RootEditor.craft = BaseRootEditor.craft;
const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  max-width: 856px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20%;
  margin-top: 10%;
`;