import { useState } from 'react'

import { Typography } from '@scandic-hotels/design-system/Typography'

import { ThemeSwitcher } from './ThemeSwitcher'
import { ContentPage } from './ContentPage'

import styles from './main.module.css'
import { HotelPage } from './HotelPage'

export function Main() {
  const [theme, setTheme] = useState('scandic')

  const pathname = window.location.pathname

  return (
    <>
      <div className={styles.wrap}>
        <ThemeSwitcher
          defaultSelectedKey={theme}
          onSelectionChange={(key) => {
            setTheme(key.toString())
          }}
        />
        <nav>
          <ul className={styles.nav}>
            <li>
              <a href="/content-page">Content page</a>
            </li>
            <li>
              <a href="/hotel-page">Hotel page</a>
            </li>
          </ul>
        </nav>
      </div>

      <div className={[styles.page, theme].join(' ')}>
        {/* poor mans routing */}
        {pathname === '/content-page' && <ContentPage />}
        {pathname === '/hotel-page' && <HotelPage />}
        {pathname === '/' && (
          <>
            <Typography variant="Title/lg">
              <h1>Examples</h1>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <p>Select a page</p>
            </Typography>
          </>
        )}
      </div>
    </>
  )
}