import type { AppConfig } from "./CONFIG";
import type { HANDLERS } from "./HANDLERS";
import type { RequestConfig } from "./REQUEST";
import type { UI } from "./UI";

/** 主题色 [Dark + Light] 蓝紫=Violet 浆果=Berry 暖阳=Warm */
export type TSimpleTheme = 'LightViolet' | 'DarkViolet' | 'LightBerry' | 'DarkBerry' | 'LightWarm' | 'DarkWarm'

type rgba = [number, number, number, number?]

export type ThemeItem = {
  '--color-theme-shal': rgba
  '--color-theme-midd': rgba
  '--color-theme-deep': rgba

  '--color-text-deep': rgba
  '--color-text-midd': rgba
  '--color-text-shmi': rgba
  '--color-text-shal': rgba
  '--color-text-reverse': rgba

  '--color-area-shal': rgba
  '--color-area-mode': rgba
}

export interface AppOption {
  /** 简单主题套色 */
  theme?: TSimpleTheme

  /** 自定义主题值 */
  token?: Partial<ThemeItem>

  /** 窄屏下的左侧、右侧弹出方向，默认horizontal； <768px时 */
  mobilePopDirection?: 'horizontal' | 'vertical'

  /** tooltipDelay 文字提示的展示延迟时间，单位ms，默认700ms */
  tooltipDelay?: number

  /** 界面 */
  ui: UI

  /** 自定义卡片配置 */
  components?: {
    [key: string]:
    | string
    | React.Component
    | React.FC;
  };

  /** 事件处理 */
  handlers?: HANDLERS

  /** 请求地址 */
  requests?: RequestConfig

  /** 界面配置 */
  config?: AppConfig

}