<script lang="ts">
  import type {
    DesktopAdType,
    DesktopPlacementName,
    MobileAdType,
    MobilePlacementName,
  } from './@types/ads';
  import AdSlot from './AdSlot.svelte';

  export let desktopPlacementName: DesktopPlacementName;
  export let mobileBreakpoint = 1024;

  let windowWidth: number;

  const getMobilePlacementName = (
    desktopPlacementName: DesktopPlacementName
  ): MobilePlacementName => {
    switch (desktopPlacementName) {
      case 'reuters_desktop_leaderboard_atf':
        return 'reuters_mobile_leaderboard';
      case 'reuters_sponsorlogo':
        return 'reuters_sponsorlogo';
      case 'reuters_desktop_native_1':
        return 'reuters_mobile_mpu_1';
      case 'reuters_desktop_native_2':
        return 'reuters_mobile_mpu_2';
      case 'reuters_desktop_native_3':
        return 'reuters_mobile_mpu_3';
      default:
        return 'reuters_mobile_mpu_1';
    }
  };

  const getAdType = (
    placementName: DesktopPlacementName | MobilePlacementName
  ): DesktopAdType | MobileAdType => {
    switch (placementName) {
      case 'reuters_desktop_leaderboard_atf':
      case 'reuters_mobile_leaderboard':
        return 'leaderboard';
      case 'reuters_sponsorlogo':
        return 'sponsorlogo';
      case 'reuters_mobile_mpu_1':
        return 'mpu';
      case 'reuters_mobile_mpu_2':
        return 'native';
      case 'reuters_mobile_mpu_3':
        return 'mpu2';
      case 'reuters_desktop_native_1':
        return 'native';
      case 'reuters_desktop_native_2':
        return 'canvas';
      case 'reuters_desktop_native_3':
        return 'flex';
      default:
        return 'native';
    }
  };

  $: placementName =
    windowWidth && windowWidth < mobileBreakpoint ?
      getMobilePlacementName(desktopPlacementName)
    : desktopPlacementName;
  $: adType = getAdType(placementName);
</script>

<svelte:window bind:innerWidth="{windowWidth}" />

{#if windowWidth}
  {#key placementName}
    <AdSlot {placementName} {adType} />
  {/key}
{/if}
