import * as React from 'react'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { useAppSelector, useAppDispatch } from '@owlads/hooks'
import { set } from '@owlads/slice/is-mobile'

import Index from '@owlads/components/index'

export default function Router (): JSX.Element {
    const isMobile = useAppSelector(state => state.isMobile.value)
    if (isMobile === null) {
        setIsMobile()
        return (
            <>
                <p>Cargando configuración...</p>
            </>
        )
    }
    window.addEventListener('resize', () => {
        setIsMobile()
    })
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Index/>}/>
            </Routes>
        </BrowserRouter>
    )
}

function setIsMobile (): void {
    const dispatch = useAppDispatch()
    const isThisAMobile = window.matchMedia('(max-width: 700px)').matches
    dispatch(set(isThisAMobile))
}