import { HZEngineCore, Platform } from "../index.js";
import { Save, CustomSave } from "../storage/decorator.js";
import { Storage } from "../storage/index.js";
// / <reference path="node_modules/@zeppos/device-types/dist/index.d.ts" />
// import * as hmUI from "@zos/ui";
// import {} from "@zos/ui";

// import { getDeviceInfo, SCREEN_SHAPE_SQUARE } from "@zos/device";
// const { width, height, screenShape } = getDeviceInfo();
export class UI<PlatformType extends Platform = any> {
  constructor(public _core: HZEngineCore<PlatformType>) {
    this._initUI();
  }

  private _initUI() {
    this.addLayer("bg", 1);
    this.addLayer("fg", 2);
    this.addLayer("ct", 3);
    this.addLayer("overlay", 4);
    this.addRouter("page", "overlay", false);
  }

  private _cleanUI() {
    for (let [key, value] of this.layerList) {
      value.destroy();
    }
    this.layerList.clear();
    this._routerMap.clear();
  }

  resetUI() {
    this._cleanUI();
    this._initUI();
  }

  // Layer
  @CustomSave(
    "ui.layerList",
    function serializer(layerList) {
      let obj: Record<string, [name: string, z_index: number]> = {};
      for (let [key, value] of this.layerList) {
        obj[key] = [value.name, value.z_index];
      }
      return obj;
    },
    function deserializer(obj) {
      // destroy old layer
      for (let [key, value] of this.layerList) {
        value.destroy();
      }
      this.layerList.clear();

      let newLayerList = new Map<string, UI.Layer<PlatformType>>();
      // create new layer
      for (let key in obj) {
        let newLayer = new UI.Layer(this._core, obj[key][0], obj[key][1]);
        newLayerList.set(key, newLayer);
        this._core.emit("afterAddLayer", newLayer);
      }

      return newLayerList;
    }
  )
  private accessor _layerList: Map<string, UI.Layer<PlatformType>> = new Map();

  get layerList() {
    return this._layerList;
  }
  addLayer(name: string, z_index: number) {
    this._core.emit("beforeAddLayer", name, z_index);
    if (this._layerList.has(name)) throw `Layer ${name} already exist`;
    let newLayer = new UI.Layer(this._core, name, z_index);
    this._layerList.set(name, newLayer);
    this._core.emit("afterAddLayer", newLayer);
  }
  getLayer(name: string): UI.Layer<PlatformType> | undefined {
    return this.layerList.get(name);
  }

  // View Class
  private _viewClassMap: Map<
    string,
    UI.ViewClass<Storage.Saveable<unknown>, PlatformType>
  > = new Map();
  // _activeViewList: [name: string, layer: string, instance: UI.View<unknown>][] =
  //   [];

  registerView<PropType extends Storage.Saveable<PropType>>(
    name: string,
    cls: UI.ViewClass<PropType, PlatformType>
  ): void {
    this._viewClassMap.set(name, cls);
  }

  // View
  @Save("ui.nextViewId")
  private accessor _nextViewId: number = 50;

  @CustomSave(
    "ui.viewMap",
    function serializer(viewMap) {
      let obj: Record<string, UI.View.Serialized> = {};
      for (let [id, view] of viewMap) {
        // 注意viewMap中的id是number，而obj中的id會自動轉成string
        if (view.isSave) obj[id] = view.serialize();
      }
      return obj;
    },
    function deserializer(obj) {
      let newViewMap = new Map<
        number,
        UI.View<Storage.Saveable<unknown>, PlatformType>
      >();
      for (let key in obj) {
        let item = obj[key] as UI.View.Serialized;
        let view = this._produceViewWithId(
          item.name,
          item.layer,
          item.prop,
          Number(key)
        );
        view.isSave = true;
        newViewMap.set(Number(key), view);
      }
      return newViewMap;
    }
  )
  private accessor _viewMap: Map<
    number,
    UI.View<Storage.Saveable<unknown>, PlatformType>
  > = new Map();

  getView(id: number): UI.View<Storage.Saveable<unknown>, PlatformType> | null {
    return this._viewMap.get(id) ?? null;
  }

