import { useEffect, useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import { Route, Switch, useLocation } from "react-router-dom"
import { CookieBanner, Footer, Loading } from "./components"
import {
	About,
	AddArticle,
	Article,
	Blog,
	Contact,
	Home,
	PrivacyPolicy,
	Service,
	Error,
} from "./pages"
import {
	fetchProjects,
	fetchServices,
	getCookie,
	fetchText,
	fetchBlog,
} from "./redux"
import { servicesPaths } from "./utils"

function App() {
	const [loading, setLoading] = useState(true)
	const dispatch = useDispatch()
	const { pathname } = useLocation()
	const cookie = useSelector(getCookie)

	useEffect(() => {
		const scrollToTop = () => window.scrollTo(0, 0)
		scrollToTop()
	}, [pathname])

	useEffect(() => {
		fetchProjects().then(projects =>
			dispatch({ type: "SET_PROJECTS", projects })
		)

		fetchServices().then(services =>
			dispatch({ type: "SET_SERVICES", services })
		)

		fetchText().then(text => dispatch({ type: "SET_TEXT", text }))

		fetchBlog().then(blog => dispatch({ type: "SET_BLOG", blog }))

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [])

	useEffect(() => {
		const handleLoading = () => {
			setLoading(true)
			setTimeout(() => setLoading(false), 1300)
		}
		handleLoading()
	}, [pathname])

	if (loading) return <Loading />

	return (
		<>
			{loading && <Loading />}
			<Switch>
				<Route exact path="/" component={Home} />
				<Route path="/contact" component={Contact} />

				<Route
					path="/politica-de-confidentialitate"
					component={PrivacyPolicy}
				/>

				<Route
					path={process.env.REACT_APP_DASHBOARD_PATH}
					component={AddArticle}
				/>

				<Route exact path="/despre-noi" component={About} />

				<Route exact path="/blog" component={Blog} />
				<Route path="/blog/:articleId" component={Article} />

				{servicesPaths.map(s => (
					<Route key={s} path={s} component={Service} />
				))}

				<Route component={Error} />
			</Switch>
			{pathname !== process.env.REACT_APP_DASHBOARD_PATH && <Footer />}
			{!cookie.includes("policy") && <CookieBanner />}
		</>
	)
}

export default App