frontPanel/src/ui_kit/Sidebar/SidebarMobile.tsx

import { FC, useEffect, useRef, useState } from "react";
import {
  Box,
  FormControl,
  IconButton,
  Popper,
  TextField,
  Typography,
} from "@mui/material";
import { People } from "@mui/icons-material";

import { SidebarModal } from "./SidebarModal";

import BackArrowIcon from "@icons/BackArrowIcon";
import { ChartLineUp } from "./icons/ChartLineUp";
import { ReturnTime } from "./icons/ReturnTime";
import { Question } from "./icons/Question";
import { Settings } from "./icons/Settings";
import { Pencil } from "./icons/Pencil";
import { ArrowDown } from "./icons/ArrowDown";
import Sidebar from "@ui_kit/Sidebar/Sidebar";
import { Link, useNavigate } from "react-router-dom";
import { updateQuiz } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { LogoutButton } from "@ui_kit/LogoutButton";
import { ToTariffsButton } from "@ui_kit/Toolbars/ToTariffsButton";
import { logout } from "@api/auth";
import { enqueueSnackbar } from "notistack";
import { clearAuthToken } from "@frontend/kitui";
import { clearUserData } from "@root/user";

interface Iprops {
  open: boolean;
  changePage: (step: number) => void;
  setHeightSitebar: any;
}

const quizSetupSteps = [
  { sidebarIcon: <Pencil style={{ color: "#974BFA", fontSize: "24px" }} /> },
  { sidebarIcon: <People style={{ color: "#974BFA", fontSize: "24px" }} /> },
  {
    sidebarIcon: <ChartLineUp style={{ color: "#974BFA", fontSize: "24px" }} />,
  },
  {
    sidebarIcon: <ReturnTime style={{ color: "#974BFA", fontSize: "24px" }} />,
  },
  { sidebarIcon: <Question style={{ color: "#974BFA", fontSize: "24px" }} /> },
] as const;

export const SidebarMobile: FC<Iprops> = ({
  open,
  changePage,
  setHeightSitebar,
}) => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [inputOpen, setInputOpen] = useState<boolean>(false);
  const quiz = useCurrentQuiz();
  const ref = useRef(null);
  const heightSidebar = useRef(null);
  const navigate = useNavigate();

  const observer = useRef(
    new ResizeObserver((entries) => {
      const { height } = entries[0].contentRect;
      setHeightSitebar(height);
    }),
  );

  useEffect(() => {
    observer.current.observe(heightSidebar.current);
  }, [heightSidebar, observer]);

  const handleClick = (event) => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };
  async function handleLogoutClick() {
    const [, logoutError] = await logout();

    if (logoutError) {
      return enqueueSnackbar(logoutError);
    }

    clearAuthToken();
    clearUserData();
    navigate("/");
  }

  const clickInput = (event) => {
    if (ref.current && !ref.current.contains(event.target)) setInputOpen(false);
  };
  useEffect(() => {
    document.addEventListener("mousedown", clickInput);
    return () => {
      document.removeEventListener("mousedown", clickInput);
    };
  }, []);
  const openPopper = Boolean(anchorEl);
  const id = openPopper ? "simple-popper" : undefined;
  return (
    <Box
      ref={heightSidebar}
      sx={{
        display: open ? "block" : "none",
        minHeight: "134px",
        padding: "20px 16px 16px 16px",
        background: "#333647",
        borderTop: "1px solid  #9A9AAF",
        borderBottomLeftRadius: "8px",
        borderBottomRightRadius: "8px",
        transitionDuration: "200ms",
      }}
    >
      <Box sx={{ display: "flex", alignItems: "center", position: "relative" }}>
        <Link to="/list">
          <IconButton sx={{ p: "6px" }}>
            <BackArrowIcon color={"white"} />
          </IconButton>
        </Link>

        <Box
          sx={{
            ml: "15px",
            display: "flex",
            alignItems: "end",
            width: "100%",
            justifyContent: "space-between",
          }}
        >
          <Box>
            <Typography sx={{ fontSize: "12px", color: "#9A9AAF" }}>
              Название
            </Typography>
            {inputOpen ? (
              <FormControl fullWidth variant="standard">
                <TextField
                  ref={ref}
                  value={quiz.name}
                  onChange={(e) =>
                    updateQuiz(quiz.id, (quiz) => {
                      quiz.name = e.target.value;
                    })
                  }
                  fullWidth
                  id="project-name"
                  placeholder="Название проекта"
                  sx={{
                    width: "270px",
                    "& .MuiInputBase-root": {
                      height: "34px",
                      borderRadius: "8px",
                      p: 0,
                    },
                  }}
                  inputProps={{
                    sx: {
                      height: "20px",
                      borderRadius: "8px",
                      fontSize: "16px",
                      lineHeight: "20px",
                      p: "7px",
                      color: "white",
                      "&::placeholder": {
                        opacity: 1,
                      },
                    },
                  }}
                />
              </FormControl>
            ) : (
              <Typography color={"white"} sx={{ wordBreak: "break-word" }}>
                {quiz.name}
              </Typography>
            )}
          </Box>
          <IconButton onClick={() => setInputOpen(true)}>
            <Pencil
              style={{
                position: "absolute",
                right: "0",
                color: "white",
                fontSize: "24px",
              }}
            />
          </IconButton>
        </Box>
      </Box>
      <Box
        sx={{
          width: "100%",
          justifyContent: "space-between",
          display: "flex",
          marginTop: "20px",
          flexWrap: "wrap",
          gap: "5px",
        }}
      >
        {/*{quizSetupSteps.map(({ sidebarIcon }, index) => (*/}
        {/*  <Box*/}
        {/*    onClick={() => changePage(index)}*/}
        {/*    sx={{*/}
        {/*      cursor: "pointer",*/}
        {/*      width: "44px",*/}
        {/*      height: "44px",*/}
        {/*      background: "#262835",*/}
        {/*      display: "flex",*/}
        {/*      justifyContent: "center",*/}
        {/*      alignItems: "center",*/}
        {/*      borderRadius: "8px",*/}
        {/*    }}*/}
        {/*  >*/}
        {/*    {sidebarIcon}*/}
        {/*  </Box>*/}
        {/*))}*/}
        <Box sx={{ display: "flex" }}>
          <Box
            sx={{
              display: "flex",
              ml: "auto",
              gap: "15px",
            }}
          >
            <LogoutButton
              onClick={handleLogoutClick}
              sx={{
                backgroundColor: "transparent",
                border: "1px solid #9A9AAF",
              }}
            />
          </Box>
        </Box>
        <Box
          aria-describedby={id}
          onClick={handleClick}
          sx={{
            px: "10px",
            width: "70px",
            height: "44px",
            background: "#262835",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            borderRadius: "8px",
            border: "1px solid #FFFFFF66",
            marginLeft: "28px",
          }}
        >
          <Settings
            style={{ color: "#974BFA", fontSize: "24px", marginLeft: "10px" }}
          />
          <ArrowDown style={{ color: "#F2F3F7" }} />
        </Box>
      </Box>
      <SidebarModal
        open={openPopper}
        anchorEl={anchorEl}
        handleClick={handleClick}
        id={id}
        changePage={changePage}
      />
    </Box>
  );
};