<script lang="ts" setup>
import { useLocalStorage } from '@vueuse/core';

const providerStorage = useLocalStorage<string | undefined | null>('ads-provider', undefined, { initOnMounted: true });

const PROVIDERS = {
    'Geniee': 'geniee',
    'Publift': 'publift',
    'AdPushup': 'pushup',
    'None': 'none',
    'Reset (random)': null,
};

const setProvider = (provider: string | null) => {
    providerStorage.value = provider;
    setTimeout(() => {
        window.location.reload();
    }, 100);
};
</script>

<template>
    <ul v-if="providerStorage !== undefined" class="list-inline">
        <li v-for="(provider, label) in PROVIDERS" :key="label" class="list-inline-item">
            <button
                type="button"
                :class="['btn btn-sm', providerStorage === provider ? 'btn-info' : 'btn-outline-info']"
                @click="setProvider(provider)"
            >
                {{ label }}
            </button>
        </li>
    </ul>
</template>
