import { Button, Center, Stack } from '@mantine/core';
import { Dashboard, Widgets, useDashboardStore } from '~/tools/useDashboard';

export default function HomePage() {
  const { setCurrentDashboard, currentDashboard, addDashboard } = useDashboardStore(
    (state) => state
  );
  return (
    <>
      <Center>
        <Stack p={200}>
          Current dashboard : {currentDashboard?.name || 'none'}
          <Button
            onClick={() => {
              const newDashboard: Dashboard = {
                id: 1,
                name: 'Dashboard 1',
                widgets: new Widgets([]),
              };
              addDashboard(newDashboard);
              setCurrentDashboard(newDashboard);
              console.log('Widget with the longest name', currentDashboard?.widgets.getLongestName);
            }}
          >
            Set dashboard
          </Button>
          Widget with the longest name : {currentDashboard?.widgets.getLongestName().name || 'none'}
        </Stack>
      </Center>
    </>
  );
}