import { Flex, HStack, Icon, IconButton, Spacer } from '@chakra-ui/react';
import React, { Suspense, useState } from 'react';
import { SkipNavContent, SkipNavLink } from '@chakra-ui/skip-nav';

import { Book } from './scripts/searcher';
import BooksView from './components/BooksView';
import ColorModeSwitch from './components/ColorModeSwitch';
import ExternalLink from './components/ExternalLink';
import { FaGithub } from 'react-icons/fa';
import Footer from './components/Footer';
import Header from './components/Header';
import LanguageSwitch from './components/LanguageSwitch';
import Search from './components/Search';
import { repository } from '../package.json';
import { useTranslation } from 'react-i18next';

const Main: React.FC = () => {
  const [books, setBooks] = useState<Book[]>([]);
  return (
    <>
      <SkipNavContent />
      <Search setBooks={setBooks} />
      <BooksView books={books} />
    </>
  );
};

const Settings =
  import.meta.env.VITE_TAURI === '1'
    ? React.lazy(() => import('./components/Settings-tauri'))
    : React.lazy(() => import('./components/Settings'));

const App: React.FC = () => {
  const { t } = useTranslation();

  return (
    <Flex direction="column" minH="100vh">
      <SkipNavLink>Skip to content</SkipNavLink>
      <Header title="Millelibri">
        <HStack spacing={{ base: 1, md: 2 }}>
          <IconButton
            as={ExternalLink}
            aria-label={t('nav.repository')}
            title={t('nav.repository') ?? ''}
            href={repository}
            variant="ghost"
            icon={<Icon as={FaGithub} boxSize={5} />}
          />
          <LanguageSwitch />
          <ColorModeSwitch />
          <Suspense>
            <Settings />
          </Suspense>
        </HStack>
      </Header>

      <Main />

      <Spacer />
      <Footer>
        <a href='https://www.lamacchinadesiderante.org'>lamacchinadesiderante.org</a>
      </Footer>
    </Flex>
  );
};

export default App;