import {
  ClassComponent,
  GlobalComponentConstructor,
  PresetAttributes,
  PresetOptionMethodType,
} from '../ts-helpers.d';

export interface UserNamePresetOptions {
  root: PresetAttributes;
  displayname: PresetOptionMethodType;
  panel: {
    background: PresetAttributes;
    username: PresetAttributes;
    useremail: PresetAttributes;
    positiondivision: PresetAttributes;
    userdetaillink: PresetAttributes;
    contentwrapper: PresetAttributes;
    detailwrapper: PresetAttributes;
  };
}

export interface UserNameLocaleConfig {
  /**
   * The anchor text for user detail link on user panel
   */
  detailUserAnchorText?: string;
}

export interface UserNameComponentConfigs {
  /**
   * @example `/tim-member/member/{userId}/detail-member`
   */
  detailUserPath?: string;

  /**
   * @default 'picture' - Show user profile picture instead of user icon
   */
  type?: 'icon' | 'picture';

  /**
   * Whether to show the user's name. If false, only the user's icon will be shown.
   * @default true
   */
  showUserName?: boolean;
  /**
   * Whether to shorten the user's name..
   * @default true
   */
  formatUserName?: boolean;
  /**
   * Specify the field of user to be used as display name
   *
   * @example 'name.fullName'
   */
  userNameField?: string;
  /**
   * Specify the field of user to be used as display picture
   *
   * @example 'image.profile'
   */
  profilePictureField?: string;

  /**
   * Function to get user detail on panel shown
   * @param userId The user id
   * @returns Full user detail object
   */
  getUserDetail?: (
    userId: string,
  ) => UserNameProps['user'] | Promise<UserNameProps['user']>;
}

export interface GeneralUser {
  _id: string;
  profilePicture?: string;
  firstName?: string;
  lastName?: string;
  fullName?: string;
  email?: string;
  nickName?: string;
  position?: string;
  division?: string;
  [key: string]: any;
}

/**
 * Defines valid properties in UserName component.
 */
export interface UserNameProps extends Partial<UserNameComponentConfigs> {
  /**
   * The full user Object
   */
  user?: Partial<GeneralUser>;

  /**
   * When it sets to false, the props.user will be used
   */
  fetchDetailOnPanelShow?: boolean;
}

/**
 * **WangsVue - UserName**
 *
 * _Displays an user and profile image._
 *
 * --- ---
 *
 * @group Component
 *
 */
declare class UserName extends ClassComponent<
  UserNameProps,
  unknown,
  unknown
> {}

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    UserName: GlobalComponentConstructor<UserName>;
  }
}

export default UserName;