import Header from "@/components/ChatsPath/components/Header";
import styles from "./styles.module.scss";
import { Outlet } from "react-router-dom";
import routes from "@/routes";
import { images } from "@/components/ChatsPath/data";
import { useState } from "react";
import DrawerMenu from "@/components/ChatsPath/components/DrawerMenu";

interface IBackgroundPages {
  [route: string]: string;
}

const backgroundPages: IBackgroundPages = {
  [routes.client.chatsAnswerHub()]: images("answers_hub_bg.webp"),
};

const routesWithoutBackButton = [
  routes.client.chatsWelcome(),
  routes.client.chatsCategories(),
];

const routesWithoutBurgerButton = [
  routes.client.chatsCategories(),
  routes.client.chatsConnecting(),
];

const routesWithoutHeader: string[] = [routes.client.chatsExpert()];

const routesWithoutLogo = [routes.client.chatsConnecting()];

function Layout() {
  const bgImage = backgroundPages[window.location.pathname];
  const [open, setOpen] = useState(false);

  const toggleDrawer = (newOpen: boolean) => () => {
    setOpen(newOpen);
  };

  const routeExists = (routes: string[]) => {
    for (const route of routes) {
      if (window.location.pathname.includes(route)) return false;
    }
    return true;
  };

  const isBackButtonVisible = () => {
    return routeExists(routesWithoutBackButton);
  };

  const isBurgerButtonVisible = () => {
    return routeExists(routesWithoutBurgerButton);
  };

  const isLogoVisible = () => {
    return routeExists(routesWithoutLogo);
  };

  const isHeaderVisible = () => {
    return routeExists(routesWithoutHeader);
  };

  return (
    <div className={styles.container}>
      <DrawerMenu open={open} toggleDrawer={() => toggleDrawer(false)} />
      {bgImage && (
        <>
          <img
            className={styles["background-image"]}
            src={bgImage}
            alt="background image"
          />
        </>
      )}
      <div className={styles["gradient-overlay"]}>
        {isHeaderVisible() && (
          <Header
            isBackButtonVisible={isBackButtonVisible()}
            isBurgerVisible={isBurgerButtonVisible()}
            isLogoVisible={isLogoVisible()}
            onBurger={toggleDrawer(true)}
          />
        )}
        <Outlet />
      </div>
    </div>
  );
}

export default Layout;
