import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'
import Products from "./routes/products/products";
import Product from "./routes/products/product";
import Companies from "./routes/companies/companies";
import Account from "./routes/account/account";
import Cart from "./routes/account/cart";
import { EditAccount } from './routes/account/edit';
import { Edit as EditAddress } from "./routes/account/addresses/edit";
import { create, editAccount, authenticatedEdit } from './clients/actions';
import Layout from "./components/layout";
import { accountLoader, loader, productLoader, addressLoader, cardLoader, cartLoader } from "./clients/loaders"; 
import './index.css';
import { Create as CreateAddress } from './routes/account/addresses/create';
import { Edit as EditCard } from './routes/account/cards/edit';
import { Create as CreateCard } from './routes/account/cards/create';

const routes = [
  {
    path: '/products',
    loader: loader,
    element: <Products/>
  },
  {
    path: "products/:productId",
    loader: productLoader,
    element: <Product/>
  },
  {
    path: "/companies",
    loader: loader,
    element: <Companies/>
  },
  {
    path: "/account",
    loader: accountLoader,
    element: <Account/>
  },
  {
    path: "/account/edit",
    element: <EditAccount/>,
    loader: accountLoader,
    action: editAccount
  },
  {
    path: "/account/addresses/:addressId/edit",
    element: <EditAddress/>,
    loader: addressLoader,
    action: authenticatedEdit,
  },
  {
    path: "/account/addresses/new",
    element: <CreateAddress/>,
    action: create
  },
  {
    path: "/account/cards/:cardId/edit",
    element: <EditCard/>,
    loader: cardLoader,
    action: authenticatedEdit
  },
  {
    path: "/account/cards/new",
    element: <CreateCard/>,
    action: create
  },
  {
    path: "/account/cart",
    element: <Cart/>,
    loader: cartLoader
  },
  {
    path: '/',
    element: <Navigate to='/products'/>
  }
];

const router = createBrowserRouter(routes);

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Layout>
      <RouterProvider router={router}/>
    </Layout>
  </React.StrictMode>
)