import { Level } from '../debug';
import { AddToCartHandler, DisplayCustomShopThisLook, GetCustomProductButtons, ShopThisLookHandler } from './shopThisLook';

/**
 * Fallback sources for widget content
 */
export interface DefaultSources {
  product_list?: string[];
  collection_list?: string[];
}

/**
 * Widget configuration settings
 */
export interface ISettings {
  /** Define a localization (for catalog refs, display of language, link and price) */
  localization?: string;

  /** Only for wall widget, forces the number of columns to display */
  forceColumns: number;

  /**
   * Minimum number of UGCs to display in the widget
   * If this constraint is not is not respected,
   * an minContentNotReached event will be emitted
   */
  min_media: number;

  /** Maximum number of UGCs to display */
  max_media: number | null;

  /** Display only UGCs for which you have acquired the rights */
  rights_agreed: boolean;

  /** Show only medias that have "diffusion" enabled */
  diffusion?: boolean;

  /** Display UGCs that are linked to exact products */
  has_exact_products: boolean;

  /** Display UGCs that reach the minimum amount of exact products linked */
  min_exact_products: number;

  /** Display UGCs that are linked to similar products */
  has_similar_products: boolean;

  /** Display UGCs that reach the minimum amount of similar products linked */
  min_similar_products: number;

  /** Define the widget layout type */
  type: 'carousel' | 'wall' | 'mosaic';

  /** Control the carousel presentation when type is 'carousel' */
  carousel_type?: 'uniform' | 'spotlight' | 'buy_box';

  /** Randomize the content order */
  random: boolean;

  /**
   * Display media from influencers first
   * If set to true, it follows this order of priority: 
   * 1. Media posted by influencers, with at least 1 product linked (exact or similar)
   * 2. Media posted by influencers, without any product linked
   * 3. Media posted by non-influencers, with at least 1 product linked
   * 4. Media posted by non-influencers, without any product linked
   */
  prioritize_influencer_content: boolean;

  /**
   * Control the number of content in carousel and wall layouts
   * or the first content size in pixel in mosaic layouts
   */
  content_size: number;

  /** Defined the number of thumbnails visible in carousel+mobile mode */
  mobile_carousel_content_size: number;

  /** Define the aspect ratio of the content */
  thumbnail_shape: 'square' | 'portrait' | 'stories';

  /** Display the creator's name on the content and on thumbnails */
  display_name: boolean;

  /** Choose how corners should be displayed on thumbnails */
  thumbnail_corners: 'rounded' | 'square';

  /** Display the products linked to the UGCs on the thumbnails */
  thumbnail_packshot: boolean;

  /** Display the products linked to the UGCs in a modal or in a list */
  shop_this_look_display: 'modal' | 'product_list' | 'none';

  /** Display only products that are "exact linked" in the STL */
  display_exact_products_only: boolean;

  /** Display only products that are "similar linked" in the STL */
  display_similar_products_only: boolean;

  /** Maximum number of exact linked products displayed per UGC in the STL */
  max_exact_products_displayed: number | null;

  /** Maximum number of similar linked products displayed per UGC in the STL */
  max_similar_products_displayed: number | null;

  /** Display a full screen media player in mobile mode */
  mobile_player_display: boolean;

  /**Displays a stories-like media player on the left and the product list on the right */
  display_desktop_player?: boolean;

  /** Display either the packshot, button or none on the mobile media player to open the product list */
  mobile_player_product_cta: 'packshot' | 'button' | 'none';

  /** Enable the link to the original post when clicking on the username */
  username_link: boolean;

  /** Enable autoplay of videos when hovering the thumbnail */
  thumbnail_video_autoplay_hover: boolean;

  /** Enable watermark on the thumbnail + "powered by" on productlist/modal (defaults to true) */
  show_attribution: boolean;

  /** Defines fallback sources used when data-products is not provided */
  default_sources?: DefaultSources;

  /** Custom text to display as title of the "Shop this look" section. Overrides config.shopThisLookText. Defaults to 'SHOP THE LOOK' */
  shop_this_look_text?: string;

  /** Custom text to display as the undertitle of the "More like this" section (similar linked products). Overrides config.moreLikeThisText. Defaults to 'More like this' */
  more_like_this_text?: string;

  /**
   * Navigation direction for the media player (mobile and desktop).
   * - 'horizontal' (default): left/right swipe & tap, horizontal slide transition.
   * - 'vertical': up/down swipe & tap, vertical slide transition.
   */
  player_swipe_direction?: 'horizontal' | 'vertical';
}

/** Debug configuration for widget */
export interface IDebug {
  level?: Level;
  apiUrl?: string;
}

/**
 * Widget instantiation/configuration
 */
export interface Config {
  /** Key that should be unique on the page to represent the widget */
  id?: string;

  /** Class prefix for css styling (default: adl-wdgt) */
  classPrefix?: string;

  /** Function to customize the query parameters in "shop this look" urls */
  shopThisLookHandler?: ShopThisLookHandler;

  /** Function to customize the query parameters in "shop this look" urls */
  displayCustomShopThisLook?: DisplayCustomShopThisLook;

  /** Custom text to display as title of the "Shop this look" section. Defaults to 'SHOP THE LOOK' */
  shopThisLookText?: string;

  /** Custom text to display as the undertitle of the "More like this" section (similar linked products). Defaults to 'More like this' */
  moreLikeThisText?: string;

  /** Custom text to display when a UGC has no linked products in product list mode. Defaults to 'No current product match'. */
  noProductMatchText?: string;

  /** Custom text to display in the NextIndicator in the mobile player. Defaults to 'Explore' */
  nextContentText?: string;

  /** Shop this look custom product buttons */
  getCustomProductButtons?: GetCustomProductButtons;

  /** Handler called when the "Add to cart" button is clicked on a product */
  addToCartHandler?: AddToCartHandler;

  /** Custom HTML string to render as the add to cart icon (e.g. an inline SVG) */
  addToCartIcon?: string;

  /** URL for the "See my cart" button shown in the add-to-cart confirmation view */
  cartUrl?: string;

  /** Forces the display of carousel arrows in mobile mode when true */
  displayMobileCarouselArrows?: boolean;

  /** Hide the left and right arrows in carousel mode */
  hideArrows?: boolean;

  /** Custom HTML string to render as the left arrow icon */
  arrowLeft?: string;

  /** Custom HTML string to render as the right arrow icon */
  arrowRight?: string;

  /** Indicates whether analytics cookies can be created. Defaults to false. */
  hasAnalyticsConsent?: boolean;
  debug?: IDebug;
}

/** Sources for widget content */
export interface Sources {
  productIds?: string[];
  collectionIds?: string[];
}