import React from "react"
import { twMerge } from "tailwind-merge"

import { graphql, useStaticQuery } from "gatsby"
import { MenuAlt1Icon } from "@heroicons/react/outline"
import { Logo, Menu } from "@onegeo-suite/gatsby-theme-onegeo"

// import { CommandPalette } from "@onegeo-suite/gatsby-theme-onegeo"
import { UserMenu } from "@onegeo-suite/gatsby-plugin-auth"

interface IHeader {
    className?: string
    logo?: any
}

const Header = (props: IHeader) => {
    // Limit image height + preserve aspect ration gatsbyImageData(height: 52)
    // header is h-16 = 64px (if changed adjust also Layout.tsx)
    const dataDirectus = useStaticQuery(graphql`
        query getLogoHeader {
            directus {
                site {
                    logo {
                        id
                        imageFile {
                            childImageSharp {
                                gatsbyImageData(height: 52)
                            }
                            name
                            publicURL
                        }
                    }
                    options
                }
            }
        }
    `)

    const logo = dataDirectus.directus.site.logo?.imageFile

    const options = dataDirectus.directus.site.options ?? {}
    const oClass = options.class || {}

    return (
        <header
            className={twMerge(
                "navbar bg-base-100 fixed top-0 z-50 h-16 shadow",
                oClass?.navbar
            )}
        >
            <div className={twMerge("navbar-start", oClass?.navbarStart)}>
                <div className="dropdown lg:hidden">
                    <label tabIndex={0} className="btn btn-ghost ">
                        <MenuAlt1Icon className="h-5 w-5" />
                    </label>
                    <Menu
                        name="header"
                        className="menu menu-compact dropdown-content bg-base-100 rounded-box z-50 mt-3 w-52 p-2 shadow"
                        options={options?.headerMenu}
                        userMenu={true}
                    />
                </div>
                <Logo image={logo} url="/" />
            </div>

            <div
                className={twMerge(
                    "navbar-center hidden lg:flex",
                    oClass?.navbarCenter
                )}
            >
                <Menu
                    name="header"
                    className="menu menu-horizontal p-0"
                    options={options?.headerMenu}
                />
            </div>

            <div
                className={twMerge(
                    "navbar-end hidden lg:flex",
                    oClass?.navbarEnd
                )}
            >
                {/* <CommandPalette /> */}
                <UserMenu />
            </div>
        </header>
    )
}

export default Header