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

const store = useMosaicStore()
const { settings } = storeToRefs(store)

function updateColorTolerance(event: Event): void {
  store.setColorTolerance(Number((event.target as HTMLInputElement).value))
}
</script>

<template>
  <section class="panel-section">
    <h2>Nastavenia analýzy</h2>
    <label class="range-field">
      <span><b>Tolerancia výberu</b><output>{{ settings.floodTolerance }}</output></span>
      <input v-model.number="settings.floodTolerance" type="range" min="0" max="100" step="1" />
      <small>Vyššia hodnota spojí väčšie farebné odchýlky v jednej ploche.</small>
    </label>
    <label class="range-field">
      <span><b>Podobnosť farieb (ΔE)</b><output>{{ settings.colorTolerance }}</output></span>
      <input :value="settings.colorTolerance" type="range" min="1" max="40" step="1" @change="updateColorTolerance" />
      <small>Po zmene sa farebné skupiny automaticky prepočítajú.</small>
    </label>
    <div class="field-row">
      <label>
        <span>Susednosť</span>
        <select v-model.number="settings.connectivity">
          <option :value="4">4-smery</option>
          <option :value="8">8-smerov</option>
        </select>
      </label>
      <label>
        <span>Ostatné skupiny</span>
        <select v-model="settings.otherGroupsMode">
          <option value="normal">Normálne</option>
          <option value="dim">Stlmiť</option>
          <option value="hidden">Skryť</option>
        </select>
      </label>
    </div>
    <details>
      <summary>Rozšírené</summary>
      <label class="range-field compact">
        <span><b>Prahová tmavosť obrysu</b><output>{{ settings.darkBoundaryThreshold.toFixed(3) }}</output></span>
        <input v-model.number="settings.darkBoundaryThreshold" type="range" min="0" max="0.2" step="0.005" />
      </label>
      <label class="check-field">
        <input v-model="settings.useUserClickPositionForLabels" type="checkbox" />
        <span>Zobrazovať čísla na pozícii kliknutia</span>
      </label>
    </details>
  </section>
</template>

<style scoped>
.range-field { display: grid; gap: 7px; margin-top: 14px; }
.range-field > span { display: flex; justify-content: space-between; gap: 12px; font-size: .78rem; }
.range-field b { font-weight: 650; }
.range-field output { min-width: 34px; padding: 1px 6px; border-radius: 5px; background: #e8edf3; color: #334155; text-align: center; font-variant-numeric: tabular-nums; }
.range-field small { color: #718096; font-size: .69rem; line-height: 1.35; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.field-row label { display: grid; gap: 5px; color: #475569; font-size: .72rem; }
select { width: 100%; }
details { margin-top: 13px; color: #475569; font-size: .76rem; }
summary { cursor: pointer; }
.compact { margin-bottom: 4px; }
.check-field { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: #475569; cursor: pointer; }
</style>
