import { getCurrentInstance, Plugin } from 'vue';
interface Options {
  appName: string;
}
let globalOptions: Options = { appName: '' };
const idsCache: string[] = [];

// plugin
// @ts-ignore 在 vue 3.2.47 版本下，可以支持这个写法，小于这个版本可能会报错，这里先忽略
export const namespaceId: Plugin<Options> = {
  // @ts-ignore 在 vue 3.2.47 版本下，可以支持这个写法，小于这个版本可能会报错，这里先忽略
  install(app, options) {
    globalOptions = options;
    const { appName } = options;
    app.config.globalProperties.$id = (id: string) => {
      const instance = getCurrentInstance();
      const pageName = instance?.type.name || '';
      id = [appName, pageName, id].join('-');
      if (process.env.NODE_ENV !== 'production' && pageName === '') {
        console.warn(
          `[unity-plugins-namespaceId warn]: 请确保该页面有配置 name 属性`
        );
      }
      // 暂时不判断，antd 组件机制导致有些没有必要的提示
      // if (process.env.NODE_ENV !== 'production') {
      //   const isExist = idsCache.find(_ => _ === id);
      //   if (isExist) {
      //     console.warn(`[unity-plugins-namespaceId warn]: id "${id}" 重复`);
      //   } else {
      //     idsCache.push(id);
      //   }
      // }
      return id;
    };
  }
};

// hook
export const useNamespaceId = () => {
  const run = (id: string) => {
    const instance = getCurrentInstance();
    const pageName = instance?.type.name || '';
    id = [globalOptions.appName, pageName, id].join('-');
    return id;
  };
  return { id: run };
};

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $id: (id: string) => string;
  }
}
