import logo_koperasi from '@/assets/koperasi.png';
import { APP_MENU } from '@/const/menu';
import { NavigationMenuItem } from '@/types';
import { Link as InertiaLink, usePage } from '@inertiajs/react';
import { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router';

export default function Navbar() {
    return (
        <nav className="navbar navbar-fixed bg-white shadow-sm navbar-expand-lg navbar-light bg-light border" style={{ zIndex: 9 }}>
            <div className="container-fluid gap-3" style={{ userSelect: 'none' }}>
                <div className="mr-3 pointer flex items-center">
                    <img src={logo_koperasi} className="mr-2" style={{ maxHeight: 48 }} />
                </div>
                <button
                    className="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span className="navbar-toggler-icon" />
                </button>
                <NavigationMenu />
                <ProfileDropdown />
            </div>
        </nav>
    );
}

const NavigationMenu = () => {
    const navigate = useNavigate();
    useEffect(() => {
        $('#menuSidebar').on('click', function (e) {
            e.preventDefault();

            if (window.matchMedia('(min-width: 992px)').matches) {
                $('body').toggleClass('sidebar-hide');
            } else {
                $('body').toggleClass('sidebar-show');
            }
        });
        $('#menuSidebarOffset').on('click', function (e) {
            e.preventDefault();

            $('body').toggleClass('sidebar-show');
        });
        (function ($bs) {
            $bs.Dropdown.prototype.toggle = (function (_orginal) {
                return function () {
                    document.querySelectorAll('.drd-submenu').forEach(function (e) {
                        e.classList.remove('drd-submenu');
                    });
                    let drd = this._element.closest('.dropdown').parentNode.closest('.dropdown');
                    for (; drd && drd !== document; drd = drd.parentNode.closest('.dropdown')) {
                        drd.classList.add('drd-submenu');
                    }
                    return _orginal.call(this);
                };
            })($bs.Dropdown.prototype.toggle);

            document.querySelectorAll('.dropdown').forEach(function (drd) {
                drd.addEventListener('hide.bs.dropdown', function (e) {
                    if (this.classList.contains('drd-submenu')) {
                        this.classList.remove('drd-submenu');
                        e.preventDefault();
                    }
                    e.stopPropagation();
                });
            });
        })(bootstrap);
    }, []);

    return (
        <>
            {APP_MENU.map((item: NavigationMenuItem) => {
                if (!item.children) {
                    return (
                        <Link key={item.label} to={item.href ?? '#'} className="nav-link" onClick={() => navigate(item.href ?? '#')}>
                            {item.label}
                        </Link>
                    );
                }
                return (
                    <div className="dropdown mx-2" key={item.label}>
                        <a className="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            {item.label}
                        </a>
                        <ul className="dropdown-menu">
                            {item.children?.map((child: NavigationMenuItem) => {
                                if (!child.children) {
                                    return (
                                        <li key={child.label}>
                                            <Link
                                                to={child.href ?? '#'}
                                                onClick={() => navigate(child.href ?? '#')}
                                                className="dropdown-item"
                                                data-bs-toggle="dropdown"
                                                aria-expanded="false"
                                            >
                                                {child.label}
                                            </Link>
                                        </li>
                                    );
                                }
                                return (
                                    <li className="dropdown dropend" key={child.label}>
                                        <a className="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" href="">
                                            {child.label}
                                        </a>
                                        <ul className="dropdown-menu">
                                            {child.children?.map((submenu: NavigationMenuItem) => {
                                                return (
                                                    <li key={submenu.label}>
                                                        <Link
                                                            to={submenu.href ?? '#'}
                                                            onClick={() => navigate(submenu.href ?? '#')}
                                                            className="dropdown-item"
                                                        >
                                                            {submenu.label}
                                                        </Link>
                                                    </li>
                                                );
                                            })}
                                        </ul>
                                    </li>
                                );
                            })}
                        </ul>
                    </div>
                );
            })}
        </>
    );
};

const ProfileDropdown = () => {
    const { user } = usePage().props.auth;
    const [loading, setLoading] = useState(false);

    return (
        <div className="navbar-collapse collapse" id="navbarSupportedContent">
            <ul className="navbar-nav mb-2 mb-lg-0 me-auto" />
            <form className="d-flex">
                <div className="dropdown dropdown-profile ms-3 ms-xl-4">
                    <a
                        href=""
                        className="dropdown-link align-center d-flex align-items-center justify-content-center gap-2"
                        data-bs-toggle="dropdown"
                        data-bs-auto-close="outside"
                    >
                        <div className="avatar mr-2 bg-primary text-white d-flex align-items-center justify-content-center">A</div>
                        <h6 className="mb-0 text-black">{user.name}</h6>
                    </a>
                    <div className="dropdown-menu dropdown-menu-end mt-10-f">
                        <div className="dropdown-menu-body">
                            <div className="d-flex gap-2">
                                <div>
                                    <div className="avatar avatar-xl mr-2 bg-primary text-white d-flex align-items-center justify-content-center">
                                        A
                                    </div>
                                </div>
                                <div className="d-flex flex-column justify-content-center">
                                    <h5 className="mb-1 text-dark fw-semibold mb-0">{user?.name}</h5>
                                    <p className="fs-sm text-secondary font-bold m-0">{user?.role?.nama}</p>
                                </div>
                            </div>
                            <p className="fs-sm text-secondary" />
                            <hr />
                            <nav className="nav">
                                <InertiaLink
                                    method="post"
                                    href="/logout"
                                    disabled={loading}
                                    className="btn btn-outline-danger"
                                    onClick={() => {
                                        setLoading(true);
                                    }}
                                >
                                    {loading ? <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" /> : null}
                                    <i className="ri-logout-box-r-line" /> Log Out
                                </InertiaLink>
                            </nav>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    );
};