import React from 'react';
import logo from '../../assets/img/logos/white_logo.jpg';
import account from '../../assets/img/users/1.jpg';
import {Link} from "@inertiajs/react";

// @ts-ignore
export default function AppHeader(props): JSX.Element {
  return (
    <>
      <header className="header custom-sticky !top-0 !w-full">
        <nav className="main-header" aria-label="Global">
          <div className="header-content">
            <div className="header-left">
              {/* Navigation Toggle */}
              <div className="">
                <button type="button" className="sidebar-toggle !w-100 !h-100">
                  <span className="sr-only">Toggle Navigation</span>
                  <i className="ri-arrow-right-circle-line header-icon"></i>
                </button>
              </div>
              {/* End Navigation Toggle */}
            </div>

            <div className="responsive-logo">
              <Link className="responsive-logo-dark" href="/" aria-label="Brand">
                <img src={logo} alt="logo" className="mx-auto" width={40} />
              </Link>
              <Link className="responsive-logo-light" href="/" aria-label="Brand">
                <img src={logo} alt="logo" className="mx-auto" width={40} />
              </Link>
            </div>

            <div className="header-right">
              <div className="responsive-headernav">
                <div className="header-nav-right">
                  <div className="header-search">
                    <button
                      aria-label="button"
                      type="button"
                      data-hs-overlay="#search-modal"
                      className="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-gray-100 hover:bg-gray-200 text-gray-500 align-middle focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-offset-0 focus:ring-offset-white transition-all text-xs dark:bg-bgdark dark:hover:bg-black/20 dark:text-white/70 dark:hover:text-white dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
                    >
                      <i className="ri-search-2-line header-icon"></i>
                    </button>
                  </div>
                  <div className="header-theme-mode hidden sm:block">
                    <button
                      aria-label="switch to light theme"
                      type="button"
                      className="hs-dark-mode-active:flex hidden hs-dark-mode group flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-gray-100 hover:bg-gray-200 text-gray-500 align-middle focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-offset-0 focus:ring-offset-white transition-all text-xs dark:bg-bgdark dark:hover:bg-black/20 dark:text-white/70 dark:hover:text-white dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
                      data-hs-theme-click-value="light"
                    >
                      <i className="ri-sun-line header-icon"></i>
                    </button>
                  </div>
                  <div className="header-fullscreen hidden lg:block">
                    <a
                      aria-label="anchor"
                      href="#"
                      onClick={() => {
                        const fn = (window as any).openFullscreen;
                        if (typeof fn === 'function') fn();
                      }}
                      className="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-gray-100 hover:bg-gray-200 text-gray-500 align-middle focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-offset-0 focus:ring-offset-white transition-all text-xs dark:bg-bgdark dark:hover:bg-black/20 dark:text-white/70 dark:hover:text-white dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
                    >
                      <i className="ri-fullscreen-line header-icon full-screen-open"></i>
                      <i className="ri-fullscreen-line header-icon fullscreen-exit-line full-screen-close hidden"></i>
                    </a>
                  </div>
                  <div
                    className="header-notification hs-dropdown ti-dropdown hidden sm:block"
                    data-hs-dropdown-placement="bottom-right"
                  >
                    <button
                      id="dropdown-notification"
                      type="button"
                      className="hs-dropdown-toggle ti-dropdown-toggle p-0 border-0 flex-shrink-0 h-[2.375rem] w-[2.375rem] rounded-full shadow-none focus:ring-gray-400 text-xs dark:focus:ring-white/10"
                    >
                      <i className="ri-notification-2-line header-icon animate-bell"></i>
                      <span className="flex absolute h-5 w-5 top-0 end-0 -mt-1 -me-1">
                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-success/80 opacity-75"></span>
                        <span className="relative inline-flex rounded-full h-5 w-5 bg-success text-white justify-center items-center" id="notify-data">
                          4
                        </span>
                      </span>
                    </button>
                    <div className="hs-dropdown-menu ti-dropdown-menu w-[20rem] border-0" aria-labelledby="dropdown-notification">
                      <div className="ti-dropdown-header !bg-primary border-b dark:border-white/10 flex justify-between items-center">
                        <p className="ti-dropdown-header-title !text-white font-semibold">Notifications</p>
                        <button type="button" onClick={(e)=>e.preventDefault()} className="badge bg-black/20 text-white rounded-sm">Mark All Read</button>
                      </div>
                      <div className="ti-dropdown-divider divide-y divide-gray-200 dark:divide-white/10">
                        <div className="py-2 first:pt-0 last:pb-0" id="allNotifyContainer">
                          <div className="ti-dropdown-item relative header-box">
                            <a href="/" className="flex space-x-3 rtl:space-x-reverse">
                              <div className="me-2 avatar rounded-full ring-0">
                                <img src={account} alt="img" className="rounded-sm" />
                              </div>
                              <div className="relative w-full">
                                <h5 className="text-sm text-gray-800 dark:text-white font-semibold mb-1">Elon Isk</h5>
                                <p className="text-xs mb-1 max-w-[200px] truncate">Hello there! How are you doing? Call me when...</p>
                                <p className="text-xs text-gray-400 dark:text-white/70">2 min</p>
                              </div>
                            </a>
                            <button aria-label="remove notification" type="button" className="header-remove-btn ms-auto text-lg text-gray-500/20 dark:text-white/20 hover:text-gray-800 dark:hover:text-white">
                              <i className="ri-close-circle-line"></i>
                            </button>
                          </div>
                        </div>
                        <div className="py-2 first:pt-0 px-5">
                          <a className="w-full ti-btn ti-btn-primary p-2" href="/">
                            View All
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="header-profile hs-dropdown ti-dropdown" data-hs-dropdown-placement="bottom-right">
                    <button id="dropdown-profile" type="button" className="hs-dropdown-toggle ti-dropdown-toggle gap-2 p-0 flex-shrink-0 h-8 w-8 rounded-full shadow-none focus:ring-gray-400 text-xs dark:focus:ring-white/10">
                      <img className="inline-block rounded-full ring-2 ring-white dark:ring-white/10" src={account} alt="Image Description" />
                    </button>

                    <div className="hs-dropdown-menu ti-dropdown-menu border-0 w-[20rem]" aria-labelledby="dropdown-profile">
                      <div className="ti-dropdown-header !bg-primary flex">
                        <div className="me-3">
                          <img className="avatar shadow-none rounded-full !ring-transparent" src={account} alt="profile-img" />
                        </div>
                        <div>
                          <p className="ti-dropdown-header-title !text-white">{ props?.name }</p>
                        </div>
                      </div>
                      <div className="mt-2 ti-dropdown-divider">
                        <Link href="/profile" className="ti-dropdown-item">
                          <i className="ti ti-user-circle text-lg"></i>
                          Profile
                        </Link>
                          <Link href="/logs/emails" className="ti-dropdown-item">
                              <i className="ti ti-mail text-lg"></i>
                              Email Logs
                          </Link>

                          <Link href="/logs/audits" className="ti-dropdown-item">
                              <i className="ti ti-clipboard-list text-lg"></i>
                              Audit Logs
                          </Link>

                          <Link href="/logs/sms" className="ti-dropdown-item">
                              <i className="ti ti-message text-lg"></i>
                              SMS Logs
                          </Link>
                          <Link href="/settings/system-configuration" className="ti-dropdown-item">
                              <i className="ti ti-adjustments-horizontal text-lg"></i>
                              Settings
                          </Link>
                          <Link
                              href="/logout"
                              method="delete"
                              as="button"
                              className="ti-dropdown-item"
                          >
                              <i className="ti ti-logout text-lg"></i>
                              Log Out
                          </Link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </nav>
      </header>
    </>
  );
}