<script lang="ts">
	import { goto } from "$app/navigation";
	import Title from "$lib/components/atoms/title.svelte";
	import DataTableActions from "$lib/components/molecules/data-table/data-table-actions.svelte";
	import DataTable from "$lib/components/molecules/data-table/data-table.svelte";
	import {
		createSvelteTable,
		renderComponent,
	} from "$lib/components/ui/data-table";
	import { adminSiteNavMap } from "$lib/core/constants";
	import {
		getCoreRowModel,
		getFilteredRowModel,
		getPaginationRowModel,
		type ColumnDef,
		type ColumnFiltersState,
		type PaginationState,
	} from "@tanstack/table-core";
	import { useDebounce } from "runed";
	import type { CustomerInfoModel } from "../data";
	import { customerInfoVM } from "./customerinfo.vm.svelte";

	let { data }: { data: CustomerInfoModel[] } = $props();

	// Define columns
	const columns: ColumnDef<CustomerInfoModel>[] = [
		{
			header: "#",
			accessorKey: "id",
			cell: ({ row }) => {
				return Number(row.id) + 1;
			},
		},
		{
			header: "Email",
			accessorKey: "email",
		},
		{
			header: "Phone No",
			id: "phone",
			cell: ({ row }) => {
				return `${row.original.phoneCountryCode} ${row.original.phoneNumber}`;
			},
		},
		{
			header: "Name",
			id: "name",
			cell: ({ row }) => {
				const middleName = row.original.middleName
					? ` ${row.original.middleName}`
					: "";
				return `${row.original.firstName}${middleName} ${row.original.lastName}`;
			},
		},
		{
			header: "Location",
			id: "location",
			cell: ({ row }) => {
				return `${row.original.country}, ${row.original.city}`;
			},
		},
		{
			header: "Action",
			id: "actions",
			cell: ({ row }) => {
				return renderComponent(DataTableActions, {
					actions: [
						{
							title: "View Details",
							action: () => {
								goto(
									`${adminSiteNavMap.data}/${row.original.id}`,
								);
							},
						},
					],
				});
			},
		},
	];

	let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
	let columnFilters = $state<ColumnFiltersState>([]);

	const table = createSvelteTable({
		get data() {
			return data;
		},
		columns,
		getCoreRowModel: getCoreRowModel(),
		getPaginationRowModel: getPaginationRowModel(),
		getFilteredRowModel: getFilteredRowModel(),
		onPaginationChange: (updater) => {
			if (typeof updater === "function") {
				pagination = updater(pagination);
			} else {
				pagination = updater;
			}
		},
		onColumnFiltersChange: (updater) => {
			if (typeof updater === "function") {
				columnFilters = updater(columnFilters);
			} else {
				columnFilters = updater;
			}
		},
		state: {
			get pagination() {
				return pagination;
			},
			get columnFilters() {
				return columnFilters;
			},
		},
	});

	let debounceDuration = $state(1000);
	const debouncedSearch = useDebounce(
		() => {
			console.log("Debounced search - NYI");
		},
		() => debounceDuration,
	);

	let pageCount = $derived(2);
</script>

{#if data.length > 0}
	<DataTable
		{table}
		onNextPageClick={() => {
			table.nextPage();
		}}
		onPreviousPageClick={() => {
			table.previousPage();
		}}
		currPage={pagination.pageIndex + 1}
		totalPages={pageCount}
		filterFieldDisabled={false}
		query={customerInfoVM.query}
		hasData={data.length > 0}
		onQueryChange={(q) => {
			customerInfoVM.query = q;
			debouncedSearch();
		}}
		filterFieldPlaceholder="Search customers..."
	/>
{:else}
	<div class="grid h-full place-items-center p-4 py-12 md:p-8 md:py-32">
		<Title size="h5">No Data found</Title>
	</div>
{/if}
