import React, {useContext, useState} from 'react';
import {NavLink} from "react-router-dom";
import AuthContext from '../../../../context/auth-context';
import menu from '../../../../assets/images/menu.svg';
import menuClose from '../../../../assets/images/menu-x.svg';
import logoMobile from '../../../../assets/images/logo-mobile.png'
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";
import LogoutIcon from "../../../../assets/images/logout.svg";
import './mobile-menu.scss';
import ThemeToggler from "../../../UI/CustomToggler/ThemeToggler/ThemeToggler";

type MobileMenuProps = {
    unread : any
};

const MobileMenu = ({unread}: MobileMenuProps) => {
    const [isOpen, setIsOpen] = useState(false);
    const {currentUser, logoutUser} = useContext(AuthContext);

    return (
        <>
            <div className={isOpen ? 'close-btn-container' : 'menu-toggler'}>
                    <button onClick={() => {setIsOpen(!isOpen)}}><img src={ isOpen ? menuClose : menu}/></button>
                    {
                        !isOpen &&
                        <p>MENU</p>
                    }
            </div>
            {
                isOpen &&
                <div className={isOpen ? 'mobile-menu-container' : 'closed-menu'}>
                    <ul className='mobile-menulist'>
                        <li className="mobile-menulist--item" onClick={() => {setIsOpen(!isOpen)}}>
                        <NavLink to="/dashboard">
                            <HomeIcon/>
                            <span>αρχικη</span>
                        </NavLink>
                        </li>
                        <li className="mobile-menulist--item"onClick={() => {setIsOpen(!isOpen)}}>
                            <NavLink to="/applications" className="applications">
                                <ApplicationIcon/>
                                <span>εφαρμογες</span>
                            </NavLink>
                        </li>
                        <li className="mobile-menulist--item" onClick={() => {setIsOpen(!isOpen)}}>
                            <NavLink to="/services" className="services">
                                <ServicesIcon/>
                                <span>υπηρεσιες</span>
                            </NavLink>
                        </li>
                        <li className="mobile-menulist--item smaller-icon"onClick={() => {setIsOpen(!isOpen)}}>
                            <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="mobile-menulist--item smaller-icon" onClick={() => {setIsOpen(!isOpen)}}>
                            <NavLink to="/settings" className="applications">
                                <SettingsIcons/>
                                <span>ΡΥΘΜΙΣΕΙΣ</span>
                            </NavLink>
                        </li>
                    </ul>
                    <ul className='secondary-menu'>
                        <li className="secondary-menu--item smaller-icon" onClick={() => {
                                logoutUser()
                                setIsOpen(!isOpen)
                                }}>
                            <img src={LogoutIcon} alt="log out"/>
                            <span>LOGOUT</span>
                        </li>
                    </ul>
                    <div className='mobile-menu-container--footer'>
                        <div><img src={logoMobile} alt="Δημόκριτος logo" /></div>
                        <p>© 2022 Εθνικό Κέντρο Έρευνας<br></br> Φυσικών Επιστημών "Δημόκριτος"</p>
                    </div>
                </div>
            }
        </>
    )
};

export default MobileMenu;