import y, { EditorProperties, f, getDefaultValue, Infer } from "@iplusplus/y-model"
import createjs from "createjs-module"
import { createContext } from "react"
import { PageDesigner } from "./page-designer/PageDesigner"
import { PageLoader } from "./page-loader/PageLoader"

export type Size = {
  width: number
  height: number
}

export const metaPropDefine = f([
  ["originName", "原始属性名", "string", y.string("").attach("editable", "noedit")],
  ["propertyType", "属性类型", "string", y.string("").attach("editable", "noedit")],
  ["originTitle", "原始名称", "string", y.string("").attach("editable", "noedit")],
  ["customTitle", "自定义名称", "string", y.string("")],
  ["isExport", "是否导出", "enable", y.number(0)],
  ["customName", "自定义属性名", "string", y.string("")],
  ["sortIndex", "显示顺序", "number", y.number(0)],
] as const)

export type MetaProperty = Infer<typeof metaPropDefine>
export type ControlMeta = {
  originTitle: string
  controlType: string
  properties: MetaProperty[]
}

export const positionAndSizePropDefine = f([
  ["customName", "自定义名称", "string", y.string("")],
  ["x", "横坐标", "string", y.number(0)],
  ["y", "纵坐标", "string", y.number(0)],
  ["width", "宽度", "string", y.number(100)],
  ["height", "高度", "string", y.number(100)],
] as const)
export type PositionAndSizeProperty = Infer<typeof positionAndSizePropDefine>

export const anchorPropDefine = f([
  ["left", "左侧锚定", "enable", y.number(0)],
  ["right", "右侧锚定", "enable", y.number(0)],
  ["top", "上侧锚定", "enable", y.number(0)],
  ["bottom", "下侧锚定", "enable", y.number(0)],
] as const)

export type AnchorProp = Infer<typeof anchorPropDefine>
export const defaultAnchor: AnchorProp = getDefaultValue(anchorPropDefine)
export type ControlData = {
  x?: number
  y?: number
  controlType: string
  width: number
  height: number
  customProperties: Record<string, unknown>
  metaInfo?: ControlMeta
  anchored?: AnchorProp
  isLocked?: boolean
  customName?: string
}

// export type GroupControlAttchInfo = {
//   originX: number
//   originY: number
//   originWidth: number
//   originHeight: number
// }

// export type ControlTypeInfo = {
//   typeName: string
//   title: string
// }

export interface CommApi {
  getImg(imageId: string): Promise<HTMLImageElement>
  createControl(args: string | ControlData): Control
}

export interface PageApi extends CommApi {
  apiName: "PageApi"
  getHomeDiv(): HTMLDivElement
  getDomDiv() : HTMLDivElement
}

export interface DesignerApi extends CommApi {
  apiName: "DesignerApi"
}

export interface Control {
  size: Size
  getControlData(): ControlData
  reDraw(): void
  controlTypeInfo: ControlTypeInfo
  setProperty(newProperties: { [index: string]: unknown }): void
  getProperty(propertyName: string): unknown
  initControl(api: DesignerApi | PageApi): void
  startRun(): void
  getDisplayObject(): createjs.DisplayObject
  getProperties(): EditorProperties
  destroy(): void
  groupControlAttchInfo?: GroupControlAttchInfo
  setMeta(metaInfo: ControlMeta): void
  getMeta(): ControlMeta
  anchored: AnchorProp
  isLocked: boolean
  customName?: string
}

export type ControlFactory = {
  create(data?: ControlData): Control
  typeName: string
  title: string
}

export type DesignerContextProps = {
  // getDesignerApi:()=>DesignerApi
  // getPageApi:()=>PageApi
  getCommApi: () => CommApi
}

export type PageData = {
  width: number
  height: number
  backgroundImgId: string | null
  controls: ControlData[]
}

export type EventArgs = {
  source: object
}

export type SelectedChangeEventArgs = EventArgs & {
  selectedIds: number[]
  selectedId?: number
}

export type DesignerEventDefine = {
  selectedChanged: (args: SelectedChangeEventArgs) => void
}
export type DesignerEventType = keyof DesignerEventDefine

export type DesignerEventHandler<E extends DesignerEventType> = {
  eventType: E
  handler: DesignerEventDefine[E]
}

export type DesignerEventHandlers = DesignerEventHandler<DesignerEventType>[]

export type PageDesignerContainerProps = {
  designer?: PageDesigner
  clear: () => void
  createDigner: (div: HTMLDivElement) => void
}
export const CreateJsDesignerContext = createContext(undefined as unknown as DesignerContextProps)
export const PageDesignerContainerContext = createContext(undefined as unknown as PageDesignerContainerProps)

export type PageLoaderContainerProps = {
  loader?: PageLoader
  clear: () => void
  createLoader: (div: HTMLDivElement) => void
}




export type GroupControlAttchInfo={
    originX:number,
    originY:number,
    originWidth:number,
    originHeight:number
}



export interface ControlTypeInfo {
    typeName:string,
    title:string,
}

export interface CommApi{
    getImg(imageId:string): Promise<HTMLImageElement>
    createControl(data:ControlData):Control
};

export interface DesignerApi extends CommApi{
    apiName:"DesignerApi",
}

export interface PageApi extends CommApi{
    apiName:"PageApi"
    // getVarValues:GetVarValueListFunction,
    // addVarValueChangedListener(varList:string[], callback:VarValeChangedHandler):symbol,
    // removeVarValueChangedListener(s:symbol):void,
    getHomeDiv():HTMLDivElement
}

export interface Control{
    size:Size,
    getControlData():ControlData;
    reDraw():void;
    controlTypeInfo:ControlTypeInfo;
    setProperty(newProperties:{[index:string]:any}):void;
    getProperty(propertyName:string):any;
    initControl(api:DesignerApi | PageApi):void;
    startRun():void;
    getDisplayObject():createjs.DisplayObject;
    getProperties():EditorProperties;
    destroy():void;
    groupControlAttchInfo ?: GroupControlAttchInfo,
    setMeta(metaInfo:ControlMeta):void,
    getMeta():ControlMeta,
    anchored:AnchorProp

}


export const PageLoaderContainerContext = createContext(undefined as unknown as PageLoaderContainerProps)