import {ColorValue} from "react-native";

export interface ITheme {
    /**
     * 初始化
     * @param all
     * @param defaultSelect
     */
    readonly init: (all: { [key: string]: object }, defaultSelect: string) => void;
    /**
     * 获取选择类型
     */
    readonly getType: () => string;
    /**
     * 获取选择皮肤
     */
    readonly get: <T>() => T;
    /**
     * 切换皮肤
     * @param all
     * @param select
     */
    readonly set: (all: { [key: string]: object }, select: string) => void;

    readonly useGet: <T>() => T;
    readonly useGetType: () => string;
}

export interface IThemeDefaultCss {
    get: (mainColor?: ColorValue) => ThemeCss;
}

export type ThemeCss = {
    //  主色
    main: ColorValue
    //  宽度
    readonly width: number
    //  高度
    readonly height: number
    //  左右 靠两边
    readonly rowBetween: { [key: string]: any }
    //  左右 靠两边 居中
    readonly rowBetweenCenter: { [key: string]: any }
    //  左右 靠左边
    readonly rowStart: { [key: string]: any }
    //  左右 靠左边 居中
    readonly rowStartCenter: { [key: string]: any }
    //  左右 左右平衡
    readonly rowAround: { [key: string]: any }
    //  左右 左右平衡 居中
    readonly rowAroundCenter: { [key: string]: any }
    //  左右 靠右边
    readonly rowEnd: { [key: string]: any }
    //  左右 靠右边 居中
    readonly rowEndCenter: { [key: string]: any }
    //  上下 靠两边
    readonly colBetween: { [key: string]: any }
    //  上下 靠两边 居中
    readonly colBetweenCenter: { [key: string]: any }
    //  上下 靠左边
    readonly colStart: { [key: string]: any }
    //  上下 靠左边 居中
    readonly colStartCenter: { [key: string]: any }
    //  上下 左右平衡
    readonly colAround: { [key: string]: any }
    //  上下 左右平衡 居中
    readonly colAroundCenter: { [key: string]: any }
    //  上下 靠右边
    readonly colEnd: { [key: string]: any }
    //  上下 靠右边 居中
    readonly colEndCenter: { [key: string]: any }
    readonly colCenter: { [key: string]: any }
    readonly rowCenter: { [key: string]: any }
    //  app 基础样式
    app: ThemeApp
    //  导航
    nav: ThemeNav
    //  头部
    header: ThemeHeader
    //  字体
    font: ThemeFont
    //  颜色
    color: ThemeColor
    //  弹出层
    popup: ThemePopup
    //  loading
    loading: ThemeLoading
    modal: ThemeModal
}

export type ThemeFlexDirection = "row" | "column"
export type ThemeJustifyContent = "space-between" | "flex-start" | "space-around" | "flex-end"

export type ThemeFlexCssData = {
    flexDirection: ThemeFlexDirection
    justifyContent: ThemeJustifyContent
    alignItems?: string
    flexWrap?: string
}

export type ThemeApp = {
    readonly width: number
    readonly height: number
    readonly scale: number
    readonly fontScale: number
    readonly screenWidth: number
    readonly screenHeight: number
    readonly screenScale: number
    readonly screenFontScale: number
    //  headerBar 高度
    barHeight: number
    //  页脚高度
    readonly footerHeight: number
    main: ColorValue
    bg: ColorValue
    barBg: ColorValue
    leftIconColor: ColorValue
    mask: ColorValue
    line: ColorValue
}

export type ThemeNav = {
    height: number
    bg: ColorValue
    color: ColorValue
    selectColor: ColorValue
}

export type ThemeHeader = {
    height: number
    color: ColorValue
    bg: ColorValue
    line: ColorValue
    size: number
}

export type ThemeFont = {
    size: number
    color: ColorValue
    white: ColorValue
    black: ColorValue
}

export type ThemePopup = {
    bg: ColorValue
    mask: ColorValue
    cancelColor: ColorValue
}

export type ThemeLoading = {
    width: number
    height: number
    mask: ColorValue
    bg: ColorValue
    borderRadius: number
    color?: ColorValue
}

export type ThemeModal = {
    width: number
    minHeight: number
    mask: ColorValue
    bg: ColorValue
    borderRadius: number
    color?: ColorValue
}

export type ThemeColor = {
    readonly black: ColorValue
    readonly white: ColorValue
}