import { Link } from 'react-router';

export default function Navbar() {
    return (
        <nav className="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
            <div className="container-xxl">
                <div className="navbar-brand app-brand demo d-none d-xl-flex py-0 me-6">
                    <Link to="/app/dashboard" className="app-brand-link gap-2">
                        <span className="app-brand-logo demo">
                            <span style={{ color: 'var(--bs-primary)' }}>
                                <MaterializeLogo />
                            </span>
                        </span>
                        <span className="app-brand-text demo menu-text fw-semibold">Materialize</span>
                    </Link>
                    <a href="#" className="layout-menu-toggle menu-link text-large d-xl-none ms-auto">
                        <i className="ri-close-fill align-middle" />
                    </a>
                </div>
                <div className="layout-menu-toggle navbar-nav align-items-xl-center me-4 me-xl-0 d-xl-none">
                    <a className="nav-item nav-link px-0 me-xl-6" href="#">
                        <i className="ri-menu-fill ri-22px" />
                    </a>
                </div>
                <div className="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
                    <div className="navbar-nav align-items-center">
                        <ThemeSwitcher />
                    </div>
                    <ProfileDropdown />
                </div>
            </div>
        </nav>
    );
}

const ThemeSwitcher = () => {
    return (
        <div className="nav-item dropdown-style-switcher dropdown me-2 me-xl-0">
            <a className="nav-link btn btn-text-secondary rounded-pill btn-icon dropdown-toggle hide-arrow" href="#" data-bs-toggle="dropdown">
                <i className="ri-22px ri-sun-line"></i>
            </a>
            <ul className="dropdown-menu dropdown-menu-start dropdown-styles">
                <li>
                    <a className="dropdown-item" href="#" data-theme="light">
                        <span className="align-middle">
                            <i className="ri-sun-line ri-22px me-3" />
                            Light
                        </span>
                    </a>
                </li>
                <li>
                    <a className="dropdown-item" href="#" data-theme="dark">
                        <span className="align-middle">
                            <i className="ri-moon-clear-line ri-22px me-3" />
                            Dark
                        </span>
                    </a>
                </li>
                <li>
                    <a className="dropdown-item" href="#" data-theme="system">
                        <span className="align-middle">
                            <i className="ri-computer-line ri-22px me-3" />
                            System
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    );
};

const ProfileDropdown = () => {
    return (
        <ul className="navbar-nav align-items-center ms-auto flex-row">
            <li className="nav-item navbar-dropdown dropdown-user dropdown">
                <a className="nav-link dropdown-toggle hide-arrow" href="#" data-bs-toggle="dropdown">
                    <div className="avatar avatar-online">
                        <img src="/assets/img/avatars/1.png" alt="" className="rounded-circle" />
                    </div>
                </a>
                <ul className="dropdown-menu dropdown-menu-end">
                    <li>
                        <a className="dropdown-item" href="#">
                            <div className="d-flex">
                                <div className="me-2 flex-shrink-0">
                                    <div className="avatar avatar-online">
                                        <img src="/assets/img/avatars/1.png" alt="" className="rounded-circle" />
                                    </div>
                                </div>
                                <div className="flex-grow-1">
                                    <span className="fw-medium d-block">John Doe</span>
                                    <small className="text-muted">Admin</small>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <div className="dropdown-divider" />
                    </li>
                    <li>
                        <a className="dropdown-item" href="#">
                            <i className="ri-user-3-line me-3" />
                            <span className="align-middle">My Profile</span>
                        </a>
                    </li>
                    <li>
                        <a className="dropdown-item" href="#">
                            <i className="ri-settings-4-line me-3" />
                            <span className="align-middle">Settings</span>
                        </a>
                    </li>
                    <li>
                        <a className="dropdown-item" href="#">
                            <span className="d-flex align-items-center align-middle">
                                <i className="ri-file-text-line me-3 flex-shrink-0" />
                                <span className="flex-grow-1 align-middle">Billing</span>
                                <span className="badge badge-center rounded-pill bg-danger flex-shrink-0">4</span>
                            </span>
                        </a>
                    </li>
                    <li>
                        <div className="dropdown-divider" />
                    </li>
                    <li>
                        <a className="dropdown-item" href="#">
                            <i className="ri-shut-down-line me-3" />
                            <span className="align-middle">Log Out</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    );
};

