import {
  LitElement,
  html,
  CSSResultArray,
  TemplateResult,
} from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styles } from './nile-section-message.css';
import NileElement from '../internal/nile-element';
import { HasSlotController } from '../internal/slot';

@customElement('nile-section-message')
export class NileSectionMessage extends NileElement {
  public static get styles(): CSSResultArray {
    return [styles];
  }

  private readonly hasSlotController = new HasSlotController(
    this,
    'section__heading',
    'section__description',
    'footer__actions'
  );

  @property({ type: String, attribute: 'heading' }) heading: string = '';
  @property({ type: String, attribute: 'description' }) description: string =
    '';

  // error tick warning
  @property({ type: Number, attribute: 'icon-size' }) iconSize: number = 16;

  /** The section message theme variant. */
  @property() variant: 'primary' | 'success' | 'warning' | 'error' = 'primary';

  iconMap = {
    primary: 'var(--nile-icon-info, var(--ng-icon-info-circle))',
    success: 'var(--nile-icon-done-02, var(--ng-icon-check-circle-broken))',
    warning: 'var(--nile-icon-warning, var(--ng-icon-alert-circle))',
    error: 'var(--nile-icon-warning, var(--ng-icon-alert-circle))',
  };

  connectedCallback() {
    super.connectedCallback();
    this.updateComplete.then(() => {
      this.addActionSeparators();
    });
  }

  private addActionSeparators() {
    const slot = this.shadowRoot?.querySelector(
      'slot[name="footer__actions"]'
    ) as any;
  }

  public render(): TemplateResult {
    const hasHeader =
      this.hasSlotController.test('section__heading') || this.heading;
    const hasDescription =
      this.hasSlotController.test('section__description') || this.description;
    const hasFooter = this.hasSlotController.test('footer__actions');
    return html`
      <div
        part="parent__wrapper"
        class=${classMap({
          parent__wrapper: true,
          'section--primary': this.variant === 'primary',
          'section--success': this.variant === 'success',
          'section--warning': this.variant === 'warning',
          'section--error': this.variant === 'error',
        })}
      >
        <div
          class=${classMap({
            left__wrapper: true,
            'icon--primary': this.variant === 'primary',
            'icon--success': this.variant === 'success',
            'icon--warning': this.variant === 'warning',
            'icon--error': this.variant === 'error',
          })}
          part="icon__wrapper"
        >
          <slot name="icon">
            <nile-icon-button
              name="${this.iconMap[this.variant]}"  
              size="${this.iconSize}"
              color="var(--nile-colors-white-base, white)"
            >
            </nile-icon-button>
          </slot>
        </div>
        <div class="right__wrapper" part="content__wrapper">
          ${hasHeader
            ? html` <slot name="section__heading" class="section__heading">
                <div part="section__heading">${this.heading}</div>
              </slot>`
            : null}
          ${hasDescription
            ? html` <slot
                name="section__description"
                class="section__description"
              >
                <div part="section__description">${this.description}</div>
              </slot>`
            : null}
          ${hasFooter
            ? html`
                <slot
                  name="footer__actions"
                  part="footer__actions"
                  class="footer__actions"
                ></slot>
              `
            : ``}
        </div>
      </div>
    `;
  }
}

export default NileSectionMessage;

declare global {
  interface HTMLElementTagNameMap {
    'nile-section-message': NileSectionMessage;
  }
}