export const defaultNamespace = 'mo'
const statePrefix = 'is-'

/**
 * 生成 bem
 * @param {} namespace 命名空间
 * @param {*} block 块
 * @param {*} blockSuffix 块多个单词
 * @param {*} element 元素
 * @param {*} modifier 修饰符
 * @returns
 */
const _bem = (
    namespace: string,
    block: string,
    blockSuffix: string,
    element: string,
    modifier: string
) => {
    let cls = `${namespace}-${block}`
    if (blockSuffix) {
        cls += `-${blockSuffix}`
    }
    if (element) {
        cls += `__${element}`
    }
    if (modifier) {
        cls += `--${modifier}`
    }
    return cls
}
// 处理名称
export const useNamespace = (block: string) => { // tag
    const namespace = defaultNamespace  // el
    const b = (blockSuffix = '') => // ''
        _bem(defaultNamespace, block, blockSuffix, '', '') // (el, tag, '','','')=> el-tag
    const e = (element?: string) =>
        element ? _bem(defaultNamespace, block, '', element, '') : ''
    const m = (modifier?: string) =>
        modifier ? _bem(defaultNamespace, block, '', '', modifier) : ''
    const be = (blockSuffix?: string, element?: string) =>
        blockSuffix && element
            ? _bem(defaultNamespace, block, blockSuffix, element, '')
            : ''
    const em = (element?: string, modifier?: string) =>
        element && modifier
            ? _bem(defaultNamespace, block, '', element, modifier)
            : ''
    const bm = (blockSuffix?: string, modifier?: string) =>
        blockSuffix && modifier
            ? _bem(defaultNamespace, block, blockSuffix, '', modifier)
            : ''
    const bem = (blockSuffix?: string, element?: string, modifier?: string) =>
        blockSuffix && element && modifier
            ? _bem(defaultNamespace, block, blockSuffix, element, modifier)
            : ''
    // 函数is，必传参数name，后面可传多个自定义类型的参数
    const is: {
        (name: string, state: boolean | undefined): string
        (name: string): string
    } = (name: string, ...args: [boolean | undefined] | []) => {
        const state = args.length >= 1 ? args[0]! : true
        return name && state ? `${statePrefix}${name}` : ''
    }

    // {color: "red"} => { "--el-color1": "red" }
    const cssVar = (object: Record<string, string>) => {
        const styles: Record<string, string> = {}
        for (const key in object) {
            if (object[key]) {
                styles[`--${defaultNamespace}-${key}`] = object[key]
            }
        }
        return styles
    }
    // {color: "red"} => { "--el-tag-color": "red" }
    const cssVarBlock = (object: Record<string, string>) => {
        const styles: Record<string, string> = {}
        for (const key in object) {
            if (object[key]) {
                styles[`--${defaultNamespace}-${block}-${key}`] = object[key]
            }
        }
        return styles
    }
    // color => '--el-color'
    const cssVarName = (name: string) => `--${defaultNamespace}-${name}`
    // color => '--el-tag-color'
    const cssVarBlockName = (name: string) => `--${defaultNamespace}-${block}-${name}`

    return {
        namespace,
        b,
        e,
        m,
        be,
        em,
        bm,
        bem,
        is,
        // css
        cssVar,
        cssVarName,
        cssVarBlock,
        cssVarBlockName,
    }
}

export type UseNamespaceReturn = ReturnType<typeof useNamespace>