import '@emanon/ema-icon';
import { BaseElement } from '@emanon/shared/components/base';
import { customElement } from '@emanon/shared/decorators/custom-element';
import { when } from '@emanon/shared/directives/when';
import { html, property } from 'lit-element';
import { style } from './index.gen.css';

/**
 * ## Overall
 * Used to notify users of information with menu style.
 *
 * @cssprop [--ema-c-menu-bgColor-primary=linear-gradient(90deg, #80a6ea, #5289ea)] Background color of 'primary'.
 * @cssprop [--ema-c-menu-bgColor-dark=lineaar-gradient(90deg, #80888f, #80888f)] Background color of 'dark'.
 * @cssprop [--ema-c-menu-bgColor-danger=lineaar-gradient(90deg, #ff8080, #f33)] Background color of 'danger'.
 * @cssprop [--ema-c-menu-borderColor-primary=#5289ea] Border color of 'primary'.
 * @cssprop [--ema-c-menu-borderColor-dark=#80888f] Border color of 'dark'.
 * @cssprop [--ema-c-menu-borderColor-danger=#f33] Border color of 'danger'.
 */

@customElement('ema-menu')
export class Menu extends BaseElement {
  @property({ type: String })
  name = '';

  @property({ type: Boolean, reflect: true })
  opened = false;

  @property({ type: String, reflect: true })
  color: 'primary' | 'dark' | 'danger' = 'primary';

  @property({ type: String, reflect: true })
  type: 'normal' | 'ghost' = 'normal';

  @property({ type: String, reflect: true })
  size: 'small' | 'large' = 'large';

  @property({ type: Boolean, reflect: true })
  disabled = false;

  static get styles() {
    return [super.styles, style];
  }

  constructor() {
    super();
  }

  render() {
    const { name, opened } = this;
    return html`
      <div class="container">
        <div class="button" @tap=${this.handleButtonTap}>
          <div class="button__text">${name}</div>
          <div class="button__icon">
            ${when(
              opened,
              () =>
                html`
                  <ema-icon name="top"></ema-icon>
                `,
              () =>
                html`
                  <ema-icon name="bottom"></ema-icon>
                `
            )}
          </div>
        </div>
        <div class="list"><slot></slot></div>
      </div>
    `;
  }

  private handleButtonTap = (e: Event) => {
    if (this.disabled) {
      e.stopPropagation();
      return;
    }
    /** Fires when menu has tapped. Accept to toggle. */
    this.dispatchEvent(
      new CustomEvent('request-toggle', {
        detail: {
          accept: () => (this.opened = !this.opened)
        },
        bubbles: true,
        composed: true
      })
    );
  };
}