export const MaterializeLogo = () => (
    <svg width={268} height={150} viewBox="0 0 38 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M30.0944 2.22569C29.0511 0.444187 26.7508 -0.172113 24.9566 0.849138C23.1623 1.87039 22.5536 4.14247 23.5969 5.92397L30.5368 17.7743C31.5801 19.5558 33.8804 20.1721 35.6746 19.1509C37.4689 18.1296 38.0776 15.8575 37.0343 14.076L30.0944 2.22569Z"
            fill="currentColor"
        />
        <path
            d="M30.171 2.22569C29.1277 0.444187 26.8274 -0.172113 25.0332 0.849138C23.2389 1.87039 22.6302 4.14247 23.6735 5.92397L30.6134 17.7743C31.6567 19.5558 33.957 20.1721 35.7512 19.1509C37.5455 18.1296 38.1542 15.8575 37.1109 14.076L30.171 2.22569Z"
            fill="url(#paint0_linear_2989_100980)"
            fillOpacity="0.4"
        />
        <path
            d="M22.9676 2.22569C24.0109 0.444187 26.3112 -0.172113 28.1054 0.849138C29.8996 1.87039 30.5084 4.14247 29.4651 5.92397L22.5251 17.7743C21.4818 19.5558 19.1816 20.1721 17.3873 19.1509C15.5931 18.1296 14.9843 15.8575 16.0276 14.076L22.9676 2.22569Z"
            fill="currentColor"
        />
        <path
            d="M14.9558 2.22569C13.9125 0.444187 11.6122 -0.172113 9.818 0.849138C8.02377 1.87039 7.41502 4.14247 8.45833 5.92397L15.3983 17.7743C16.4416 19.5558 18.7418 20.1721 20.5361 19.1509C22.3303 18.1296 22.9391 15.8575 21.8958 14.076L14.9558 2.22569Z"
            fill="currentColor"
        />
        <path
            d="M14.9558 2.22569C13.9125 0.444187 11.6122 -0.172113 9.818 0.849138C8.02377 1.87039 7.41502 4.14247 8.45833 5.92397L15.3983 17.7743C16.4416 19.5558 18.7418 20.1721 20.5361 19.1509C22.3303 18.1296 22.9391 15.8575 21.8958 14.076L14.9558 2.22569Z"
            fill="url(#paint1_linear_2989_100980)"
            fillOpacity="0.4"
        />
        <path
            d="M7.82901 2.22569C8.87231 0.444187 11.1726 -0.172113 12.9668 0.849138C14.7611 1.87039 15.3698 4.14247 14.3265 5.92397L7.38656 17.7743C6.34325 19.5558 4.04298 20.1721 2.24875 19.1509C0.454514 18.1296 -0.154233 15.8575 0.88907 14.076L7.82901 2.22569Z"
            fill="currentColor"
        />
        <defs>
            <linearGradient id="paint0_linear_2989_100980" x1="5.36642" y1="0.849138" x2="10.532" y2="24.104" gradientUnits="userSpaceOnUse">
                <stop offset={0} stopOpacity={1} />
                <stop offset={1} stopOpacity={0} />
            </linearGradient>
            <linearGradient id="paint1_linear_2989_100980" x1="5.19475" y1="0.849139" x2="10.3357" y2="24.1155" gradientUnits="userSpaceOnUse">
                <stop offset={0} stopOpacity={1} />
                <stop offset={1} stopOpacity={0} />
            </linearGradient>
        </defs>
    </svg>
);
