import styled from "styled-components"
import React, { Suspense } from "react"
import { Switch, Route } from "react-router-dom"
import CenteredLoader from "../ui/CenteredLoader"
import RouteTracker from "../tracking/RouteTracker"

type ContentAreaProps = {
  profileId: string
}
const ContentAreaRoot = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  overflow: auto;
  z-index: 0;
  padding-left: 70px;
  overflow: hidden;

  & > *{
    flex-shrink: 0;
  }
`
const ReceptionPageContent = React.lazy(() => import("./ReceptionPageContent"))
const NetworkingPageContent = React.lazy(() => import("./NetworkingPageContent"))
const MyProfilePageContent = React.lazy(() => import("./MyProfilePageContent"))
const MyFavoritesPageContent = React.lazy(() => import("./MyFavoritesPageContent"))
const CategoriesPageContent = React.lazy(() => import("./CategoriesPageContent"))
const InfosPageContent = React.lazy(() => import("./InfosPageContent"))
const TestPageContent = React.lazy(() => import("./TestPage"))
const HistoryPageContent = React.lazy(() => import("./HistoryPageContent"))

const OrganizationDetailPageContent = React.lazy(() => import("./detailPages/OrganizationDetailPageContent"))
const PersonDetailPageContent = React.lazy(() => import("./detailPages/PersonDetailPageContent"))
const EventDateDetailPageContent = React.lazy(() => import("./detailPages/EventDateDetailPageContent"))
const ProductDetailPageContent = React.lazy(() => import("./detailPages/ProductDetailPageContent"))
const NewsDetailPageContent = React.lazy(() => import("./detailPages/NewsDetailPageContent"))
const TrademarkDetailPageContent = React.lazy(() => import("./detailPages/TrademarkDetailPageContent"))
const CouponDetailPageContent = React.lazy(() => import("./detailPages/CouponDetailPageContent"))
const ConferenceRoom = React.lazy(() => import("../conference/ConferenceRoom"))

const ConferencePageContent = React.lazy(() => import("../conference/ConferencePageContent"))
const ExhibitorsPageContent = React.lazy(() => import("./ExhibitorsPageContent"))
const SpeakerPageContent = React.lazy(() => import("./SpeakerPageContent"))
const SessionsPageContent = React.lazy(() => import("./sessions/SessionsPageContent"))
const LiveStreamsPageContent = React.lazy(() => import("./LiveStreamsPageContent"))
const ProductsPageContent = React.lazy(() => import("./ProductsPageContent"))
const NewsPageContent = React.lazy(() => import("./NewsPageContent"))
const TrademarksPageContent = React.lazy(() => import("./TrademarksPageContent"))
const CouponsPageContent = React.lazy(() => import("./CouponsPageContent"))
const SponsorsPageContent = React.lazy(() => import("./SponsorsPageContent"))
const VideoPageContent = React.lazy(() => import("./VideoPageContent"))
const SchedulePageContent = React.lazy(() => import("./SchedulePageContent"))
const ExperiencesPageContent = React.lazy(() => import("./ExperiencesPageContent"))
const ProgramPageContent = React.lazy(() => import("./program/ProgramPageContent"))

export const meetingPageRoute = "/meetings/:kind/:roomName"
const ContentArea: React.FunctionComponent<ContentAreaProps> = (props) => (

  <ContentAreaRoot>
    <Suspense fallback={<CenteredLoader>Loading...</CenteredLoader>}>
      <RouteTracker profileId={props.profileId} />
      <Switch>
        <Route path="/" exact component={ReceptionPageContent} />
        <Route path="/networking" component={NetworkingPageContent} />
        <Route path="/myprofile" component={MyProfilePageContent} />
        <Route path="/favorites" component={MyFavoritesPageContent} />
        <Route path="/categories" component={CategoriesPageContent} />
        <Route path="/info" component={InfosPageContent} />
        <Route path="/test" component={TestPageContent} />
        <Route path="/history" component={HistoryPageContent} />

        {/** Details */}
        <Route path="/organization/:organizationName--:organizationId" component={OrganizationDetailPageContent} />
        <Route path="/person/:personName--:personId--:userId" component={PersonDetailPageContent} />
        <Route path="/eventdate/:eventdateName--:eventDateId" component={EventDateDetailPageContent} />
        <Route path="/product/:productName--:productId" component={ProductDetailPageContent} />
        <Route path="/news/:newsName--:newsId" component={NewsDetailPageContent} />
        <Route path="/trademark/:trademarkName--:trademarkId" component={TrademarkDetailPageContent} />
        <Route path="/coupon/:couponName--:couponId" component={CouponDetailPageContent} />
        <Route path={meetingPageRoute} component={ConferenceRoom} />
        <Route path="/meetings/:groupId" component={ConferencePageContent} />
        <Route path="/meetings" component={ConferencePageContent} />

        {/* the entity lists must be places below the detail pages because of the path pattern */}
        <Route path="/organization" component={ExhibitorsPageContent} />
        <Route path="/companiesFav" component={ExhibitorsPageContent} />
        <Route path="/person" component={SpeakerPageContent} />
        <Route path="/peopleFav" component={SpeakerPageContent} />
        <Route path="/eventdate" component={SessionsPageContent} />
        <Route path="/eventdateFav" component={SessionsPageContent} />
        <Route path="/livestreams" component={LiveStreamsPageContent} />
        <Route path="/product" component={ProductsPageContent} />
        <Route path="/productsFav" component={ProductsPageContent} />
        <Route path="/news" component={NewsPageContent} />
        <Route path="/trademark" component={TrademarksPageContent} />
        <Route path="/trademarksFav" component={TrademarksPageContent} />
        <Route path="/coupon" component={CouponsPageContent} />
        <Route path="/sponsor" component={SponsorsPageContent} />
        <Route path="/masterclasses/:roomId" component={VideoPageContent} />
        <Route path="/masterclasses/" component={VideoPageContent} />
        <Route path="/experiences" component={ExperiencesPageContent} />
        <Route path="/schedule" component={SchedulePageContent} />
        <Route path="/program" component={ProgramPageContent} />
      </Switch>
    </Suspense>
  </ContentAreaRoot>
)

export default ContentArea