import { classMap } from 'lit/directives/class-map.js'
import { property } from 'lit/decorators.js'
import { html } from 'lit'
import componentStyles from '../../styles/component.styles.js'
import TerraElement from '../../internal/terra-element.js'
import styles from './site-navigation.styles.js'
import type { CSSResultGroup } from 'lit'

/**
 * @summary Site navigation provides a flexible navigation structure with dropdown menus.
 * @documentation https://terra-ui.netlify.app/components/site-navigation
 * @status experimental
 * @since 1.0
 *
 * @slot - Navigation items. Can contain `<terra-dropdown>` elements or any custom navigation content.
 *
 * @csspart base - The component's base wrapper.
 */
export default class TerraSiteNavigation extends TerraElement {
    static styles: CSSResultGroup = [componentStyles, styles]

    /** When true, dropdowns use full-width panels instead of normal list-based navigation. */
    @property({ type: Boolean, reflect: true, attribute: 'full-width' })
    fullWidth = false

    connectedCallback() {
        super.connectedCallback()
        this.injectStyles()
    }

    private injectStyles() {
        if (typeof document === 'undefined') return

        const styleId = 'terra-site-navigation-global-styles'
        if (document.getElementById(styleId)) return

        const style = document.createElement('style')
        style.id = styleId
        style.textContent = `
            /* Navigation buttons in site-navigation should be blue */
            terra-site-navigation terra-button[variant='text'] {
                --terra-button-text-text-color: var(--terra-color-nasa-blue) !important;
                --terra-button-text-text-color-hover: var(--terra-color-nasa-blue-tint) !important;
            }

            /* Dropdown panels in site-navigation should have dark background */
            terra-site-navigation terra-dropdown::part(panel) {
                background-color: var(--terra-color-carbon-black) !important;
                border-color: var(--terra-color-carbon-20) !important;
                color: var(--terra-color-spacesuit-white) !important;
            }

            /* Menus inside site-navigation dropdowns */
            terra-site-navigation terra-dropdown terra-menu {
                background-color: var(--terra-color-carbon-black) !important;
                border-color: var(--terra-color-carbon-20) !important;
                color: var(--terra-color-spacesuit-white) !important;
            }

            terra-site-navigation terra-dropdown terra-menu-item {
                color: var(--terra-color-spacesuit-white) !important;
            }

            terra-site-navigation terra-dropdown terra-menu-item:hover {
                background-color: var(--terra-color-carbon-80) !important;
                color: var(--terra-color-spacesuit-white) !important;
            }

            terra-site-navigation terra-dropdown terra-menu-item:focus-visible {
                background-color: var(--terra-color-nasa-blue) !important;
                color: var(--terra-color-spacesuit-white) !important;
            }

            terra-site-navigation terra-dropdown terra-menu-item a {
                color: var(--terra-color-spacesuit-white) !important;
                text-decoration: none;
            }

            terra-site-navigation terra-dropdown terra-menu-item a:hover {
                color: var(--terra-color-spacesuit-white) !important;
            }

            /* Full-width mode */
            terra-site-navigation[full-width] terra-dropdown::part(base__popup) {
                position: fixed !important;
                left: 0 !important;
                right: 0 !important;
                width: 100vw !important;
                max-width: 100vw !important;
                transform: none !important;
            }
        `
        document.head.appendChild(style)
    }

    render() {
        return html`
            <nav
                part="base"
                class=${classMap({
                    'site-navigation': true,
                    'site-navigation--full-width': this.fullWidth,
                })}
            >
                <slot></slot>
            </nav>
        `
    }
}
