<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!-- 
  https://www.youtube.com/watch?v=ftNiT22mAng&list=PLsZlhayVgqNz5iC0wFQDgixcAepFyrWbP&index=8
 -->
<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps<{
  params: any;
}>();

const filterState = ref('Filter off');
const filterOptions = ['Filter off', '2004', '2008'];

function updateFilter() {
  props.params.filterChangedCallback();
}

function isFilterActive() {
  return filterState.value !== 'Filter on';
}

function doesFilterPass(params: any) {
  const field = props.params.colDef?.field;

  return params.data[field] == filterState.value;
}

function getModel() {
  return undefined;
}

function setModel() {
  //
}
</script>
<template>
  <div>
    <div class="filter-title">{{ props.params.title }}</div>
    <label v-for="(value, index) in filterOptions" :key="index">
      <input
        type="radio"
        :value="value"
        v-model="filterState"
        @change="updateFilter"
      />
      {{ value }}
    </label>
  </div>
</template>

<style lang="scss" scoped></style>
