/**
 * 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 { html, nothing, CSSResultArray, TemplateResult } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styles } from './nile-empty-state.css';
import NileElement from '../internal/nile-element';
import { ifDefined } from 'lit/directives/if-defined.js';
/**
 * Nile empty-state component.
 *
 * @tag nile-empty-state
 *
 */
@customElement('nile-empty-state')
export class NileEmptyState extends NileElement {

  /**
   * The styles for nile-empty-state
   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
   */
  public static get styles(): CSSResultArray {
    return [styles];
  }

  @property() size: 'sm' | 'md' | 'lg'  = 'md';

  @property() variant:
    | 'flat'
    | 'content'
    | 'tonal' = 'tonal';

  @property() icon: string = 'var(--nile-icon-error, var(--ng-icon-x-circle))';
  @property({type:Boolean}) grayscale: boolean = false;

  @property() text: String = 'Empty State';
  @property({attribute:'sub-text'}) subText: String = 'No Data';
  @property() svgIconUrl: string;
  @property({type: Number}) svgIconSize: number = 40;
  @property({type: String}) svgIconColor: string;

  /* #endregion */

  /* #region Methods */

  /**
   * Render method
   * @slot This is a slot test
   */
  public render(): TemplateResult {
    return html`
      <div part="container" class="${classMap({
        'empty-state': true,
        'empty-state--sm': this.size == 'sm',
        'empty-state--md': this.size == 'md',
        'empty-state--lg': this.size == 'lg'
      })}">
        <div part="body" class="${classMap({ 'empty-state__body': true })}">

          ${this.variant == 'content' ? html`
            <div part="content-image"  class="empty-state__body--content">
              ${!this.icon && !this.svgIconUrl ? nothing : html`
                <div part="icon-wrapper" class="empty-state__img__icon">
                  ${this.svgIconUrl ? html`
                    <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}"  color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
                    <!-- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${this.svgIconColor ? this.svgIconColor : '#ddd'}"></nile-icon> -->
                  ` : html`
                    <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
                  `}
                </div>`
              }
            </div>`: nothing
          }

          ${this.variant == 'tonal' ? html`
            <div part="tonal-body" class="empty-state__body--tonal">
              ${this.svgIconUrl ? html`
                <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
              ` : html`
                <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="40"></nile-icon>
              `}
            </div>`: nothing
          }

          ${this.variant == 'flat' ? html`
            <div part="flat-body" class="empty-state__body--flat">
					<span class="nile-flat-type-icon">
						${this.svgIconUrl ? html`
              <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" variant="secondary" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
            ` : html`
              <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
            `}
					</span>
            </div>`: nothing
          }

          <div part="text-section" class="empty__state__text-section">
            <div part="text" class="empty-state__text">${this.text}</div>
            <div part="subtitle" class="empty-state__subtext">${this.subText}</div>
          </div>
        </div>

        <div part="actions" class="empty-state-actions">
          <slot></slot>
        </div>
      </div>
    `;
  }

  /* #endregion */
}

export default NileEmptyState;

declare global {
  interface HTMLElementTagNameMap {
    'nile-empty-state': NileEmptyState;
  }
}