import { Http } from "../Http";
import { List } from "../dataType/List";
import { ActiveList } from "./ActiveList";
import { Flow, Layout } from "./Layout";
import { Widget } from "./Widget";
/**
 * @class ui.Panel
 * @since ui
 */
export class Panel extends Widget {
  activeList: ActiveList; //组件列表
  layout: Layout = Layout.flow(); //布局,默认垂直流布局
  /**
   * @hideconstructor
   * @param {Array<Widget> | Widget} [widgets]  组件列表
   *  @param {Layout} [layout]  容器布局
   *  @param {object} [style]  组件样式
   * @return ui.Panel
   */
  constructor(
    widgets?: Array<Widget> | Widget,
    layout?: Layout,
    style?: object
  ) {
    let panel;
    if (typeof process === 'undefined') {
      //浏览器环境
      panel = document.createElement("div");
      panel.style.backgroundColor = 'white';
      panel.style.zIndex = '99';
      panel.classList.add("ui-panel");
    }
    else {
      style = null;
    }
    super(panel, style);
    if (!(this instanceof Panel)) {
      return new Panel(widgets, layout, style);
    }
    if (typeof process === 'undefined') {
      this.activeList = new ActiveList();
      if (widgets) {
        if (widgets["length"] > 0) {
          (widgets as Array<Widget>).forEach((element) => {
            this.add(element);
          });
        } else {
          this.add(widgets as Widget);
        }
      }
      this.setLayout(layout ?? this.layout);
    }
  }

  /**
   * 添加组件
   * @param {List} Widget 要添加的组件。
   * @return  ui.Panel
   */
  add(widget: Widget) {
    if (typeof process === 'undefined') {
      this.el.appendChild(widget.el);
      this.activeList.add(widget);
      this.event.emit("UIUpdate", 1);
      if (this.el.classList.contains('ui-root')) {
        Http.createUIMapSubject$.next(widget);
        //root的时候，返回code
        //  console.log('ui.root.add',widget['expressions']);
        if (!Http.isRunAddUICode) {
          Http.runDataSubject$.next({
            type: 'ui',
            content: Http.codeContent,
          });
          Http.isRunAddUICode = true;
        }

      }
      return this;
    }
  }

  /**
   * 清空panel
   * @return  {Boolean} Boolean
   */
  clear() {
    //清除所有组件
    if (typeof process === 'undefined') {
      console.log("清除Panel", this);
      let childNodes = this.el.childNodes;
      let rmvChild: any[] = [];
      childNodes.forEach((element) => {
        if (element["id"] == "uiMap") {
          (element as HTMLElement).style.display = "none";
        }
        else {
          rmvChild.push(element);
        }
      });
      rmvChild?.forEach((el) => { el.remove(); });
      this.activeList = new ActiveList();
    }
  }
  /**
   * 返回布局
   * @return ui.Layout
   */
  getLayout() {
    //获取布局
    return this.layout;
  }
  /**
   * 插入组件
   * @param {Number} index 插入的索引
   * @param {List}  Widget 插入的组件
   * @return ui.Panel
   */
  insert(index: number, widget: Widget) {
    let childNodes = this.el.childNodes;
    let node = childNodes[index];
    this.el.insertBefore(node, widget.el);
  }
  /**
   * 删除指定的组件
   * @param {List}  Widget UI组件
   * @return {Boolean} Boolean
   */
  remove(widget: Widget) {
    this.activeList.remove(widget);
    this.el.removeChild(widget.el);
  }
  /**
   * 设置容器的布局方法
   * @param {String}  layout 布局
   * @return ui.Panel
   */
  setLayout(layout: Layout) {
    //设置布局
    let classList = this.el.classList;
    if (layout instanceof Flow) {
      //流动布局
      classList.remove("layout-absolute");
      classList.remove("layout-flow");
      classList.add("layout-flow");
      switch (layout.direction) {
        case "horizontal":
          classList.add("layout-flow-horizontal");
          break;
        case "vertical":
        default:
          classList.add("layout-flow-vertical");
          break;
      }
    } else {
      //绝对布局
      classList.remove("layout-flow");
      classList.remove("layout-flow-vertical");
      classList.remove("layout-flow-horizontal");
      classList.remove("layout-absolute");
      classList.add("layout-absolute");
    }
    this.layout = layout;
  }
  /**
   * 返回组件列表方法
   * @return  ui.Panel.activeList
   */
  widgets() {
    return this.activeList;
  }
}