import React, { useMemo } from 'react';
import editData from '@/pages/edit.data.json';
import { ReactVisualBlock, ReactVisualEditorValue, ReactVisualEditorBlock } from 'hlp-editor-demo';
import useState from 'react-usestateref';
import { getData } from './../requests/example';
import { visualConfig } from './visual.config';
export const VisualExhibition:React.FC<{value:ReactVisualEditorValue}> =(props) => {
  const [editorValue, setEditorValue] = useState(props.value);

  /**
   * container dom对象的样式
   */
  const containerStyles = useMemo(() => {
    return {
      height: editorValue.container.height,
      width: editorValue.container.width,
      background: editorValue.container.backgroundImage
        ? `url('${editorValue.container.backgroundImage}')`
        : editorValue.container.background,
    };
  }, [
    editorValue.container.height,
    editorValue.container.width,
    editorValue.container.backgroundImage,
    editorValue.container.themeColor,
  ]);

  return (
    <div style={containerStyles}>
      {editorValue.blocks.map((block: ReactVisualEditorBlock, index) => (
        <ReactVisualBlock
          key={index}
          block={block}
          config={visualConfig}
          click={(pro: any) => {
            pro &&
              pro['jumpUrl'] &&
              getData(pro['jumpUrl']).then((res) => {
                if (res) {
                  setEditorValue({ ...res });
                }
              });
          }}
        />
      ))}
    </div>
  );
};