BlazeSDK.Initialize('<API-KEY>',{
   geoLocation: 'IL', // Country code by two letters
   externalUserId: 'user-123',
   doNotTrack: false,
   runInShadowDom: true, // default value is true
   shouldModifyUrlWithStoryId: true, // default value is true
   playerStyleCustomization: { // only for Stories, not supported to Moments
     iconsPosition: 'VERTICAL'
   },
   prefetchingPolicy: 'default',
   shouldAllowHorizontalStories: false // by default false
 })

 const widgetView = BlazeSDK.WidgetRowView('<DOM-CONTAINER-ID>', {
   labels: 'top-stories', // Can be string, string[], BlazeWidgetLabel
   orderType: 'ZtoA',// Order of the label, will override the config order of the label
   labelsPriority: '[teama,teamb]' // Order the label exp by labels order
   storyIds: ['64a2d76b9503bc65ac531633','64a2d76b9503bc65ac531634'], // Stories ids
   maxItemsCount: 10, // fetch only 10 items from the backend
   maxDisplayItemsCount: 1, // display only 1 
   theme: 'row-circle', // set the theme of the widget
   shouldOrderWidgetByReadStatus: true // the default value is true                                        
   perItemStyleOverrides: {
        "playerId": [
            {
                name: "35450",
                theme: rowCircleThemePlayer
            },
            {
                name: "28237",
                theme: rowCircleThemePlayer
            },
            {
                name: "46046",
                theme: rowCircleThemePlayer
            }
        ],
        "teamId": [
            {
                name: "real-madrid",
                theme: rowCircleThemeRealMadrid
            }
        ]
    }                                        
 })
 
 //widgetView has an interface, which allows you to interact with the widget in the DOM 
 //widgetView.reload()

const myTheme:IWidgetTheme = BlazeSDK.Theme('row-rectangle');

const options: IWidgetViewOptions = {
	 labels: BlazeSDK.LabelBuilder().atLeastOneOf("read-madrid", "vini"), // Can be string, string[], BlazeWidgetLabel
   orderType: 'ZtoA',// Order of the label, will override the config order of the label
   labelsPriority: '[teama,teamb]' // How the order the labels 
   storyIds: ['64a2d76b9503bc65ac531633','64a2d76b9503bc65ac531634'], // instead of using labels, u can also use stories Ids
   maxItemsCount: 10, // fetch only 10 items from the backend
   maxDisplayItemsCount: 1, // display only 1 
   theme: myTheme, // set the theme of the widget
}

const widgetView: IWidgetView = BlazeSDK.WidgetRowView('<DOM-CONTAINER-ID>', options)

type EntitiesType = 'playerId' | 'teamId' | 'gameId';
type PerItemStyleOverrides = Record<EntitiesType, Array<{ name: string; theme: IWidgetTheme }>>;

perItemStyleOverrides: {
   "playerId": [
     {
       name: "35450",
       theme: rowCircleThemePlayer
     },
     {
       name: "28237",
       theme: rowCircleThemePlayer
     },
     {
       name: "46046",
       theme: rowCircleThemePlayer
     }
   ],
     "teamId": [
       {
         name: "real-madrid",
         theme: rowCircleThemeRealMadrid
       }
     ]
 }  

const theme = BlazeSDK.Theme('row-rectangle','story');

const theme: IWidgetTheme = BlazeSDK.Theme('row-rectangle');

BlazeSDK.setDoNotTrack(true);

BlazeSDK.setExternalUserId('1234');

BlazeSDK.setGeoLocation('IL')

 BlazeSDK.pauseCurrentPlayer();

 BlazeSDK.resumeCurrentPlayer();

BlazeSDK.addDelegateListener(BlazeSDK.Delegations.onEventTriggered , (e) => { console.log("document onEventTriggered", e.detail) })
BlazeSDK.addDelegateListener(BlazeSDK.Delegations.onStoryPlayerDidAppear , (e) => { console.log("document onStoryPlayerDidAppear", e.detail) })
BlazeSDK.addDelegateListener(BlazeSDK.Delegations.onStoryPlayerDismissed , (e) => { console.log("document onStoryPlayerDismissed", e.detail) })
BlazeSDK.addDelegateListener(BlazeSDK.Delegations.onErrorThrown , (e) => { console.log("document onErrorThrown", e.detail) })

type CustomNativeTargeting = Record<string, string | string[]>;
type CustomNativeArgs = {
  path: string;
};

interface CustomNativeAdHandler {
  provideAdExtraParams?: (args: CustomNativeArgs) => CustomNativeTargeting;
}

function provideAdExtraParams(args: { path: string }): Record<string, string | string[]>;

// Usage example:
BlazeSDK.setGoogleCustomNativeAdsHandler({
  provideAdExtraParams: (args) => {
    return {
       "gdpr": "1",
       "age": ["1", "2"]
    }
}});

type ImaExtraParams = Record<string, string>;

interface CustomNativeAdHandler {  
  provideAdExtraParams?: () => ImaExtraParams;  
}

function provideAdExtraParams(): Record<string, string>;

// Usage example:  
BlazeSDK.setImaHandler({  
  provideAdExtraParams: () => {  
    return {  
       "cust_params": "gdpr=1",  
    }  
}});

 const dataSource = BlazeSDK.DataSourceBuilder().labels({
   labels: BlazeSDK.LabelBuilder().atLeastOneOf('top-stories', 'live-stories'),
   labelsPriority: `[${BlazeSDK.LabelBuilder().singleLabel('live-stories')}]`,
   orderType: 'RecentlyUpdatedFirst',
   maxItems: 4,
 });

const dataSource = BlazeSDK.DataSourceBuilder().ids({
   ids: ['1234','5678'],
   orderType: 'RecentlyUpdatedFirst',
 });

const playerStyle = BlazeSDK.Theme('default').playerStyle;

BlazeSDK.playStory('66c0d0c6607d0c10cf3dd98d',playerStyle)

const dataSource = BlazeSDK.DataSourceBuilder().labels({
  labels: BlazeSDK.LabelBuilder().atLeastOneOf('top-stories', 'live-stories'),
  maxItems: 4,
})
const playerStyle = BlazeSDK.Theme('default').playerStyle;

BlazeSDK.playStories(dataSource, playerStyle)