import React from 'react';
import logo from '../../assets/img/logos/white_logo.jpg';
import {menuItems} from './menu';
import {Link, usePage} from "@inertiajs/react";

export default function Menu(): JSX.Element {
    return (
        <aside className="app-sidebar" id="sidebar">
            <div className="main-sidebar-header flex justify-center items-center">
                <a href="/" className="header-logo flex justify-center items-center">
                    <img src={logo} alt="logo" className="main-logo desktop-logo" width={80} />
                    <img src={logo} alt="logo" className="main-logo toggle-logo" width={80} />
                    <img src={logo} alt="logo" className="main-logo desktop-dark" width={80} />
                    <img src={logo} alt="logo" className="main-logo toggle-dark" width={80} />
                </a>
            </div>
            <div className="main-sidebar " id="sidebar-scroll">
                <nav className="main-menu-container nav nav-pills flex-column sub-open">
                    <div className="slide-left" id="slide-left">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="#7b8191" width="24" height="24"
                             viewBox="0 0 24 24">
                            <path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"></path>
                        </svg>
                    </div>
                    <ul className="main-menu">
                        <li className="slide__category">
                            <span className="category-name">Main</span>
                        </li>
                        {
                            // TODO: Add permission filtering
                            menuItems.map((item) => (
                                item.children && item.children.length > 0 ? (
                                    <li key={item.id} className="slide has-sub">
                                        <button type="button" className="side-menu__item">
                                            <i className={`${item.icon} side-menu__icon`}></i>
                                            <span className="side-menu__label">{item.label}</span>
                                            <i className="ri ri-arrow-right-s-line side-menu__angle"></i>
                                        </button>
                                        <ul className="slide-menu child1">
                                            <li className="slide side-menu__label1"><button type="button" className="side-menu__label-btn">{item.label}</button></li>
                                            {item.children.map((child) => (
                                                <li key={child.id} className="slide">
                                                    <Link href={child.link} className={`side-menu__item ${usePage().url.includes(item.link) ? 'active' : ''}`}>{child.label}</Link>
                                                </li>
                                            ))}
                                        </ul>
                                    </li>
                                ) : (
                                    <li key={item.id} className="slide">
                                        <Link href={item.link} className={`side-menu__item ${usePage().url === item.link ? 'active' : ''}`}>
                                            <i className={`${item.icon} side-menu__icon`}></i>
                                            <span className="side-menu__label">{item.label}</span>
                                        </Link>
                                    </li>
                                )
                            ))
                        }
                    </ul>

                </nav>
            </div>
        </aside>
    );
}