import { html, nothing } from 'lit';
import { query, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { boolean } from '../../internal/boolean.mjs';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import { HasSlotController } from '../../internal/slot.mjs';
import styles from './panel-header.styles.mjs';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
class FlowUiPanelHeader extends FlowRdfElement {
  constructor() {
    super();
    this.hasSlotController = new HasSlotController(this, "prefix", "suffix");
    this.closed = false;
    this.fixed = false;
  }
  connectedCallback() {
    super.connectedCallback();
    this.closed = boolean(this.closed, true);
    this.fixed = boolean(this.fixed, true);
  }
  disconnectedCallback() {
    super.disconnectedCallback();
  }
  // Private methods
  handleHeaderClick() {
    if (this.fixed) {
      return;
    }
    this.toggleButton.toggle();
    this.header.focus();
  }
  handleAccessoryClick(event) {
    event.stopPropagation();
  }
  handleToggleClick(event) {
    event.stopPropagation();
  }
  handleHeaderKeyDown(event) {
    if (this.fixed) {
      return;
    }
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      this.closed = !this.closed;
    }
    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
      event.preventDefault();
      this.closed = true;
    }
    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
      event.preventDefault();
      this.closed = false;
    }
    this.emit(this.closed ? "flow-ui-collapse" : "flow-ui-expand");
  }
  handleExpandCollapse() {
    this.closed = this.toggleButton.closed;
  }
  render() {
    return html`
      <div
        part="base"
        class=${classMap({
      "panel-header": true,
      "panel-header--closed": this.closed,
      "panel-header--open": !this.closed,
      "panel-header-prefix": this.hasSlotController.test("prefix"),
      "panel-header-suffix": this.hasSlotController.test("suffix")
    })}
        role="button"
        aria-expanded=${this.closed ? "false" : "true"}
        aria-controls="content"
        tabindex="0"
        @click=${this.handleHeaderClick}
        @keydown=${this.handleHeaderKeyDown}
        title=""
        @flow-ui-expand=${this.handleExpandCollapse}
        @flow-ui-collapse=${this.handleExpandCollapse}
      >
        <slot
          name="prefix"
          part="prefix"
          class="panel-header__prefix"
          @click=${this.handleAccessoryClick}
          @keydown=${this.handleHeaderKeyDown}
        ></slot>

        <slot name="title" part="title" class="panel-header__title-slot">
          <span class="panel-header__title">${this.title}</span>
        </slot>

        <slot
          name="suffix"
          part="suffix"
          class="panel-header__suffix"
          @click=${this.handleAccessoryClick}
          @keydown=${this.handleHeaderKeyDown}
        ></slot>
        ${this.fixed ? nothing : html`
              <flow-ui-split-view-toggle-button
                class="panel-header__toggle-button"
                position="top"
                ?closed=${this.closed}
                @click=${this.handleToggleClick}
              ></flow-ui-split-view-toggle-button>
            `}
      </div>
    `;
  }
}
FlowUiPanelHeader.styles = styles;
__decorateClass([
  query(".panel-header")
], FlowUiPanelHeader.prototype, "header", 2);
__decorateClass([
  query(".panel-header__toggle-button")
], FlowUiPanelHeader.prototype, "toggleButton", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiPanelHeader.prototype, "closed", 2);
__decorateClass([
  property({ reflect: true })
], FlowUiPanelHeader.prototype, "title", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiPanelHeader.prototype, "fixed", 2);

export { FlowUiPanelHeader as default };
