/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

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

/**
 * Nile icon component.
 *
 * @tag nile-card
 *
 */
@customElement('nile-card')
export class NileCard extends NileElements {
  static styles: CSSResultGroup = styles;

  private readonly hasSlotController = new HasSlotController(this, 'footer');

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

  render() {
    return html`
      <div
        part="base"
        class=${classMap({
          card: true,
          'card--has-footer': this.hasSlotController.test('footer'),
          'card--active': this.active,
          'card--disabled': this.disabled,
        })}
      >
        <div class="body__wrapper" part="body__wrapper"
        class=${classMap({
          'body__wrapper':true,
          'body__wrapper_nf': !this.hasSlotController.test('footer')
        })}
        >
          <slot name="header" part="header" class="card__header"></slot>
          <slot part="body" class="card__body"></slot>
        </div>

        <slot
          name="footer"
          part="footer"
          ?hidden="${!this.hasSlotController.test('footer')}"
          class="card__footer"
        ></slot>
      </div>
    `;
  }
}

export default NileCard;

declare global {
  interface HTMLElementTagNameMap {
    'nile-card': NileCard;
  }
}