<script setup lang="ts">
import { store } from '../store'
import { SEVERITY_COLORS } from '../main'

const props = defineProps<{
    count: number
    label: string
}>()
</script>

<template>
    <div class="filter_row" :class="{ frozen: store.is_frozen, historical: store.is_historical && !store.is_frozen }">
        <span class="alarm_count" :class="{ frozen: store.is_frozen, historical: store.is_historical && !store.is_frozen, live: store.is_live && !store.is_frozen }">
            {{ count }} {{ label }}
        </span>
        <div class="severity_filters">
            <button class="tab_btn" :class="{ active: store.severity_filter === null }" @click="store.severity_filter = null">ALL</button>
            <button
                v-for="n in [1,2,3,4,5]"
                :key="n"
                class="tab_btn sev_btn"
                :class="{ active: store.severity_filter === n }"
                :style="{ '--sev-color': SEVERITY_COLORS[n] }"
                @click="store.severity_filter = n"
            >{{ n }}</button>
        </div>
    </div>
</template>

<style scoped>
.filter_row {
    position: fixed;
    bottom: calc(10vh + 60px);
    left: 50%;
    transform: translateX(-50%);
    width: min(1280px, 100vw - 4rem);
    z-index: 1000;
    background: rgba(10, 10, 10, 0.85);
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 100, 0, 0.2);
    border-radius: 6px;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.filter_row.historical { border-color: rgba(200, 160, 100, 0.2); }
.filter_row.frozen { border-color: rgba(150, 220, 255, 0.2); }

.alarm_count {
    font-size: 0.8rem;
    /* color: rgba(255, 100, 0, 0.6); */
}

.alarm_count.live { color: rgba(255, 100, 0, 0.6); }
.alarm_count.historical { color: rgba(200, 160, 100, 0.6); }
.alarm_count.frozen { color: rgba(150, 220, 255, 0.6); }

.severity_filters {
    display: flex;
    gap: 0.3rem;
}

.sev_btn {
    border-color: color-mix(in srgb, var(--sev-color) 50%, transparent);
    color: color-mix(in srgb, var(--sev-color) 70%, transparent);
}

.sev_btn:hover {
    border-color: var(--sev-color);
    color: var(--sev-color);
}

.sev_btn.active {
    background-color: color-mix(in srgb, var(--sev-color) 20%, transparent);
    border-color: var(--sev-color);
    color: var(--sev-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--sev-color) 40%, transparent);
}



</style>