import { ReactVisualEditorProps } from './ReactVisualEditor.props';
export interface ReactVisualEditorBlock {
  componentKey: string; // component对象的key，通过这个来找到visual config中的component
  top: number; // block元素的top定位
  left: number; // block元素的let定位
  height: number; // block元素高度
  width: number; // block元素宽度
  adjustPosition: boolean; // block元素是否需要调整位置
  focus: boolean; // 当前是否被选中
  zIndex: number; // block元素的zIndex的style属性
  hasResize: boolean; // block是否曾经调整过大小
  props?: Record<string, any>; // 编辑器的用户，给这个block组件自定义的属性值
  model?: Record<string, string>; // 绑定值
  slotName?: string; // 组件标识
  option?: {};
}
/**
 * 组件类型
 */
export enum ElementType{
  BASE_ELEMENT='基本类型组件',//基本类型组件
  ECHARTS_ELEMENT='图表组件',//图表组件
  DECORATE_ELEMENT='装饰类组件',//装饰类组件
  TABLE_ELEMENT='表格类组件'//表格类组件
  
}

/**
 * 编辑器编辑的数据类型
 */
export interface ReactVisualEditorValue {
  container: {
    height: number; // 容器高度
    width: number; // 容器宽度
    background?: any; //背景色
    themeColor?: string; //主题色
    backgroundImage: string; //背景图片
  };
  blocks: ReactVisualEditorBlock[];
}

/**
 * 编辑器中预定义组件的类型
 */
export interface ReactVisualEditorComponent {
  key: string; // 组件唯一标识
  name: string; // 组件预览显示名称
  type:ElementType//组件类型
  preview: () => JSX.Element; // 组件预览内容
  render: (data: {
    block: ReactVisualEditorBlock;
    size: { height?: string; width?: string };
    props: Record<string, any>;
    model: Record<string, any>;
    custom: Record<string, any>;
  }) => JSX.Element; // 组件渲染内容
  resize?: {
    height?: boolean; // 是否可以拖拽高度
    width?: boolean; // 是否可以拖拽宽度
  };
  option?: {};
  props?: { [k: string]: ReactVisualEditorProps };
  model?: { [k: string]: string };
}

/**
 * 创建一个block数据
 */
export function createVisualBlock({
  top,
  left,
  component,
}: {
  top: number;
  left: number;
  component: ReactVisualEditorComponent;
}): ReactVisualEditorBlock {
  return {
    componentKey: component.key,
    top,
    left,
    adjustPosition: true,
    focus: false,
    zIndex: 0,
    width: 0,
    height: 0,
    hasResize: false,
  };
}

/**
 * 创建一个编辑器预设配置信息对象
 */
export function createVisualConfig() {
  /*用于block数据，通过 componentKey找到这个component对象，使用component对象的render属性渲染内容到container容器里边*/
  const componentMap: { [k: string]: ReactVisualEditorComponent } = {};
  /*用户在menu中渲染预定义的的组件列表*/
  const componentArray: ReactVisualEditorComponent[] = [];

  /**
   * 注册一个组件
   */
  function registryComponent<
    _,
    Props extends { [k: string]: ReactVisualEditorProps } = {},
    Model extends { [k: string]: string } = {},
    __ = {},
  >(
    key: string,
    option: {
      type:ElementType//组件分类
      name: string; // 组件预览显示名称
      preview: () => JSX.Element; // 组件预览内容
      // 组件渲染内容
      render: (data: {
        block: ReactVisualEditorBlock;
        size: { height?: string; width?: string };
        props: { [k in keyof Props]: any };
        custom: Record<string, any>;
        model: {
          [k in keyof Model]: { value: any; onChange: (val: any) => void };
        };
      }) => JSX.Element;
      resize?: {
        height?: boolean; // 是否可以拖拽高度
        width?: boolean; // 是否可以拖拽宽度
      };
      props?: Props;
      model?: Model;
    },
  ) {
    if (componentMap[key]) {
      const index = componentArray.indexOf(componentMap[key]);
      componentArray.splice(index, 1);
    }
    const newComponent = {
      key,
      ...option,
    };
    componentArray.push(newComponent as any);
    componentMap[key] = newComponent as any;
  }

  return {
    componentMap,
    componentArray,
    registryComponent,
  };
}

export type ReactVisualEditorConfig = ReturnType<typeof createVisualConfig>;