import { Outlet, useLocation } from "react-router";
import List from "../../md-components/List";
import ListItem from "../../md-components/ListItem";
import { Link } from "react-router-dom";
import Icon from "../../md-components/Icon";

const AccountPage = () => {
  const location = useLocation();
  const menuRoutes = [
    {
      name: "Главная",
      path: "/",
      icon: "home",
    },
    {
      name: "Коллекции",
      path: "/collections",
      icon: "collections_bookmark",
    },
    {
      name: "Полка",
      path: "/shelve",
      icon: "shelves",
    },
    {
      name: "Загрузить книгу",
      path: "/upload",
      icon: "upload",
    },
    // {
    //     name: "Настройки",
    //     path: "/settings",
    //     icon: "settings",
    // },
    // {
    //     name: "Безопасность",
    //     path: "/security",
    //     icon: "security",
    // },
    // {
    //     name: "Администрирование",
    //     path: "/admin",
    //     icon: "admin_panel_settings",
    // },
  ];
  return (
    <>
      <div className="main_page_container">
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            paddingTop: 50,
            color: "white",
          }}
        >
          <List
            style={{
              border: "0px solid gray",
              borderRadius: 15,
              padding: 10,
              gap: 10,
              width: 240,
            }}
            className="main_side_menu"
          >
            {menuRoutes.map((route) => (
              <Link
                to={route.path}
                style={{ textDecoration: "none" }}
                key={route.path}
              >
                <ListItem
                  type="button"
                  style={{
                    borderRadius: 15,
                    background:
                      location.pathname == route.path
                        ? "var(--md-sys-color-primary-container)"
                        : "",
                  }}
                  onClick={() => {} /*navigate(route.path)*/}
                >
                  <Icon slot="start">{route.icon}</Icon>
                  {route.name}
                </ListItem>
              </Link>
            ))}
          </List>
        </div>
        <div style={{ paddingTop: 20, width: "100%" }}>
          <Outlet />
        </div>
      </div>
      <div className="main_down_menu">
        {menuRoutes.map((route, i) => (
          <Link
            className="main_down_menu_item"
            to={route.path}
            id={"route" + i}
            key={i}
          >
            <div
              className={
                "icon " + (location.pathname == route.path ? "active" : "")
              }
            >
              <md-ripple for={"route" + i} />
              <Icon>{route.icon}</Icon>
            </div>
            <span>{route.name}</span>
          </Link>
        ))}
      </div>
    </>
  );
};

export default AccountPage;