import { url } from "common-types";

export type AvatarSource =
  | "initials"
  | "facebook"
  | "twitter"
  | "gravatar"
  | "instagram"
  | "github";

export interface IFallback {
  type: "icon" | "initials";
  value: string;
}

export interface ScrSet {
  img: url;
  width: number;
  breakpt: number;
}

export interface IAvatarImage {
  /** a low res blurred representation of the image in base64 */
  inline?: string;
  /** the primary image source */
  src: url;
  /** the "alt" text for screen readers */
  alt?: string;
}

export type AvatarOptionsPosition = "left" | "right" | "top" | "bottom";

export interface IAvatarOptions {
  src?: url;
  favored?: AvatarSource;

  // SOURCES

  email?: string;
  facebook?: string;
  /**
   * A Twitter handle will be used to look for picture
   */
  twitter?: string;
  /**
   * An Instagram username will be used to look for picture
   */
  instagram?: string;
  /**
   * A github username will be used to look for picture
   */
  github?: string;

  // FALLBACKS

  name?: string | [first: string, last: string];

  /**
   * Use any string based icon identifier from
   * [Iconify](https://iconify.design/icon-sets/). If nothing
   * is set here and no other fallback option is available,
   * the icon "carbon:user-avatar-filled" will be used.
   */
  icon?: string;

  /**
   * When set -- _to a specific direction_ -- it will animate out
   * an array of avatar options to choose from based on available
   * information.
   *
   * Alternatively, if you define the **#options** named slot, then
   * this will be be given visibility. In this scenario using a value
   * of `true` probably makes sense but the directional positioning
   * will be up to you.
   */
  showOptions?: boolean | AvatarOptionsPosition;
}