/**
 * @see 改自 https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-namespace/index.ts
 * 去除了namespace,增加了cssModule
 */
import { useCssModule } from 'vue';

import { context } from './context';

const statePrefix = 'is-';

const _bem = (
  block: string,
  blockSuffix: string,
  element: string,
  modifier: string,
  _useCssModule: boolean,
  _useNamespace: boolean,
) => {
  let cls = `${block}`;
  if (blockSuffix) {
    cls += `-${blockSuffix}`;
  }
  if (element) {
    cls += `__${element}`;
  }
  if (modifier) {
    cls += `--${modifier}`;
  }
  return _useCssModule ? useCssModule()[cls] : _useNamespace ? context.prefixCls + '-' + cls : cls;
};

const useNamespace = (block: string, useCssModule = true, useNamespace = false) => {
  const b = (blockSuffix = '') => _bem(block, blockSuffix, '', '', useCssModule, useNamespace);
  const e = (element: string) => _bem(block, '', element, '', useCssModule, useNamespace);
  const m = (modifier: string) => _bem(block, '', '', modifier, useCssModule, useNamespace);
  const be = (blockSuffix: string, element: string) =>
    _bem(block, blockSuffix, element, '', useCssModule, useNamespace);
  const em = (element: string, modifier: string) =>
    _bem(block, '', element, modifier, useCssModule, useNamespace);
  const bm = (blockSuffix: string, modifier: string) =>
    _bem(block, blockSuffix, '', modifier, useCssModule, useNamespace);
  const bem = (blockSuffix: string, element: string, modifier: string) =>
    _bem(block, blockSuffix, element, modifier, useCssModule, useNamespace);

  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}` : '';
  };

  // for css var
  // --vben-xxx: value;
  const cssVar = (object: Record<string, string>) => {
    const styles: Record<string, string> = {};
    for (const key in object) {
      if (object[key]) {
        styles[`--${key}`] = object[key];
      }
    }
    return styles;
  };
  // with block
  const cssVarBlock = (object: Record<string, string>) => {
    const styles: Record<string, string> = {};
    for (const key in object) {
      if (object[key]) {
        styles[`--${block}-${key}`] = object[key];
      }
    }
    return styles;
  };

  const cssVarName = (name: string) => `--${name}`;
  const cssVarBlockName = (name: string) => `--${block}-${name}`;

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

export { useNamespace };