import { css, html, LitElement } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import type { GlPromoBanner } from '../../../home/components/promo-banner.js';
import { elementBase, linkBase } from '../../../shared/components/styles/lit/base.css.js';
import type { GlAccountChip } from './account-chip.js';
import './account-chip.js';
import './integrations-chip.js';
import '../../../home/components/onboarding.js';
import '../../../home/components/promo-banner.js';
import '../../../shared/components/button.js';
import '../../../shared/components/button-container.js';
import '../../../shared/components/code-icon.js';
import '../../../shared/components/overlays/popover.js';
// import '../../../shared/components/snow.js';

@customElement('gl-home-header')
export class GlHomeHeader extends LitElement {
	static override styles = [
		elementBase,
		linkBase,
		css`
			:host {
				display: block;
			}

			.container {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 0.6rem;
			}

			.container:focus,
			.container:focus-within {
				outline: none;
			}

			/* .actions {
				flex: none;
				display: flex;
				gap: 0.2rem;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			} */

			gl-promo-banner {
				margin: 0 0.2rem 0.6rem;
			}

			gl-promo-banner:has(gl-promo:not([has-promo])) {
				display: none;
			}

			.group {
				display: flex;
				align-items: center;
				gap: 0.4rem;
			}
		`,
	];

	@query('gl-account-chip')
	private accountChip!: GlAccountChip;

	@query('gl-promo-banner')
	private promoBanner!: GlPromoBanner;

	override render(): unknown {
		return html`<gl-promo-banner></gl-promo-banner>
			<div class="container" tabindex="-1">
				<span class="group"><gl-account-chip></gl-account-chip></span>
				<gl-integrations-chip></gl-integrations-chip>
			</div>
			<gl-onboarding></gl-onboarding>`;
	}

	show(): void {
		this.accountChip.show();
	}

	refreshPromo(): void {
		this.promoBanner?.requestUpdate();
	}
}