  createView<PropType extends Storage.Saveable<PropType>>(
    name: string,
    layer: string,
    prop: PropType,
    isSave: boolean
  ): UI.View<PropType, PlatformType> {
    let id = this._nextViewId++;
    let viewInstance = this._produceViewWithId(name, layer, prop, id);
    this._core.debug.log(`creating view ${viewInstance.name}`);
    viewInstance.isSave = isSave;
    this._viewMap.set(id, viewInstance);
    return viewInstance;
  }
  updateView<PropType extends Storage.Saveable<PropType>>(
    viewInstance: UI.View<PropType, PlatformType>,
    new_prop: PropType
  ) {
    viewInstance.commit(new_prop);
  }
  destroyView(viewInstance: UI.View<Storage.Saveable<unknown>, PlatformType>) {
    if (viewInstance.id != null) this._viewMap.delete(viewInstance.id);
    viewInstance.destroy();
  }
  /**由調用者提供id，創建一個View，不會處理isSave，也不會更新viewMap */
  private _produceViewWithId<PropType extends Storage.Saveable<PropType>>(
    name: string,
    layer: string,
    prop: PropType,
    id: number
  ): UI.View<PropType, PlatformType> {
    if (!this._viewClassMap.get(name)) {
      throw "要创建的View不存在";
    }
    let _ViewFactory = this._viewClassMap.get(name);
    let viewInstance = new _ViewFactory!(layer, this._core) as UI.View<
      PropType,
      PlatformType
    >;
    viewInstance.id = id;
    viewInstance.name = name;
    viewInstance.create(prop);
    this._core.debug.log(`producing view ${viewInstance.name}`);
    return viewInstance;
  }

  @CustomSave(
    "ui.routerMap",
    function serializer(routerMap) {
      let obj: Record<string, UI.Router.Serialized> = {};
      for (let [key, value] of routerMap) {
        if (!value.isSave) continue;
        obj[key] = value.serialize();
      }
      return obj;
    },
    function deserializer(obj) {
      let newRouterMap = new Map<string, UI.Router<PlatformType>>();
      // reshow not save router
      for (let [name, router] of this._routerMap) {
        if (!router.isSave) {
          if (router.length > 0) {
            // TODO 因爲讀檔的時候會重置整個ui系統，所以要重新創建activeViewInstance  這裏感覺有點問題
            router.activeViewInstance = this._core.ui.createView(
              router.viewStack[0][0],
              router.layer,
              router.viewStack[0][1],
              router.isSave
            );
          }
          newRouterMap.set(name, router);
        }
      }
      // reshow save router
      for (let key in obj) {
        newRouterMap.set(key, UI.Router.deserialize(this, obj[key]));
      }
      return newRouterMap;
    }
  )
  private accessor _routerMap: Map<string, UI.Router<PlatformType>> = new Map();

  getRouter(tag: string) {
    return this._routerMap.get(tag);
  }

  addRouter(tag: string, layer: string, isSave: boolean = true) {
    if (this._routerMap.has(tag))
      throw `Route with tag [${tag}] already exist!`;
    let router = new UI.Router(this, tag, layer, isSave);
    this._routerMap.set(tag, router);
    return router;
  }

  getScreenSize() {
    let [width, height] = this._core.platform.getScreenSize();
    return { width, height };
  }
  /**
   * 根据 BasicUniversalProp 计算屏幕上的位置
   * @param prop 包含 BasicUniversalProp 的 prop
   * @param size (可选)图像的尺寸，若不指定，返回的anchor坐标和origin坐标一样
   * @returns
   */
  calcPosition(
    prop: UI.BasicUniversalProp,
    size?: UI.Size
  ): {
    /** 锚点（算上偏移）的屏幕位置 */
    anchor: UI.Coordinate;
    /** 图像左上角的屏幕位置 */
    origin: UI.Coordinate;
  } {
    let { width, height } = this.getScreenSize();
    // 1. 确定 anchor
    // 2. 通过 align 确定初始位置
    // 3. offset
    // 返回左上角的位置
    let anchor_coord = {
      x:
        (width * ((prop.xalign ?? 0) + 1)) / 2 + // 根据 align 求出 anchor 位置
        (prop.xoffset ?? 0), // offset
      y:
        (height * ((prop.yalign ?? 0) + 1)) / 2 + // 根据 align 求出 anchor 位置
        (prop.yoffset ?? 0), // offset
    };
    let origin_coord = {
      x: anchor_coord.x - (((prop.xanchor ?? 0) + 1) / 2) * (size?.width ?? 0),
      y: anchor_coord.y - (((prop.yanchor ?? 0) + 1) / 2) * (size?.height ?? 0),
    };
    return {
      anchor: anchor_coord,
      origin: origin_coord,
    };
  }
}

