import { Button, createTheme, Group, MantineProvider, Modal } from '@mantine/core';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import { Login } from '.';
import { GlobalNotification } from '../components';
import { PrivateLayout } from '../layouts';
import { useConfirmStore } from '../lib/zustand/use-confirm';
import Links from '../system/links';

const theme = createTheme({});

export default function App() {
    const { props, open, close } = useConfirmStore();

    return (
        <BrowserRouter>
            <MantineProvider theme={theme} defaultColorScheme="dark">
                <Routes>
                    <Route path={Links.HOME} element={<Navigate to={Links.DASHBOARD} replace />} />
                    <Route path={Links.LOGIN} element={<Login />} />
                    <Route element={<PrivateLayout />}>
                        {Links.MENUS.map((item) => {
                            return <Route key={item.path} path={item.path} element={<item.element />} />;
                        })}
                    </Route>
                </Routes>

                <GlobalNotification />

                <Modal zIndex={9999} opened={open} onClose={close} title={props?.title || 'Are you sure this action?'}>
                    {props?.message}
                    <Group mt="lg" justify="flex-end">
                        <Button onClick={close} variant="default">
                            Cancel
                        </Button>
                        <Button
                            onClick={
                                props.handleOk
                                    ? async () => {
                                          props.handleOk?.();
                                          close();
                                      }
                                    : undefined
                            }
                            color="red"
                            {...props.okButton}
                        >
                            {props.okButton?.value || 'Delete'}
                        </Button>
                    </Group>
                </Modal>
            </MantineProvider>
        </BrowserRouter>
    );
}
