<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useMosaicStore } from '@/stores/mosaic'
import ColorGroupItem from './ColorGroupItem.vue'

const store = useMosaicStore()
const { groups, regions, selectedGroupId } = storeToRefs(store)
const regionMap = computed(() => new Map(regions.value.map((region) => [region.id, region])))
const pixelsFor = (ids: string[]) => ids.reduce((sum, id) => sum + (regionMap.value.get(id)?.pixelCount ?? 0), 0)
</script>

<template>
  <section class="panel-section">
    <div class="section-heading">
      <h2>Farebné skupiny</h2>
      <div class="heading-actions">
        <button v-if="groups.length" type="button" @click="store.regroup()">Prepočítať</button>
        <span>{{ groups.length }}</span>
      </div>
    </div>
    <p v-if="!groups.length" class="empty-copy">Po kliknutí do obrázka sa tu zobrazia farby zoradené od najtmavšej.</p>
    <ColorGroupItem
      v-for="group in groups"
      :key="group.id"
      :group="group"
      :selected="group.id === selectedGroupId"
      :total-pixels="pixelsFor(group.regionIds)"
    />
  </section>
</template>

<style scoped>
.heading-actions { display: flex; align-items: center; gap: 8px; }
.heading-actions button { padding: 0; border: 0; background: transparent; color: #2563eb; font-size: .66rem; cursor: pointer; }
.heading-actions span { color: #718096; font-size: .7rem; }
</style>
