<script setup>
import { ref, watch } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
import DataTableExample from "../Examples/DataTableExample.vue";
import { useForm } from "@inertiajs/vue3";
import Checkbox from "@/Components/ui/checkbox/Checkbox.vue";

const props = defineProps({
  example: { type: String, default: "Demo" },
});

const checkboxValue = ref(false);

const testForm = useForm({
  allowed: false,
});

// Dummy columns
const columns = [
  { key: "id", label: "ID", sortable: true, class: "w-16" },
  { key: "name", label: "Ime", sortable: true },
  { key: "email", label: "Email", sortable: true },
  {
    key: "balance",
    label: "Stanje",
    sortable: true,
    align: "right",
    formatter: (row) =>
      new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(
        row.balance
      ),
  },
  { key: "created_at", label: "Ustvarjeno", sortable: true },
];

// Generate some dummy rows
function makeRow(i) {
  const bal = Math.round((Math.random() * 5000 - 1000) * 100) / 100;
  const dt = new Date(Date.now() - Math.floor(Math.random() * 1000 * 60 * 60 * 24 * 90));
  const iso = dt.toISOString().slice(0, 10);
  return {
    id: i + 1,
    name: `Uporabnik ${i + 1}`,
    email: `user${i + 1}@example.com`,
    balance: bal,
    created_at: iso,
  };
}
// Increase dataset to visualize multi-page pagination (e.g., 100 pages at size 10)
const rows = ref(Array.from({ length: 1000 }, (_, i) => makeRow(i)));

// Controls (two-way bound)
const sort = ref({ key: null, direction: null });
const search = ref("");
const page = ref(1);
const pageSize = ref(10);
const searchKeys = ["name", "email"];

function onRowClick(row) {
  // no-op demo; could show toast or details
  console.debug("Row clicked:", row);
}

watch(
  () => testForm.allowed,
  (newVal) => {
    console.log(newVal);
  }
);
</script>

<template>
  <AppLayout>
    <Checkbox v-model:checked="testForm.allowed" />
  </AppLayout>
</template>
