import { Redirect, Route } from "react-router-dom";
import {
  IonApp,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
  setupIonicReact,
} from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import {
  ellipse,
  informationCircleSharp,
  bookSharp,
  appsSharp,
  home,
  peopleCircleSharp,
} from "ionicons/icons";
import Home from "./pages/Home";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

/* Theme variables */
import "./theme/variables.css";
import AdviceListPage from "./pages/AdviceListPage";
import LawListPage from "./pages/LawListPage";
import ArticlePage from "./pages/ArticlePage";
import "./theme/global.css";
import "react-notion-x/src/styles.css";
import AboutListPage from "./pages/AboutListPage";
import CasitaPage from "./pages/services/CasitaPage";
import EducacionPage from "./pages/services/EducacionPage";
import LazosPage from "./pages/services/LazosPage";
import SupervisadasPage from "./pages/services/SupervisadasPage";
import InfoPage from "./pages/services/InfoPage";
import TerapeuticasPage from "./pages/services/TerapeuticasPage";
import ConsejosPage from "./pages/services/ConsejosPage";
import TalleresPage from "./pages/services/TalleresPage";
import ApoyoPage from "./pages/services/ApoyoPage";

setupIonicReact();

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route exact path="/home">
            <Home />
          </Route>

          <Route path="/advice">
            <AdviceListPage />
          </Route>

          <Route path="/laws">
            <LawListPage />
          </Route>

          <Route path="/article/:articleId" component={ArticlePage} />

          <Route path="/services/info">
            <InfoPage />
          </Route>

          <Route path="/services/lazos">
            <LazosPage />
          </Route>

          <Route path="/services/terapeuticas">
            <TerapeuticasPage />
          </Route>

          <Route path="/services/educacion">
            <EducacionPage />
          </Route>

          <Route path="/services/supervisadas">
            <SupervisadasPage />
          </Route>

          <Route path="/services/consejos">
            <ConsejosPage />
          </Route>

          <Route path="/services/talleres">
            <TalleresPage />
          </Route>

          <Route path="/services/apoyo">
            <ApoyoPage />
          </Route>

          <Route path="/about">
            <AboutListPage />
          </Route>

          <Route path="/services/casita">
            <CasitaPage />
          </Route>

          <Route exact path="/">
            <Redirect to="/home" />
          </Route>
        </IonRouterOutlet>

        <IonTabBar slot="bottom">
          <IonTabButton tab="home" href="/home">
            <IonIcon icon={home} />
            <IonLabel>Home</IonLabel>
          </IonTabButton>

          <IonTabButton tab="advice" href="/advice">
            <IonIcon icon={peopleCircleSharp} />
            <IonLabel>Advice</IonLabel>
          </IonTabButton>

          <IonTabButton tab="laws" href="/laws">
            <IonIcon icon={bookSharp} />
            <IonLabel>Laws</IonLabel>
          </IonTabButton>
          <IonTabButton tab="about" href="/about">
            <IonIcon icon={informationCircleSharp} />
            <IonLabel>About</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;