import React, { useState, useEffect } from 'react';
import { slide as Menu } from "react-burger-menu";
import { NavLink } from "react-router-dom";
import { getCookie } from 'react-use-cookie';
import { useHistory } from "react-router-dom";

import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
import Button from '@mui/material/Button';
import { confirmAlert } from 'react-confirm-alert'; // Import
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
import { useCookies } from "react-cookie";



const New_SideBar_2025 = () => {
  const stored_cookie = getCookie('tokenmysych');
  const history = useHistory();


  const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
  const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
  // Gestion des Cookies
  const stored_partner = cookie_part.tokenmysypart;
  const stored_user = cookie.tokenmysych;

  const environnment = process.env.REACT_APP_ENV



  function logout_confirmation() {

    // si c'est une connexion partner qui est active
    if (typeof (stored_partner) !== "undefined") {
      //alert(" c'est une connexion PARTTT  qui est active");
      removeCookie_part('tokenmysypart', { path: '/' });
      history.push("/Connexion");
    }

    // si c'est une connexion user qui est active
    if (typeof (stored_user) !== "undefined") {
      //alert(" c'est une connexion USERR  qui est active");
      removeCookie_part('tokenmysych', { path: '/' });
      history.push("/intranet");
    }
  }


  function logout() {
    confirmAlert({
      title: 'Deconnexion ?',
      message: 'Confirmez la deconnexion',
      buttons: [
        {
          label: 'Oui',
          onClick: () => logout_confirmation()
        },
        {
          label: 'Non',

        }
      ],
      closeOnEscape: false,
      closeOnClickOutside: false,
      keyCodeForClose: [8, 32],
      willUnmount: () => { },
      afterClose: () => { },
      onClickOutside: () => { },
      onKeypress: () => { },
      onKeypressEscape: () => { },
      overlayClassName: "overlay-custom-class-name"
    });
  }

  const [someoneconnected, setsomeoneconnected] = useState("0");
  const [partnerconnected, setpartnerconnected] = useState("0");
  const [userconnected, setuserconnected] = useState("0");

  const stored_part = getCookie('tokenmysypart');


  function whosisconnected() {
    var local_user_connect = 0;
    var local_part_connect = 0;

    if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
      setuserconnected("0");
      local_user_connect = 0;
    } else {
      setuserconnected("1");
      setsomeoneconnected("1");
      local_user_connect = 1;
      //alert(" user connected OK");
    }

    if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
      setpartnerconnected("0");
      local_part_connect = 0;
    } else {
      setpartnerconnected("1");
      setsomeoneconnected("1");
      local_part_connect = 1;
      //alert(" partner connected OK");
    }
  }

  useEffect(() => {
    var local_user_connect = 0;
    var local_part_connect = 0;

    if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
      setuserconnected("0");
      local_user_connect = 0;
    } else {
      setuserconnected("1");
      setsomeoneconnected("1");
      local_user_connect = 1;
      //alert(" user connected OK");
    }

    if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
      setpartnerconnected("0");
      local_part_connect = 0;
    } else {
      setpartnerconnected("1");
      setsomeoneconnected("1");
      local_part_connect = 1;
      //alert(" partner connected OK");
    }
  }, []);

  return (
    // Pass on our props
    <div>

      {String(environnment) === "PROD" &&
        <Menu className="ch_burger_menu">

          <NavLink exact to={"/"} activeClassName={"nav-active"}>
            A propos
          </NavLink>

          <NavLink exact to={"/fonctionnalites"} activeClassName={"nav-active"}>
            Fonctionnalites
          </NavLink>


          <NavLink exact to={"/tarif"} activeClassName={"nav-active"}>
            Tarifs
          </NavLink>

          <NavLink exact to={"/contact"} activeClassName={"nav-active"}>
            Contact
          </NavLink>

          <NavLink exact to={"/Recherche-Article-formation"} activeClassName={"nav-active"}>
            Blog
          </NavLink>

          <NavLink exact to={"/recherche-formation"} activeClassName={"nav-active"}>
            Marketplace
          </NavLink>


          {String(someoneconnected) !== String("1") && <NavLink exact to={"/signin"} activeClassName={"nav-active"}>
            Connexion
          </NavLink>}

          {String(someoneconnected) !== String("1") && <NavLink exact to={"/signup"} activeClassName={"nav-active"}>
            Inscription
          </NavLink>}


          {String(someoneconnected) === String("1") && <NavLink exact to={"/mysy-user-account"} activeClassName={"nav-active"}>
            Mon compte
          </NavLink>}




          {typeof (stored_partner) !== "undefined" &&
            /* Connexion partner active */
            <Button className='bton_annule' onClick={logout} style={{
              color: "red", opacity: '100%', borderRadius: '5rem', fontSize: "12px", width: "100%", background: "black",
              padding: "5px"
            }}>
              <i> Deconnexion </i>
            </Button>


          }

          {typeof (stored_user) != "undefined" &&
            /* Connexion utilisateur active */
            <Button className='bton_annule' onClick={logout} startIcon={<LogoutOutlinedIcon />} sx={{ color: "white", background: "green", fontSize: 10 }} >
              Deconnexion
            </Button>
          }
        </Menu>}

      {(String(environnment) === "REC" || String(environnment) === "DEM") &&
        <Menu className="ch_burger_menu">

          <NavLink exact to={"/"} activeClassName={"nav-active"}>
            A propos
          </NavLink>

          <NavLink exact to={"/fonctionnalites"} activeClassName={"nav-active"}>
            Fonctionnalites
          </NavLink>


          <NavLink exact to={"/tarif"} activeClassName={"nav-active"}>
            Tarifs
          </NavLink>

          <NavLink exact to={"/contact"} activeClassName={"nav-active"}>
            Contact
          </NavLink>

          <NavLink exact to={"/Recherche-Article-formation"} activeClassName={"nav-active"}>
            Blog
          </NavLink>

          <NavLink exact to={"/recherche-formation"} activeClassName={"nav-active"}>
            Marketplace
          </NavLink>


          {String(someoneconnected) !== String("1") && <NavLink exact to={"/signin"} activeClassName={"nav-active"}>
            Connexion
          </NavLink>}

          {String(someoneconnected) !== String("1") && <NavLink exact to={"/signup"} activeClassName={"nav-active"}>
            Inscription
          </NavLink>}


          {String(someoneconnected) === String("1") && <NavLink exact to={"/mysy-user-account"} activeClassName={"nav-active"}>
            Mon compte
          </NavLink>}




          {typeof (stored_partner) !== "undefined" &&
            /* Connexion partner active */
            <Button className='bton_annule' onClick={logout} style={{
              color: "red", opacity: '100%', borderRadius: '5rem', fontSize: "12px", width: "100%", background: "black",
              padding: "5px"
            }}>
              <i> Deconnexion </i>
            </Button>


          }

          {typeof (stored_user) != "undefined" &&
            /* Connexion utilisateur active */
            <Button className='bton_annule' onClick={logout} startIcon={<LogoutOutlinedIcon />} sx={{ color: "white", background: "green", fontSize: 10 }} >
              Deconnexion
            </Button>
          }
        </Menu>}


      {String(environnment) === "DEV" &&
        <Menu className="ch_burger_menu">

          <NavLink exact to={"/"} activeClassName={"nav-active"}>
            A propos
          </NavLink>

          <NavLink exact to={"/fonctionnalites"} activeClassName={"nav-active"}>
            Fonctionnalites
          </NavLink>


          <NavLink exact to={"/tarif"} activeClassName={"nav-active"}>
            Tarifs
          </NavLink>

          <NavLink exact to={"/contact"} activeClassName={"nav-active"}>
            Contact
          </NavLink>

          <NavLink exact to={"/Recherche-Article-formation"} activeClassName={"nav-active"}>
            Blog
          </NavLink>

          <NavLink exact to={"/recherche-formation"} activeClassName={"nav-active"}>
            Marketplace
          </NavLink>


          {String(someoneconnected) !== String("1") && <NavLink exact to={"/signin"} activeClassName={"nav-active"}>
            Connexion
          </NavLink>}

          {String(someoneconnected) !== String("1") && <NavLink exact to={"/signup"} activeClassName={"nav-active"}>
            Inscription
          </NavLink>}


          {String(someoneconnected) === String("1") && <NavLink exact to={"/mysy-user-account"} activeClassName={"nav-active"}>
            Mon compte
          </NavLink>}




          {typeof (stored_partner) !== "undefined" &&
            /* Connexion partner active */
            <Button className='bton_annule' onClick={logout} style={{
              color: "red", opacity: '100%', borderRadius: '5rem', fontSize: "12px", width: "100%", background: "black",
              padding: "5px"
            }}>
              <i> Deconnexion </i>
            </Button>


          }

          {typeof (stored_user) != "undefined" &&
            /* Connexion utilisateur active */
            <Button className='bton_annule' onClick={logout} startIcon={<LogoutOutlinedIcon />} sx={{ color: "white", background: "green", fontSize: 10 }} >
              Deconnexion
            </Button>
          }
        </Menu>}
    </div>

  );
};


export default New_SideBar_2025;