export namespace UI {
  export type ViewClass<
    PropType extends Storage.Saveable<PropType>,
    PlatformType extends Platform
  > = {
    new (layer: string, core: HZEngineCore<PlatformType>): View<
      PropType,
      PlatformType
    >;
  };

  export abstract class View<
    PropType extends Storage.Saveable<PropType>,
    PlatformType extends Platform = any
  > {
    public id: number | null = null;
    public name: string | null = null;
    public isSave: boolean = true;
    private _prop: PropType | null = null;
    public get prop(): PropType | null {
      return this._prop;
    }
    private set prop(prop: PropType | null) {
      this._prop = prop;
    }
    constructor(
      public layer: string,
      public core: HZEngineCore<PlatformType>
    ) {}
    create(prop: PropType) {
      this.prop = prop;
      this.onCreate(prop);
    }
    protected abstract onCreate(prop: PropType): void;
    commit(prop: PropType) {
      this.prop = prop;
      this.onCommit(prop);
    }
    protected abstract onCommit(prop: PropType): void;
    destroy() {
      this.onDestroy();
      this.prop = null;
      this.id = null;
    }
    protected abstract onDestroy(): void;

    serialize(): View.Serialized {
      if (this.name == null)
        throw new Error("View name is null when serialize");
      return {
        name: this.name,
        layer: this.layer,
        prop: this.prop,
      };
    }
  }

  export namespace View {
    export interface Serialized {
      name: string;
      layer: string;
      prop: Storage.Saveable<unknown>;
    }
  }

  export interface BasicUniversalProp {
    // 透明度 [0, 1]
    alpha?: number;
    // 锚点对齐位置 [0, 1]； 在不指定的情况下，默认位于屏幕中心
    xalign?: number;
    yalign?: number;
    // 锚点相对图像位置 [0, 1]； 在不指定的情况下，以图像中心作为锚点
    xanchor?: number;
    yanchor?: number;
    // px； 不指定就是不偏移
    xoffset?: number;
    yoffset?: number;
  }

  // export function getScreenSize(): Size {
  //   let [width, height] =
  //   return {
  //     width,
  //     height,
  //   };
  // }

  export interface Message {
    who: string;
    what: string;
  }
  export abstract class MessageView<PlatformType extends Platform> extends View<
    Message,
    PlatformType
  > {}

  export interface MenuItemData {
    text: string;
    position: [path: string, index: number];
    enable_js_expression?: string;
  }
  export type MenuViewProp = {
    itemList: MenuItemData[];
  };
  export abstract class MenuView<PlatformType extends Platform> extends View<
    MenuViewProp,
    PlatformType
  > {}

  export type Coordinate = { x: number; y: number };
  export type Size = { width: number; height: number };

  /**
   * 立绘/道具等显示在`fg`layer上的图片View
   */
  export type FgImgViewProp = {
    imgPath: string;
    offset: Coordinate;
    size: Size;
  };
  export abstract class FgImgView<PlatformType extends Platform> extends View<
    FgImgViewProp,
    PlatformType
  > {}

  /**
   * cg等显示在`bg`layer上的图片View
   */
  export type BgImgViewProp = {
    imgPath: string;
    offset: Coordinate;
    size: Size;
  };
  export abstract class BgImgView<PlatformType extends Platform> extends View<
    FgImgViewProp,
    PlatformType
  > {}

  export class Layer<PlatformType extends Platform> {
    widgetFactory: ReturnType<PlatformType["createUILayer"]>;
    constructor(
      public _core: HZEngineCore<PlatformType>,
      public name: string,
      public z_index: number
    ) {
      // this.widgetFactory = hmUI.createWidget(
      //   (hmUI.widget as any).VIEW_CONTAINER,
      //   {
      //     scroll_enable: 0,
      //     z_index,
      //   }
      // ) as unknown as Layer.WidgetFactory;
      this.widgetFactory = _core.platform.createUILayer({
        z_index,
      });
    }
    destroy() {
      // hmUI.deleteWidget(this.widgetFactory as any);
      this._core.platform.deleteUILayer(this.widgetFactory);
    }
  }
  export namespace Layer {
    // export interface WidgetFactory {
    //   createWidget(widgetType: number, option: Record<string, any>): any;
    //   deleteWidget(widget: any): void;
    // }
  }

