import React from 'react';
import { Helmet } from 'react-helmet';
import { Toaster } from 'react-hot-toast';
import { Navigate, Route, Routes } from 'react-router-dom';

import { Layout } from './components';
import { Dashboard } from './modules';
import { AppIframe } from './modules/dashboard/AppIframe';

import { DASHBOARD_APPS } from './modules/dashboard/consts';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
function App() {
  return (
    <>
      <Helmet>
        <title>Colli</title>
        <meta name="description" content="Stackspin" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon_lit_transp.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="/assets/lit_logos/lit_transp_32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/assets/lit_logos/lit_transp_16x16" />
        <link rel="manifest" href="/site.webmanifest" />
        <meta name="msapplication-TileColor" content="#da532c" />
        <meta name="theme-color" content="#ffffff" />
      </Helmet>

      <div className="app bg-gray-50 min-h-screen flex flex-col">
        <Layout>
          <Routes>
            <Route path="/dashboard" element={<Dashboard />} />
            {DASHBOARD_APPS('').map((app) => (
              <Route key={app.name} path={app.internalUrl} element={<AppIframe app={app} />} />
            ))}
            <Route path="*" element={<Navigate to="/dashboard" />} />
          </Routes>
        </Layout>

        {/* Place to load notifications */}
        <div
          aria-live="assertive"
          className="fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start"
        >
          <div className="w-full flex flex-col items-center space-y-4 sm:items-end" />
        </div>
      </div>
      <Toaster />
    </>
  );
}

export default App;