Untitled

/* eslint-disable jsx-a11y/alt-text */
import { Auth } from "aws-amplify";
import Badge from "@material-ui/core/Badge";
import React, { Fragment, useEffect } from "react";
import { Trans, withTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { getUsername } from "../../components/utils/session";
import { GiHamburgerMenu } from "react-icons/gi";
import { BiLogOut } from "react-icons/bi";
import NotificationsIcon from "@material-ui/icons/Notifications";
import { BsThreeDotsVertical } from "react-icons/bs";
import Collapse from "@mui/material/Collapse";
import MenuIcon from "@material-ui/icons/Menu";
import Button from "@material-ui/core/Button";
import Drawer from "@material-ui/core/Drawer";
import { isMobile } from "react-device-detect";
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import * as env from "../../environment";
import i18n from "../../i18n";
import Buttons from "../button";
import {
  BlockButtonSignOff,
  BlockButtonSignOff2,
  ContainerDataUser,
  NavegationList,
  NavegationListSubMenu,
  NavegationListSubMenuTitle,
  NavegationListSubMenuItem,
  NavegationMenu,
  NavegationMenuContainer,
  UserContainer,
  UserMail,
  UserName,
  NavegationMobileContainer,
  ProductName,
} from "./styles";

const { REACT_APP_API, REACT_APP_ENGINE_API } = env[process.env.NODE_ENV];

function NavegationComponent() {
  let userInfo = localStorage.getItem("userInfo");
  const objectUser = JSON.parse(userInfo);

  const [username, setUserName] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [dataModulesUser, setDataModulesUser] = React.useState([]);
  const [open, setOpen] = React.useState([]);
  const [showMenu, setShowMenu] = React.useState(true);
  const [activeIndex, setActiveIndex] = React.useState(0);

  useEffect(() => {
    setUserName(getUsername());
    chargeModuleByUser();
    console.log("leng", i18n.language);
    //console.log("sub", sub)
  }, []);

  const changeLanguage = (ln) => {
    return () => {
      i18n.changeLanguage(ln).then();
      chargeModuleByUser();
      console.log(`Language changed to ${ln}`);
    };
  };

  const chargeModuleByUser = () => {
    let roleUser = JSON.parse(localStorage.getItem("userInfo")).role;

    const menuAdmin = [
      {
        name: <Trans count="3">Procesos</Trans>,
        listChildrenMenu: [
          { url: "/Home", name: <Trans count="3">Inbox</Trans> },
          // { url: "/home/error", name: <Trans count="3">Errores</Trans> },
          { url: "/home/instances", name: <Trans count="3">Instancias</Trans> },
          // { url: "/home/dashboard", name: <Trans count="3">Dashboard</Trans> },
          {
            url: "/home/bpmnModeler",
            name: <Trans count="3">BPMN Modeler</Trans>,
          },
          // {
          //   url: "/home/parameters",
          //   name: <Trans count="3">Parametros</Trans>,
          // },
          { url: "/home/contexts", name: <Trans count="3">Contextos</Trans> },

          // { url: {pathname: '/home/shippingorder', state: {form: 'starken:shippingorder'}}, name: <Trans count="3">Nueva-Orden</Trans> },
        ],
      },
      {
        name: <Trans count="3">Formulario</Trans>,
        listChildrenMenu: [
          {
            url: "/home/builderform",
            name: <Trans count="3">Construir Formulario</Trans>,
          },
          {
            url: "/home/mantenedor",
            name: <Trans count="3">Mantenedor-de-formularios</Trans>,
          },
          {
            url: "/home/formconsult",
            name: <Trans count="3">Consultar-Formularios</Trans>,
          },
        ],
      },
    ];

    const menuSolicitante = [
      {
        name: <Trans count="3">Procesos</Trans>,
        listChildrenMenu: [
          { url: "/Home", name: <Trans count="3">Inbox</Trans> },
          { url: "/home/instances", name: <Trans count="3">Instancias</Trans> },
          { url: "/home/error", name: <Trans count="3">Errores</Trans> },
        ],
      },
    ];

    const MENUS = {
      solicitante: menuSolicitante,
      analista: menuSolicitante,
      jefe: menuSolicitante,
      admin: menuAdmin,
    };

    const menus = MENUS[roleUser];

    setDataModulesUser(menus);

    // inicializar open menues en falso
    menus.map((elem, index) => {
      open[index] = false;
    });
  };

  const handleClick = (index) => {
    // console.log(index);

    // setOpen((prevOpen) => !prevOpen);

    let openAux = [];
    open.map((idx) => {
      return openAux.push(false);
    });
    openAux[index] = true;

    setOpen(openAux);

    setActiveIndex(index);
  };

  const logout = async () => {
    //localStorage.setItem('token', null);
    localStorage.clear();
    //sessionStorage.clear();
    await Auth.signOut({ global: true });
    //window.location.href = `https://api-hub-difarma.auth.us-east-1.amazoncognito.com/logout?client_id=1aod2gpu5v2npne8d0cvspuidr`;
    //window.location.href = `https://api-hub-difarma.auth.us-east-1.amazoncognito.com/logout?client_id=1aod2gpu5v2npne8d0cvspuidr&logout_uri=${COGNITO_REDIRECT_SING_OUT}`;

    //await Auth.signOut({ global: true });
    //window.location.href = `https://api-hub-difarma.auth.us-east-1.amazoncognito.com/logout?response_type=token&client_id=1aod2gpu5v2npne8d0cvspuidr&redirect_uri=http://localhost:3000&state=STATE&scope=email openid`;
    window.location = "/";
  };

  return (
    <Fragment>
      {isMobile ? (
        <>
          <NavegationMobileContainer
            style={{
              transition: "none",
              overflowY: "auto",
              zIndex: 50,
              width: "auto",
            }}
          >
            <BlockButtonSignOff2>
              <div>
                <span
                  data-bs-toggle="collapse"
                  data-bs-target="#CloseNavigation"
                  style={{ fontSize: "1.8rem" , marginLeft:"3%"}}
                >
                  <GiHamburgerMenu style={{Top:"2%"}} />
                  
                  <BiLogOut onClick={logout} style={{ fontSize: "1.8rem" ,marginLeft:"50%"}}/>
                </span>
              </div>
            </BlockButtonSignOff2>
             {/* <ProductName>
              <div>
                <BiLogOut onClick={logout} style={{ fontSize: "1.8rem" ,marginLeft:"2%"}}/>
              </div>
              
            </ProductName>  */}

            <NavegationMenu id="CloseNavigation">
              <UserContainer>
                <ContainerDataUser style={{ padding: "0% 0% 0% 0%" }}>
                  <UserName>
                    {objectUser
                      ? objectUser.firstName.toUpperCase() +
                        " " +
                        objectUser.lastName.toUpperCase()
                      : ""}
                  </UserName>
                  <img
                    style={{ height: "20%", width: "20%" }}
                    src={"/images/CL-Bandera.png"}
                    alt="Bandera Chile"
                  />
                  <UserMail>{objectUser.email.toUpperCase()}</UserMail>
                  <div style={{ marginTop: "3%", cursor: "pointer" }}>
                    <img
                      style={{ height: "65%" }}
                      onClick={changeLanguage("menuEs")}
                      src={"/images/spain_flag.png"}
                    />
                    <img
                      style={{ height: "65%" }}
                      onClick={changeLanguage("menuEn")}
                      src={"/images/uk_flag.png"}
                    />
                  </div>
                </ContainerDataUser>
              </UserContainer>
              <NavegationList style={{ height: "75vh", top: 0, bottom: 0 }}>
                {dataModulesUser.map((element, index) => {
                  return (
                    <NavegationListSubMenu style={{ padding: "0% 0% 0% 5%" }}>
                      <NavegationListSubMenuTitle
                        onClick={() => handleClick(index)}
                        key={index}
                      >
                        {" "}
                        {open[index] === true ? (
                          <ArrowDropDownIcon />
                        ) : (
                          <ArrowRightIcon />
                        )}
                        {element.name}
                      </NavegationListSubMenuTitle>
                      <Collapse in={open[index]} timeout="auto">
                        {element.listChildrenMenu.map(
                          (elementChildren, indexChildren) => {
                            return (
                              <>
                                {activeIndex === index ? (
                                  <Link
                                    to={elementChildren.url}
                                    key={indexChildren}
                                  >
                                    <NavegationListSubMenuItem>
                                      {elementChildren.name}
                                    </NavegationListSubMenuItem>
                                  </Link>
                                ) : null}
                              </>
                            );
                          }
                        )}
                      </Collapse>
                    </NavegationListSubMenu>
                  );
                })}
              </NavegationList>
            </NavegationMenu>
          </NavegationMobileContainer>
        </>
      ) : null}

      {showMenu && !isMobile && (
        <NavegationMenuContainer style={{ transition: "none" }}>
          <BlockButtonSignOff2>
            <div>
              <span
                data-bs-toggle="collapse"
                data-bs-target="#CloseNavigation"
                style={{ fontSize: "1.8rem" }}
              >
                <GiHamburgerMenu />
              </span>
            </div>
          </BlockButtonSignOff2>

          <NavegationMenu id="CloseNavigation">
            <UserContainer>
              <ContainerDataUser style={{ padding: "0% 0% 0% 0%" }}>
                <UserName>
                  {objectUser
                    ? objectUser.firstName.toUpperCase() +
                      " " +
                      objectUser.lastName.toUpperCase()
                    : ""}
                </UserName>
                <img
                  style={{ height: "20%", width: "20%" }}
                  src={"/images/CL-Bandera.png"}
                  alt="Bandera Chile"
                />
                <UserMail>{objectUser.email.toUpperCase()}</UserMail>
                <div style={{ marginTop: "3%", cursor: "pointer" }}>
                  <img
                    style={{ height: "65%" }}
                    onClick={changeLanguage("menuEs")}
                    src={"/images/spain_flag.png"}
                  />
                  <img
                    style={{ height: "65%" }}
                    onClick={changeLanguage("menuEn")}
                    src={"/images/uk_flag.png"}
                  />
                </div>
              </ContainerDataUser>
            </UserContainer>
            <NavegationList style={{ height: "75vh", top: 0, bottom: 0 }}>
              {dataModulesUser.map((element, index) => {
                return (
                  <NavegationListSubMenu style={{ padding: "0% 0% 0% 5%" }}>
                    <NavegationListSubMenuTitle
                      onClick={() => handleClick(index)}
                      key={index}
                    >
                      {" "}
                      {open[index] === true ? (
                        <ArrowDropDownIcon />
                      ) : (
                        <ArrowRightIcon />
                      )}
                      {element.name}
                    </NavegationListSubMenuTitle>
                    <Collapse in={open[index]} timeout="auto">
                      {element.listChildrenMenu.map(
                        (elementChildren, indexChildren) => {
                          return (
                            <>
                              {activeIndex === index ? (
                                <Link
                                  to={elementChildren.url}
                                  key={indexChildren}
                                >
                                  <NavegationListSubMenuItem>
                                    {elementChildren.name}
                                  </NavegationListSubMenuItem>
                                </Link>
                              ) : null}
                            </>
                          );
                        }
                      )}
                    </Collapse>
                  </NavegationListSubMenu>
                );
              })}
            </NavegationList>
          </NavegationMenu>
        </NavegationMenuContainer>
      )}

      {/* <BlockButtonSignOff2 style={{ position: "absolute", bottom: 0 }}>
        <div style={{ alignSelf: "flex-end", paddingLeft: "5%" }}>
          <span
            data-bs-toggle="collapse"
            data-bs-target="#CloseNavigation"
            style={{ fontSize: "1.8rem" }}
          >
            <GiHamburgerMenu />
          </span>
        </div>
      </BlockButtonSignOff2> */}
    </Fragment>
  );
}

export default withTranslation()(NavegationComponent);