import { CSSResultGroup,PropertyValues } from 'lit';
import { LitElement, html} from 'lit';
import styles from './nile-slide-toggle.css';
import NileElement from '../internal/nile-element';
import { classMap } from 'lit/directives/class-map.js';
import { customElement, property } from 'lit/decorators.js';

@customElement('nile-slide-toggle')
export class NileSlideToggle extends NileElement {
  public static styles: CSSResultGroup = styles;

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

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

  @property({ type: String, }) textPosition:'left' | 'right' = 'right';

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

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

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

  @property({ attribute: 'help-text', reflect: true }) helpText = '';

  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';

  connectedCallback() {
    super.connectedCallback();
    this.emit('nile-init');
    this.style.setProperty('--slide-toggle-width',this.fullWidth?'100%':'auto')
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.emit('nile-destroy');
  }

  toggleValue() {
    this.isChecked = !this.isChecked;
    this.emit('change',{ checked: this.isChecked, value: this.isChecked });
    this.emit('nile-change',{ checked: this.isChecked, value: this.isChecked  });
  }

  public render() {
    const hasHelpText = this.helpText ? true : false;
    const hasErrorMessage = this.errorMessage ? true : false;

    return html`
      <div
        class=${classMap({
          'nile-slide-toggle': true,
          'nile-slide--disabled': this.disabled,
          'nile-slide-toggle--reverse':this.textPosition=='left'
        })}
        part="base"
      >
        <label 
        class="${classMap({
          'nile-slide-toggle__switch':true,
          'nile-slide-toggle__switch--left':this.textPosition=='right',
          'nile-slide-toggle__switch--right':this.textPosition=='left',
        })}"
        class="nile-slide-toggle__switch" part="slide-toggle-switch">
          <input
            type="checkbox"
            .checked=${this.isChecked}
            @change=${this.toggleValue}
            tabindex=${this.disabled ? '-1' : '0'}
          />
          <span class="nile-slide-toggle__slider" part="slide-toggle-slider"></span>
        </label>
        <span class="nile-slide-toggle__label" part="slide-toggle-label-container">
          <span part="slide-toggle-label">${this.label}</span>
          <span class="nile-slide-toggle__sublabel" part="slide-toggle-sublabel">${this.sublabel}</span>
        </span>
      </div>
      ${hasHelpText
        ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
        : ``}
      ${hasErrorMessage
        ? html`
            <nile-form-error-message
              >${this.errorMessage}</nile-form-error-message
            >
          `
        : ``}
    `;
  }
}