import { extract, CreateTable, type Store, type Table } from '@datahook/trigger';

type TaskOwner = {
    ownerID: number;
    firstName: string;
    lastName: string;
}

type Task = {
    ownerID: number;
    description: string;
};

interface MyStore extends Store {
    tables: {
        taskOwners: Table<TaskOwner>;
        activeTasks: Table<Task>;
        completedTasks: Table<Task>;
    };
}

const s: MyStore = {
    tables: {
        taskOwners: CreateTable<TaskOwner>({ ownerID: [], firstName: [], lastName: [], }),
        activeTasks: CreateTable<Task>({ ownerID: [], description: [], }),
        completedTasks: CreateTable<Task>({ ownerID: [], description: [], }),
    },
};

/*** EXTRACT AND EXPORT OUR STORE */
export const { tables } = extract(s);

import { tables } from './store';

function MyComponent() {
    const rows = tables.activeTasks.use();

    return (
        <div>
            There are {rows.length} active tasks in the table
        </div>
    )
}