<script setup lang="ts">
import {AcquisitionsPanel, useAcquiredTypesStore} from '@/market/acquisition';
import {ArrowPathIcon} from '@heroicons/vue/24/outline';
import {useAutoRefresh} from '@/composables';

const acquiredTypesStore = useAcquiredTypesStore();

const refresh = async () => {
  await acquiredTypesStore.refresh();
}

const {active: autoRefresh, toggle: toggleAutoRefresh} = useAutoRefresh(refresh, 5 * 60 * 1000);
</script>

<template>
    <div class="mt-4">
        <div class="flex">
            <div class="ms-auto flex">
                <button class="rounded-e-none" @click="refresh">Refresh</button>
                <button class="rounded-s-none border-s-0 flex items-center" :class="{ 'bg-slate-700': autoRefresh }" title="Auto refresh" @click="toggleAutoRefresh">
                    <ArrowPathIcon class="w-5 h-5" :class="{ 'animate-spin': autoRefresh }" />
                </button>
            </div>
        </div>
        <AcquisitionsPanel :items="acquiredTypesStore.acquiredTypes" ignoredColums="date" />
    </div>
</template>