import { headers } from "next/headers";
import HeaderFeaturedHomes from "./HeaderFeaturedHomes";
import { HeaderDropdown, HeaderDropdownGroup, HeaderDropdownMenu } from "./HeaderDropdown";

export default async function Header() {
  const headerList = await headers();
  const fullUrl = headerList.get("x-full-url");

  const headerActive = (pathName: string) => {
    if (!fullUrl) return "";
    const splittedUrl = fullUrl.split("/");

    return splittedUrl[3] === pathName ? "active" : "";
  };

  return (
    <header className="section page-header">
      <div className="rd-navbar-wrap">
        <nav
          className="rd-navbar rd-navbar-classic"
          data-layout="rd-navbar-fixed"
          data-sm-layout="rd-navbar-fixed"
          data-md-layout="rd-navbar-fixed"
          data-md-device-layout="rd-navbar-fixed"
          data-lg-layout="rd-navbar-static"
          data-lg-device-layout="rd-navbar-fixed"
          data-xl-layout="rd-navbar-static"
          data-xl-device-layout="rd-navbar-static"
          data-lg-stick-up-offset="46px"
          data-xl-stick-up-offset="46px"
          data-xxl-stick-up-offset="46px"
          data-lg-stick-up="true"
          data-xl-stick-up="true"
          data-xxl-stick-up="true"
        >
          <div className="rd-navbar-aside-outer">
            <div className="rd-navbar-aside">
              <div
                className="rd-navbar-collapse-toggle rd-navbar-fixed-element-1"
                data-rd-navbar-toggle=".rd-navbar-collapse"
              >
                <span></span>
              </div>
              <ul className="rd-navbar-aside-list rd-navbar-collapse">
                <li>
                  <div className="block-inline unit unit-spacing-xs align-items-center">
                    <div className="unit-left">
                      <span className="icon text-middle mdi mdi-phone"></span>
                    </div>
                    <div className="unit-body">
                      <a href="tel:(478) 225 9061">(478) 225 9061</a>
                    </div>
                  </div>
                </li>
                <li>
                  <div className="block-inline unit unit-spacing-xs align-items-center">
                    <div className="unit-left">
                      <span className="icon text-middle mdi mdi-email-outline"></span>
                    </div>
                    <div className="unit-body">
                      <a href="mailto:dynamic@dynamicrealtyga.com">dynamic@dynamicrealtyga.com</a>
                    </div>
                  </div>
                </li>
              </ul>
              <div className="rd-navbar-aside-item hidden lg:block">
                <div className="block-inline">
                  <div className="unit unit-spacing-xs align-items-center">
                    <span className="unit-left">
                      <span className="icon text-middle mdi mdi-login"></span>
                    </span>
                    <span className="unit-body">
                      <a href="/admin/login">Login</a>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="rd-navbar-main-outer">
            <div className="rd-navbar-main">
              <div className="rd-navbar-panel">
                <button className="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap">
                  <span></span>
                </button>

                <div className="rd-navbar-brand">
                  <a className="brand" href="/">
                    <img
                      className="brand-logo-dark"
                      // src="images/logo-default-142x41.png"
                      src="/images/logo2.png"
                      alt=""
                      width="142"
                      height="41"
                      srcSet="/images/logo2.png 2x"
                    />
                    <img
                      className="brand-logo-light"
                      // src="images/logo-inverse-121x61.png"\
                      src="/images/logo2.png"
                      alt=""
                      width="121"
                      height="61"
                      srcSet="images/logo2.png 2x"
                    />
                  </a>
                </div>
              </div>
              <div className="rd-navbar-nav-wrap">
                <ul className="rd-navbar-nav">
                  <li className="rd-nav-item">
                    <a className="rd-nav-link rd-nav-link-custom" href="#">
                      Buying / Selling
                    </a>
                  </li>
                  <li className="rd-nav-item">
                    <a className="rd-nav-link rd-nav-link-custom" href="#">
                      Leasing
                    </a>
                    <HeaderDropdown>
                      <HeaderDropdownGroup>
                        <div>
                          <form>
                            <div className="form-wrap">
                              <input type="text" id="search" className="form-input" />
                              <label className="form-label" htmlFor="search">
                                Search
                              </label>
                            </div>
                          </form>
                        </div>
                        <div className="mt-2">
                          <HeaderFeaturedHomes />
                        </div>
                      </HeaderDropdownGroup>
                      <HeaderDropdownGroup title="Future Residents">
                        <HeaderDropdownMenu
                          list={[
                            {
                              title: "Our Rentals",
                              href: "/#",
                            },
                            {
                              title: "Application Process",
                              child: [
                                {
                                  title: "Before You Apply",
                                  href: "/#",
                                },
                                {
                                  title: "Rental Criteria",
                                  href: "/#",
                                },
                                {
                                  title: "Before You Apply",
                                  href: "/#",
                                },
                              ],
                            },
                          ]}
                        />
                      </HeaderDropdownGroup>
                      <HeaderDropdownGroup title="Current Residents">
                        <HeaderDropdownMenu
                          list={[
                            {
                              title: "Moving In",
                              child: [
                                {
                                  title: "What To Be Done Prior",
                                  href: "/#",
                                },
                                {
                                  title: "Next Steps (keys, utilities, etc)",
                                  href: "/#",
                                },
                                {
                                  title: "Common Questions",
                                  href: "/#",
                                },
                              ],
                            },
                            {
                              title: "Welcome home",
                              child: [
                                {
                                  title: "Payment",
                                  href: "#",
                                },
                                {
                                  title: "Utilities",
                                  href: "#",
                                },
                                {
                                  title: "Maintenance",
                                  href: "#",
                                },
                              ],
                            },
                            {
                              title: "Moving Out",
                              child: [
                                {
                                  title: "What To Be Done Prior",
                                  href: "/#",
                                },
                                {
                                  title: "Next Steps (keys, utilities, etc)",
                                  href: "/#",
                                },
                                {
                                  title: "Common Questions",
                                  href: "/#",
                                },
                              ],
                            },
                          ]}
                        />
                      </HeaderDropdownGroup>
                      <HeaderDropdownGroup className="flex! pr-4!">
                        <div className="flex flex-col self-end!">
                          <a className="button button-secondary" href="/">
                            FAQ
                          </a>
                          <a className="button button-primary mt-2!" href="/">
                            APPLY NOW
                          </a>
                        </div>
                      </HeaderDropdownGroup>
                    </HeaderDropdown>
                  </li>
                  <li className="rd-nav-item">
                    <a className={`rd-nav-link rd-nav-link-custom`} href="/blog">
                      Resources
                    </a>
                  </li>
                  <li className="rd-nav-item block lg:hidden!">
                    <a className="rd-nav-link rd-nav-link-custom" href="/login">
                      LOGIN
                    </a>
                  </li>
                  {/* <li className="rd-nav-item">
                    <a className="rd-nav-link" href="#">
                      Properties
                    </a>

                    <ul className="rd-menu rd-navbar-dropdown">
                      <li className="rd-dropdown-item">
                        <a className="rd-dropdown-link" href="properties-grid.html">
                          Properties Grid
                        </a>
                      </li>
                      <li className="rd-dropdown-item">
                        <a className="rd-dropdown-link" href="properties-grid-2.html">
                          Properties Grid 2
                        </a>
                      </li>
                      <li className="rd-dropdown-item">
                        <a className="rd-dropdown-link" href="properties-list.html">
                          Properties List
                        </a>
                      </li>
                      <li className="rd-dropdown-item">
                        <a className="rd-dropdown-link" href="submit-property.html">
                          Submit property
                        </a>
                      </li>
                      <li className="rd-dropdown-item">
                        <a className="rd-dropdown-link" href="single-property.html">
                          Single Property
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li className="rd-nav-item">
                    <a className="rd-nav-link" href="about-us.html">
                      About Us
                    </a>
                  </li>
                  <li className="rd-nav-item">
                    <a className="rd-nav-link" href="blog.html">
                      Blog
                    </a>

                    <ul className="rd-menu rd-navbar-dropdown">
                      <li className="rd-dropdown-item">
                        <a className="rd-dropdown-link" href="blog-post.html">
                          Blog post
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li className="rd-nav-item">
                    <a className="rd-nav-link" href="#">
                      Pages
                    </a>
                    <HeaderDropdown>
                      <HeaderDropdownGroup>
                        <div>
                          <form>
                            <div className="form-wrap">
                              <input type="text" id="search" className="form-input" />
                              <label className="form-label" htmlFor="search">
                                Search
                              </label>
                            </div>
                          </form>
                        </div>
                        <div className="mt-2">
                          <HeaderFeaturedHomes />
                        </div>
                      </HeaderDropdownGroup>
                      <HeaderDropdownGroup title="Future Residents">
                        <HeaderDropdownMenu
                          list={[
                            {
                              title: "Our Rentals",
                              href: "/#",
                            },
                            {
                              title: "Application Process",
                              child: [
                                {
                                  title: "Before You Apply",
                                  href: "/#",
                                },
                                {
                                  title: "Rental Criteria",
                                  href: "/#",
                                },
                                {
                                  title: "Before You Apply",
                                  href: "/#",
                                },
                              ],
                            },
                          ]}
                        />
                      </HeaderDropdownGroup>
                      <HeaderDropdownGroup title="Current Residents">
                        <HeaderDropdownMenu
                          list={[
                            {
                              title: "Moving In",
                              child: [
                                {
                                  title: "What To Be Done Prior",
                                  href: "/#",
                                },
                                {
                                  title: "Next Steps (keys, utilities, etc)",
                                  href: "/#",
                                },
                                {
                                  title: "Common Questions",
                                  href: "/#",
                                },
                              ],
                            },
                            {
                              title: "Welcome home",
                              child: [
                                {
                                  title: "Payment",
                                  href: "#",
                                },
                                {
                                  title: "Utilities",
                                  href: "#",
                                },
                                {
                                  title: "Maintenance",
                                  href: "#",
                                },
                              ],
                            },
                            {
                              title: "Moving Out",
                              child: [
                                {
                                  title: "What To Be Done Prior",
                                  href: "/#",
                                },
                                {
                                  title: "Next Steps (keys, utilities, etc)",
                                  href: "/#",
                                },
                                {
                                  title: "Common Questions",
                                  href: "/#",
                                },
                              ],
                            },
                          ]}
                        />
                      </HeaderDropdownGroup>
                      <HeaderDropdownGroup className="flex! pr-4!">
                        <div className="flex flex-col self-end!">
                          <a className="button button-secondary" href="/">
                            FAQ
                          </a>
                          <a className="button button-primary mt-2!" href="/">
                            APPLY NOW
                          </a>
                        </div>
                      </HeaderDropdownGroup>
                    </HeaderDropdown>
                  </li>
                  <li className="rd-nav-item">
                    <a className="rd-nav-link" href="contact-us.html">
                      Contact Us
                    </a>
                  </li> */}
                </ul>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </header>
  );
}