<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { buildFilter, buildSort } from '@/assets/queryBuilder'

import { useDomainsStore } from '@/stores/domains'
const ds = useDomainsStore()

const searchVal = ref('')
const sortVal = ref('id')
const sortDesc = ref(true)
const filters = reactive({
  'offense_count': [0, undefined],
  'ip_count': [0, undefined],
  // 'time': Date.now(),
  'badness': [0, 1],
  'countries': ''
})

const filter_ops: {[val: string]: string} = {
  'countries': 'in'
}

watch([sortVal, sortDesc, filters], update)
function update() {
  const query = searchVal.value
  const sort = buildSort(sortVal.value, sortDesc.value)
  const filterArr: string[] = []
  for (const [key, val] of Object.entries(filters)) {
    filterArr.push(buildFilter(key, val, filter_ops[key]))
  }
  const filter = filterArr.filter(x => x !== '').join(',')
  ds.updateCriteria(query, sort, filter)
}
</script>

<template>
  <div class="sieve">
    <div class="fs">
      <Icon name="filter" />
      <h3 class="control-heading">Filter & Sort</h3>
    </div>
    <div class="q">
      <HInputField
        v-model="searchVal"
        color="highlight"
        label="Domain name"
        placeholder="contains..."
        style="margin-inline:0"
        @input="update"
      />
    </div>
    <div class="filters">
      <h4>Adjust Filters</h4>
      <div class="filter filter-badness">
        <h5>Badness ({{Math.floor(filters.badness[0] * 100)}} to {{Math.floor(filters.badness[1] * 100)}})</h5>
        <HRangeSlider
          v-model="filters.badness"
          color="accent"
          :min="0"
          :max="1"
          :step="0.01"
          thin
        />
      </div>
      <div class="filter filter-offense_count">
        <h5>Offense Count</h5>
        <div class="fs fclear">
          <HInputField
            v-model="filters.offense_count[0]"
            color="highlight"
            label="Min"
            placeholder="none"
            type="number"
          />
          <HInputField
            v-model="filters.offense_count[1]"
            color="highlight"
            label="Max"
            placeholder="none"
            type="number"
          />
        </div>
      </div>
      <div class="filter filter-ip_count">
        <h5>IP Count</h5>
        <div class="fs fclear">
          <HInputField
            v-model="filters.ip_count[0]"
            color="highlight"
            label="Min"
            placeholder="none"
            type="number"
          />
          <HInputField
            v-model="filters.ip_count[1]"
            color="highlight"
            label="Max"
            placeholder="none"
            type="number"
          />
        </div>
      </div>
      <div class="filter filter-country">
        <h5>Country of IPs</h5>
        <!-- <p>Included in at least one of the record's IP addresses.</p> -->
        <HInputField
          v-model="filters.countries"
          color="highlight"
          label="Country code"
          placeholder="must include..."
        />
      </div>
    </div>
    <div class="sort">
      <h4>Sort by</h4>
      <HRadioGroup
        v-model="sortVal"
        :options="{
          'id': 'Time Added',
          'offense_count': 'Offense Count',
          'ip_count': 'IP Address Count',
          //'time': 'Time analysed',
          'badness': 'Badness'
        }"
      />
      <HCheckbox
        v-model="sortDesc"
        color="accent"
      >
        Descending
      </HCheckbox>
    </div>
  </div>
</template>

<style>
  .sieve {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 1em;
  }

  .sieve *::placeholder {
    color: hsl(var(--bg10));
  }

  .sieve h4, .sieve h5 {
    margin-block: 0 0.5em;
  }

  .fclear {
    margin-block-end: 0.5em;
  }
</style>