import React, {useContext, useMemo} from "react";
import {NavLink} from "react-router-dom";
import MessagesReadContext from "../../../context/messagesRead-context";
import DemokritosLogo from "../../SVG/DemokritosLogo";
import {DuaLogo,DuaLogoBeta} from "../../SVG/DuaLogo";
import NewsIcon from "../../SVG/NewsIcon";
import ApplicationIcon from "../../SVG/ApplicationIcon";
import ServicesIcon from "../../SVG/ServicesIcon";
import MessagesIcon from "../../SVG/MessagesIcon";
import HomeIcon from "../../SVG/HomeIcon";
import SettingsIcons from "../../SVG/SettingsIcons";

const sibebarMemo = (unread: number) => {

    return (
        <div className={"sidebar "}>
            <div className="sidebar--logo">
                <NavLink to="/dashboard" className="logo-image">
                    {/*<DuaLogo/>*/}
                    <DuaLogoBeta/>
                </NavLink>
            </div>
            <ul className="sidebar--menulist">
                <li className="sidebar--menulist--item">
                    <NavLink to="/dashboard">
                        <HomeIcon/>
                        <span>αρχικη</span>
                    </NavLink>
                </li>
                {/*<li className="sidebar--menulist--item">*/}

                {/*    <NavLink to="/news" className="news">*/}
                {/*       <NewsIcon/>*/}
                {/*        <span>νεα</span>*/}
                {/*    </NavLink>*/}
                {/*</li>*/}
                <li className="sidebar--menulist--item">
                    <NavLink to="/applications" className="applications">
                        <ApplicationIcon/>
                        <span>εφαρμογες</span>
                    </NavLink>
                </li>
                <li className="sidebar--menulist--item">
                    <NavLink to="/services" className="services">
                        <ServicesIcon/>
                        <span>υπηρεσιες</span>
                    </NavLink>
                </li>
                <li className="sidebar--menulist--item">
                    <NavLink to="/messages" className="messages">
                        <MessagesIcon/>
                        <span className="text-with-notification">
							μηνυματα
                            {unread > 0 && (
                                <span className="text-with-notification--bell">
									{unread}
								</span>
                            )}
						</span>
                    </NavLink>
                </li>
                <li className="sidebar--menulist--item">
                    <NavLink to="/settings" className="applications">
                        <SettingsIcons/>
                        <span>ΡΥΘΜΙΣΕΙΣ</span>
                    </NavLink>
                </li>
            </ul>
            <div className="sidebar--demokritos-logo">
                <a href="https://www.demokritos.gr/" target="_blank" className="demokritos-logo-image">
                   <DemokritosLogo
                   color={'white'}/>
                </a>
            </div>
        </div>
    );
}

const Sidebar = () => {

    const {unread} = useContext(MessagesReadContext);

    return useMemo(() => {
        // The rest of your rendering logic
        return sibebarMemo(unread);
    }, [unread])
};

export default Sidebar;