import React, { Component } from "react";
import { List, Map, is } from "immutable";
import { StoreProvider } from "plume2";
import { configOrderUtil } from "@qianmi/x-site-core";
import "./index.less";
import Editor from "./component/Editor";
import AppStore from "./store";

export { default as DataDialog } from "./component/dialog";

export type ConfigOrder = Map<string, object> | List<object>;

export interface EditorProps {
  mode: string; // "dev" | "edit" | "view";
  barInfos: any[];
  configOrder: ConfigOrder;
  platform: string; // (尽量去除)
  editorType: string; //'pc'|'weixin'
  wrapper?: React.ReactNode;
  dialog?: React.ReactNode;
  outerStyle?: React.CSSProperties;
  header?: React.ReactNode; // (尽量去除)
  setting?: List<object>;
  onChange?(configOrder: ConfigOrder): void; // 对外的回调函数
  onChooseImage?(...args: any[]): Promise<any>; // 图片弹框
  // onChooseLink?(...args: any[]): Promise<any>; // 链接弹框
  loadBarList(key): Promise<any>; // import or fetch
  getWidgetInfo(key): Promise<any>; // import or fetch
  dataCenter: any;
}

/**
 *  建站编辑器
 *  核心：ConfigOrder编辑
 */
@StoreProvider(AppStore)
export default class XSiteEditorApp extends Component<EditorProps, any> {
  private store: AppStore;

  static defaultProps: Partial<EditorProps> = {
    mode: "edit",
    setting: List(),
  };

  constructor(props: EditorProps) {
    super(props);
  }
  componentDidMount() {
    //初始化添加组件框是否展示 FIXME: 特殊逻辑
    this.store.onlyHeadOrFoot() && this.store.showSelectBox();
  }
  async componentWillMount() {
    const { configOrder } = this.props;
    this.store.init(this.props);
    const widgetNameList = configOrderUtil.getWidgetNames(configOrder.toJS());
    await this.props.loadBarList(widgetNameList);
  }

  shouldComponentUpdate(nextProps, nextState) {
    // FIXME: props/nextProps 不更新.why?
    const configOrder = this.store.state().get("configOrder");
    // console.log("store", configOrder.get("children").size);
    // console.log("props", this.props.configOrder.get("children").size);
    // console.log("nextProps", nextProps.configOrder.get("children").size);
    return !is(nextProps.configOrder, configOrder);
  }

  componentWillUpdate(nextProps, nextState) {
    const { onChange } = this.props;
    const configOrder = this.store.state().get("configOrder");
    typeof onChange === "function" && onChange(configOrder);
  }

  render() {
    return <Editor />;
  }
}