import {
    // SvgSignX,
    // SvgSignExclamation,
    // SvgSignInfo,
    // SvgSignTick,
    SvgDiscX,
    SvgDiscExclamation,
    SvgDiscInfo,
    SvgDiscTick,
} from '@befe/brick-icon'
import {codeWarningOnce} from '@befe/brick-utils'
import {cloneDeep} from 'lodash-es'
import {SvgFC} from '../typings'
import {
    ButtonLoadingType,
    ButtonShape,
    BaseSize,
    DialogActionsAlign,
    PopoverActionsAlign,
    RAIL_RESPONSE,
} from '../constants'

export const DIALOG_MIN_HEIGHT = 236
export const DIALOG_MAX_HEIGHT = 680
export const DIALOG_TOP_DISTANCE = 60

export const DRAWER_MIN_WIDTH = 320
export const DRAWER_MAX_WIDTH = 960
export const DRAWER_MIN_HEIGHT = 232
export const DRAWER_MAX_HEIGHT = 680
export const TABLE_EXPAND_BUTTON_MARGIN = 12

type FontSize = Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>
export interface ThemeConfig {
    /**
     * 基础尺寸，
     * 对应 style/themes/_base $base-size
     */
    baseSize?: BaseSize

    /**
     * loading 延迟显示
     */
    loadingDelay?: number

    /**
     * 字体尺寸 map，
     * 对应 style/themes/_base $font-size
     */
    fontSize?: FontSize

    /**
     * 多项选择的分隔符
     */
    selectedSeparator?: string

    /**
     * button 字体尺寸 map，
     * 对应 style/themes/_button $btn-font-size
     */
    buttonFontSize?: FontSize
    buttonLoadingIcon?: SvgFC
    buttonLoadingType?: ButtonLoadingType
    buttonDefaultShape?: ButtonShape

    checkboxMarkChecked?: SvgFC
    checkboxMarkIndeterminate?: SvgFC

    alertIconInfo?: SvgFC
    alertIconSuccess?: SvgFC
    alertIconWarning?: SvgFC
    alertIconError?: SvgFC

    dialogActionsAlign?: DialogActionsAlign
    dialogMaxHeight?: number
    dialogMinHeight?: number
    dialogTopDistance?: number

    drawerMinWidth?: number
    drawerMaxWidth?: number
    drawerMinHeight?: number
    drawerMaxHeight?: number

    popoverActionsAlign?: PopoverActionsAlign

    tableExpandButtonMargin?: number
}
// 完全对应 style/themes/_base.scss 的 $font-size
const DEFAULT_FONT_SIZE = {
    xs: 12,
    sm: 12,
    md: 14,
    lg: 16,
    xl: 16,
}
export type ThemeConfigWithDefaults = ThemeConfig & Required<Pick<ThemeConfig, keyof typeof themeConfig>>

const themeConfig = {
    baseSize: 'md',
    loadingDelay: RAIL_RESPONSE,
    fontSize: DEFAULT_FONT_SIZE,
    buttonFontSize: DEFAULT_FONT_SIZE,
    buttonLoadingType: 'normal',
    buttonDefaultShape: 'normal',
    dialogActionsAlign: 'right',
    popoverActionsAlign: 'right',
    alertIconInfo: SvgDiscInfo as SvgFC,
    alertIconSuccess: SvgDiscTick as SvgFC,
    alertIconWarning: SvgDiscExclamation as SvgFC,
    alertIconError: SvgDiscX as SvgFC,
    selectedSeparator: ';',
    dialogMaxHeight: DIALOG_MAX_HEIGHT,
    dialogMinHeight: DIALOG_MIN_HEIGHT,
    dialogTopDistance: DIALOG_TOP_DISTANCE,
    drawerMinWidth: DRAWER_MIN_WIDTH,
    drawerMaxWidth: DRAWER_MAX_WIDTH,
    drawerMinHeight: DRAWER_MIN_HEIGHT,
    drawerMaxHeight: DRAWER_MAX_HEIGHT,
    // 完全对应 style/themes/_button.scss 的 $btn-font-size
    tableExpandButtonMargin: TABLE_EXPAND_BUTTON_MARGIN,
}

// theme 的全局单例， 在不同的 react 实例中共享（e.g DialogConfirm, Toast 等）
export function overrideDefaultThemeConfig(config: ThemeConfig) {
    Object.assign(themeConfig, config)
}

export function getThemeConfigSingleton() {
    return {
        config: themeConfig as ThemeConfigWithDefaults,
        update: overrideDefaultThemeConfig,
    };
}

export const BODY_THEME_ATTR_NAME = 'data-brick-theme'

export function setBodyTheme(name?: string) {
    const body = document.body
    if (name) {
        body.setAttribute(BODY_THEME_ATTR_NAME, name)
    } else {
        body.removeAttribute(BODY_THEME_ATTR_NAME)
    }
}

let currentTheme = ''
const originDefaultThemeConfig = cloneDeep(themeConfig) as ThemeConfigWithDefaults

export function resetTheme() {
    currentTheme = ''
    setBodyTheme()
    overrideDefaultThemeConfig(originDefaultThemeConfig)
}

export function initTheme(name: string, config: ThemeConfig = themeConfig as ThemeConfigWithDefaults) {
    if (!currentTheme) {
        currentTheme = name
        setBodyTheme(name)
        overrideDefaultThemeConfig(config)
    } else if (name) {
        codeWarningOnce(
            currentTheme === name,
            '[core]: mixed-using components in different themes is not allowed'
        )
    }

}