/**
 * 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-button-toggle.css';
import NileElement from '../internal/nile-element';

/**
 * Nile icon component.
 *
 * @tag nile-button-toggle
 *
 */
@customElement('nile-button-toggle')
export class NileButtonToggle extends NileElement {

	/**
	 * The styles for ButtonToggle
	 * @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({ type: Boolean, reflect: true })
  active = false;

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

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

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

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

  @property({ type: String })
  value = '';

  connectedCallback() {
    super.connectedCallback();
    this.addEventListener('click', this.toggle);
  }

  disconnectedCallback() {
    this.removeEventListener('click', this.toggle);
    super.disconnectedCallback();
  }

  toggle() {
    if (this.disabled) return;
    this.emit('nile-toggle-change',{ active: this.active, value: this.value })
  }

	/**
	 * Render method
	 * @slot This is a slot test
	 */
  public render(): TemplateResult {
    let classes = ['nile-button-toggle'];
    if (this.active) {
      classes.push('nile-button-toggle__active');
    }
    if (this.initial) {
      classes.push('nile-button-toggle__initial');
    }
    if (this.middle) {
      classes.push('nile-button-toggle__middle');
    }
    if (this.end) {
      classes.push('nile-button-toggle__end');
    }
    if (this.disabled) {
      classes.push('nile-button-toggle__disabled');
    }

    const classString = classes.join(' ');

    return html`
      <div class="${classString} " part="base">
        <slot name="prefix"></slot>
        <slot> </slot>
      </div>
    `;
  }

	/* #endregion */
}

export default NileButtonToggle;

declare global {
  interface HTMLElementTagNameMap {
    'nile-button-toggle': NileButtonToggle;
  }
}