import React, { useEffect } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { connect } from "react-redux";
import { publicApi } from "./redux/actions";
import Navbar from "./components/Navbar";
import BG from "./components/BG";
import BottomNavigation from "./components/BottomNavigation";

import _ from "lodash";
import Home from "./views/Home";
import Auth from "./views/Auth";
import Products from "./views/Products";
import Product from "./views/Product";
import ShoppingCart from "./views/ShoppingCart";
import DeliveryForm from "./views/DeliveryForm";
import Videos from "./views/Videos";
import Video from "./views/Video";
import VideoDisplay from "./views/VideoDisplay";
import QR from "./views/QR";
import NotFound from "./views/404";
import Orders from "./views/Orders";
import Order from "./views/Order";
import Activation from "./views/Activation";
import Faq from "./views/Faq";
import Contact from "./views/Contact";
import Dashboard from "./views/Dashboard";
// import VideoTube from "./views/Home/VideoTube";

function Router({
  isDark,
  isMobile,
  isLogin,
  headerOptions,
  setDesktopContentTransform,
}) {
  useEffect(() => {
    window.addEventListener("scroll", () => {
      // if (!isMobile) {
      //   window.addEventListener("scroll", () => {
      //     if (window.scrollY >= 64) {
      //       setDesktopContentTransform(true);
      //     } else {
      //       setDesktopContentTransform(false);
      //     }
      //   });
      // }
    });
  }, []);
  return (
    <div className={_.join([isDark ? "dark" : ""], " ")}>
      <div
        className={_.join(
          [
            "min-h-screen min-w-screen rtl overflow-x-hidden pb-20 lg:py-0",
            isDark ? "" : "bg-white",
            headerOptions?.shown ? "pt-16" : "pt-4",
          ],
          " "
        )}
      >
        <BrowserRouter>
          {headerOptions?.shown && <Navbar headerOptions={headerOptions} />}
          {isMobile && (
            <>
              <BG />
              <BottomNavigation />
            </>
          )}
          <Routes>
            <Route
              path="/"
              exact
              element={
                <Home
                  headerOptions={{
                    logo: true,
                    hamburgerMenu: true,
                    qr: true,
                    title: false,
                    back: false,
                    shown: true,
                    menu: false,
                  }}
                />
              }
            />
            <Route path="/login" exact element={<Auth page="login" />} />
            <Route
              path="/signup"
              exact
              element={
                <Auth
                  page="signup"
                  headerOptions={{
                    logo: true,
                    hamburgerMenu: true,
                    qr: true,
                    title: false,
                    back: false,
                    shown: true,
                    menu: false,
                  }}
                />
              }
            />
            <Route path="/profile" exact element={<Auth page="profile" />} />
            <Route
              path="/products"
              exact
              element={
                <Products headerOptions={{ shown: isMobile ? false : true }} />
              }
            />
            <Route
              path="/products/:id"
              exact
              element={
                <Product
                  headerOptions={{
                    shown: true,
                    logo: false,
                    hamburgerMenu: false,
                    title: false,
                    back: true,
                    menu: true,
                    bookmark: true,
                  }}
                />
              }
            />
            <Route
              path="/cart"
              exact
              element={
                <ShoppingCart
                  headerOptions={{
                    shown: true,
                    title: isMobile && "سبد خرید",
                    back: isMobile && true,
                  }}
                />
              }
            />
            <Route
              path="/cart/delivery-form"
              exact
              element={
                <DeliveryForm
                  headerOptions={{
                    shown: true,
                    title: "سبد خرید",
                    back: true,
                  }}
                />
              }
            />
            <Route
              path="/videos"
              exact
              element={
                <Videos
                  headerOptions={{
                    logo: true,
                    hamburgerMenu: true,
                    qr: true,
                    title: false,
                    back: false,
                    shown: true,
                    menu: false,
                  }}
                />
              }
            />
            <Route
              path="/videos/:id"
              exact
              element={
                <Video
                  headerOptions={{
                    logo: false,
                    hamburgerMenu: false,
                    qr: false,
                    title: false,
                    back: true,
                    shown: true,
                    menu: true,
                    bookmark: true,
                  }}
                />
              }
            />
            <Route
              path="/videos/:id/display"
              exact
              element={
                <VideoDisplay
                  headerOptions={{
                    logo: false,
                    hamburgerMenu: false,
                    qr: false,
                    title: false,
                    back: true,
                    shown: true,
                    menu: true,
                    bookmark: false,
                  }}
                />
              }
            />
            <Route
              path="/scan"
              exact
              element={
                <QR
                  headerOptions={{
                    shown: "false",
                  }}
                  page="content"
                />
              }
            />
            <Route
              path="/orders"
              exact
              element={
                <Orders
                  headerOptions={{
                    shown: "true",
                    title: "سفارش من",
                    back: true,
                    logo: false,
                    menu: false,
                    hamburgerMenu: false,
                    bookmark: false,
                  }}
                />
              }
            />
            <Route
              path="/orders/order"
              exact
              element={
                <Order
                  headerOptions={{
                    logo: true,
                    hamburgerMenu: false,
                    qr: true,
                    title: false,
                    shown: true,
                    menu: false,
                    back: true,
                  }}
                />
              }
            />
            <Route
              path="/activation"
              exact
              element={
                <Activation
                  headerOptions={{
                    logo: true,
                    hamburgerMenu: true,
                    qr: true,
                    title: false,
                    shown: true,
                    menu: false,
                    back: false,
                  }}
                />
              }
            />
            <Route
              path="/faq"
              exact
              element={
                <Faq
                  headerOptions={{
                    logo: true,
                    hamburgerMenu: true,
                    qr: true,
                    title: false,
                    shown: true,
                    menu: false,
                    back: false,
                  }}
                />
              }
            />
            <Route
              path="/contact-us"
              exact
              element={
                <Contact
                  headerOptions={{
                    logo: true,
                    hamburgerMenu: true,
                    qr: true,
                    title: false,
                    shown: true,
                    menu: false,
                    back: false,
                  }}
                />
              }
            />
            <Route path="/dashboard" exact element={<Dashboard />} />
            <Route
              path="*"
              exact
              element={
                <NotFound
                  headerOptions={{
                    logo: true,
                    hamburgerMenu: true,
                    qr: true,
                    title: false,
                    back: false,
                    shown: true,
                    menu: false,
                  }}
                />
              }
            />
          </Routes>
        </BrowserRouter>
      </div>
    </div>
  );
}

const mapStateToProps = (state) => ({
  isDark: state.publicApi.isDark,
  isMobile: state.publicApi.isMobile,
  isLogin: state.user.status,
  headerOptions: state.publicApi.headerOptions,
});

const mapDispatchToProps = {
  setDesktopContentTransform: publicApi.setDesktopContentTransform,
};

export default connect(mapStateToProps, mapDispatchToProps)(Router);