import { useEffect } from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { CustomerService } from 'Frontend/generated/endpoints';
import { Grid, GridSortColumn } from '@vaadin/react-components';
import { NavLink } from 'react-router-dom';
import Customer from 'Frontend/generated/org/javacodegeeks/hilla/Customer';
import { ViewConfig } from '@vaadin/hilla-file-router/types.js';

export const config: ViewConfig = {
    title: 'Customer List',
    menu: {
        order: 1
    }
};


export default function Customers() {
    const customers = useSignal<Customer[]>([]);

    async function fetchCustomers() {
        customers.value = await CustomerService.findAll();
    }

    useEffect(() => {
        fetchCustomers();
    }, []);

    return (
        <div className="p-m flex flex-col gap-m">
            <h2>Customers</h2>
            <Grid items={customers.value}>
                <GridSortColumn path="name">
                    {({ item }) => <NavLink to={`customers/${item.id}/edit`}>{item.name}</NavLink>}
                </GridSortColumn>
                <GridSortColumn path="email" />
                <GridSortColumn path="mobile" />
            </Grid>
        </div>
    );
}