  export class Router<PlatformType extends Platform> {
    constructor(
      private _ui: UI<PlatformType>,
      public tag: string,
      public layer: string,
      public isSave = true
    ) {}
    serialize(): Router.Serialized {
      return {
        tag: this.tag,
        layer: this.layer,
        isSave: this.isSave,
        viewStack: this.viewStack,
        activeViewId: this.activeViewInstance?.id ?? null,
      };
    }
    defaultRouteStrategy: Router.RouteStrategy = {
      destroy: (viewInstance, ui) => {
        this._ui._core.debug.log(`destroy view ${viewInstance.name}`);
        ui.destroyView(viewInstance);
      },
      create: (viewName, layer, prop, ui, isSave) => {
        this._ui._core.debug.log(`create view ${viewName}`);
        return ui.createView(viewName, layer, prop, isSave);
      },
      update: (viewInstance, prop, ui) => {
        this._ui._core.debug.log(`update view ${viewInstance.name}`);
        ui.updateView(viewInstance, prop);
      },
    };
    static deserialize<PlatformType extends Platform>(
      ui: UI<PlatformType>,
      data: Router.Serialized
    ) {
      let router = new Router(ui, data.tag, data.layer, data.isSave);
      router.viewStack = data.viewStack;
      if (data.activeViewId != null) {
        let viewInstance = ui.getView(data.activeViewId);
        if (!viewInstance)
          throw `View [${data.activeViewId}] not found when deserialize`;
        router.activeViewInstance = viewInstance;
      }
      return router;
    }
    viewStack: [view_name: string, prop: Storage.Saveable<unknown>][] = [];
    get length() {
      return this.viewStack.length;
    }
    activeViewInstance: View<Storage.Saveable<unknown>, PlatformType> | null =
      null;
    push<T extends Storage.Saveable<T>>(
      view_name: string,
      prop: T,
      strategy?: Router.RouteStrategy
    ) {
      if (this.activeViewInstance) {
        // this._ui.destroyView(this.activeViewInstance);
        // (strategy?.destroy ?? this.defaultRouteStrategy.destroy!)(
        //   this.activeViewInstance,
        //   this._ui
        // );
        if (strategy?.destroy) {
          strategy.destroy(this.activeViewInstance, this._ui);
        } else {
          this.defaultRouteStrategy.destroy!(this.activeViewInstance, this._ui);
        }
        this.activeViewInstance = null;
      }
      let layerInstance = this._ui.getLayer(this.layer);
      if (!layerInstance) throw `Layer [${this.layer}] not found`;
      // this.activeViewInstance = (
      //   strategy?.create ?? this.defaultRouteStrategy.create!
      // )(view_name, this.layer, prop, this._ui, this.isSave);
      if (strategy?.create) {
        this.activeViewInstance = strategy.create(
          view_name,
          this.layer,
          prop,
          this._ui,
          this.isSave
        );
      } else {
        this.activeViewInstance = this.defaultRouteStrategy.create!(
          view_name,
          this.layer,
          prop,
          this._ui,
          this.isSave
        );
      }
      this.viewStack.push([view_name, prop]);
    }
    pop<T extends Storage.Saveable<T>>(
      back_prop?: T,
      strategy?: Router.RouteStrategy
    ) {
      if (this.activeViewInstance) {
        // this._ui.destroyView(this.activeViewInstance);
        // (strategy?.destroy ?? this.defaultRouteStrategy.destroy!)(
        //   this.activeViewInstance,
        //   this._ui
        // );
        if (strategy?.destroy) {
          strategy.destroy(this.activeViewInstance, this._ui);
        } else {
          this.defaultRouteStrategy.destroy!(this.activeViewInstance, this._ui);
        }
        this.activeViewInstance = null;
      }
      this.viewStack.pop();

      if (this.viewStack.length) {
        let backViewInfo = this.viewStack[this.viewStack.length - 1];
        let layerInstance = this._ui.getLayer(this.layer);
        if (!layerInstance) throw `Layer [${this.layer}] not found`;
        // this.activeViewInstance = (
        //   strategy?.create ?? this.defaultRouteStrategy.create!
        // )(
        //   backViewInfo[0],
        //   this.layer,
        //   back_prop ?? backViewInfo[1],
        //   this._ui,
        //   this.isSave
        // );
        if (strategy?.create) {
          this.activeViewInstance = strategy.create(
            backViewInfo[0],
            this.layer,
            back_prop ?? backViewInfo[1],
            this._ui,
            this.isSave
          );
        } else {
          this.activeViewInstance = this.defaultRouteStrategy.create!(
            backViewInfo[0],
            this.layer,
            back_prop ?? backViewInfo[1],
            this._ui,
            this.isSave
          );
        }
      }
    }
    replace<T extends Storage.Saveable<T>>(
      view_name: string,
      prop: T,
      strategy?: Router.RouteStrategy
    ) {
      if (this.activeViewInstance) {
        // this._ui.destroyView(this.activeViewInstance);
        // (strategy?.destroy ?? this.defaultRouteStrategy.destroy!)(
        //   this.activeViewInstance,
        //   this._ui
        // );
        if (strategy?.destroy) {
          strategy.destroy(this.activeViewInstance, this._ui);
        } else {
          this.defaultRouteStrategy.destroy!(this.activeViewInstance, this._ui);
        }
        this.activeViewInstance = null;
      }
      this.viewStack.pop();

      let layerInstance = this._ui.getLayer(this.layer);
      if (!layerInstance) throw `Layer [${this.layer}] not found`;
      // this.activeViewInstance = (
      //   strategy?.create ?? this.defaultRouteStrategy.create!
      // )(view_name, this.layer, prop, this._ui, this.isSave);
      if (strategy?.create) {
        this.activeViewInstance = strategy.create(
          view_name,
          this.layer,
          prop,
          this._ui,
          this.isSave
        );
      } else {
        this.activeViewInstance = this.defaultRouteStrategy.create!(
          view_name,
          this.layer,
          prop,
          this._ui,
          this.isSave
        );
      }
      this.viewStack.push([view_name, prop]);
    }
    update<T extends Storage.Saveable<T>>(
      prop: T,
      strategy?: Router.RouteStrategy
    ) {
      if (!this.activeViewInstance)
        throw `Update View but activeViewInstance is null`;
      this.viewStack[this.viewStack.length - 1][1] = prop;
      // (strategy?.update ?? this.defaultRouteStrategy.update!)(
      //   this.activeViewInstance,
      //   prop,
      //   this._ui
      // );
      if (strategy?.update) {
        strategy.update(this.activeViewInstance, prop, this._ui);
      } else {
        this.defaultRouteStrategy.update!(
          this.activeViewInstance,
          prop,
          this._ui
        );
      }
    }
    clear(strategy?: Router.RouteStrategy) {
      if (this.activeViewInstance) {
        // (strategy?.destroy ?? this.defaultRouteStrategy.destroy!)(
        //   this.activeViewInstance,
        //   this._ui
        // );
        if (strategy?.destroy) {
          strategy.destroy(this.activeViewInstance, this._ui);
        } else {
          this.defaultRouteStrategy.destroy!(this.activeViewInstance, this._ui);
        }
        this.activeViewInstance = null;
      }
      this.viewStack = [];
    }
  }
  export namespace Router {
    export interface Serialized {
      tag: string;
      layer: string;
      isSave: boolean;
      viewStack: [view_name: string, prop: Storage.Saveable<unknown>][];
      activeViewId: number | null;
    }

    // 实现自定义路由策略，允许接管Router对View的创建和销毁，实现例如动画等功能
    export interface RouteStrategy<
    PropType extends Storage.Saveable<PropType> = Storage.Saveable<unknown>,
    PlatformType extends Platform = any
    > {
      destroy?(
        viewInstance: View<PropType, PlatformType>,
        ui: UI<PlatformType>
      ): void;
      create?(
        viewName: string,
        layer: string,
        prop: PropType,
        ui: UI<PlatformType>,
        isSave: boolean
      ): View<Storage.Saveable<PropType>, PlatformType>;

      update?(
        viewInstance: View<PropType, PlatformType>,
        prop: PropType,
        ui: UI<PlatformType>
      ): void;
    }
  }
}