import type { ReactNode } from "react"
import type { CTX } from "./CTX"

export interface CustomOption {
  ctx: CTX
  data?: any
}

export type RenderFunction = ({ ctx, data }: CustomOption) => undefined | ReactNode

export interface TopicInfo {
  id: string
  title?: string | ReactNode
  time?: string
  Render?: (opt: Partial<CustomOption & TopicInfo & { Render: null }>) => ReactNode  // 放在事件内部
  [key: string]: any
}

export interface History {
  list: Array<TopicInfo>
  isOpenFirst?: boolean
  hoverClassName?: string
  create?: BtnItem
  del?: IconItem
  open?: {
    className?: string
  }
  expand?: RenderFunction // 扩展操作
}

// 对话样式控制
export interface ChatUI {
  composer?: React.ElementType<any>
}

export interface IconItem {
  Render?: boolean | RenderFunction
  onClick?: (option?: CustomOption) => boolean  // false = stop propagation, true = continue propagation
  name?: string // name: 跟随在图标后的字符, =''时不显示
  className?: string
  title?: string
}
export interface LogonIconItem {
  onClick?: (option?: CustomOption) => boolean
  /** false 不展示图标后的名称， true 展示名称 值来着config.user.name或config.robot.name */
  showName?: boolean
  className?: string
}

export interface BtnItem extends IconItem { }

export interface AreaItem {
  logo?: LogonIconItem
  user?: LogonIconItem
  foldleft?: IconItem
  edit?: IconItem
  name?: string | ReactNode
  foldright?: IconItem
  setting?: IconItem
  iconx?: Array<IconItem>
}

export interface IconContainer {
  left?: AreaItem
  center?: AreaItem
  right?: AreaItem
}

export interface AreaLeft {
  init: boolean
  top?: false | IconContainer
  center?: false | {
    Render?: RenderFunction
    RenderBeforeHistory?: RenderFunction
    RenderAfterHistory?: RenderFunction
    history?: History
  }
  bottom?: false | IconContainer
}
export interface AreaRight {
  init: boolean;
  Render?: RenderFunction
}
export interface AreaCenter {
  top: false | IconContainer
  // RenderBeforeChat?: RenderFunction,
  // RenderAfterChat?: RenderFunction,
  center: ChatUI,
  bottom?: RenderFunction
}

export interface UI {
  /**
   * false = 从始至终不加载
   */
  topHeader: false | IconContainer & { init: boolean }
  areaLeft: false | AreaLeft
  areaRight: false | AreaRight
  areaCenter: false | AreaCenter
}