/*
 * Copyright (C) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { BaseElement, element } from '../BaseElement.js';
import { SpCheckDesBox } from '../../trace/component/setting/SpCheckDesBox.js';

@element('lit-check-text')
export class LitCheckBoxWithText extends BaseElement {
  private _checkBox: SpCheckDesBox | undefined;
  private _lowerLimit: HTMLInputElement | undefined;
  private _upLimit: HTMLInputElement | undefined;

  static get observedAttributes() {
    return ['text', 'lowerLimit', 'upLimit', 'checked'];
  }

  get text(): string {
    return this.getAttribute('text') || '';
  }

  set text(text: string) {
    this.setAttribute('text', text);
  }

  get lowerLimit(): string {
    return this.getAttribute('lowerLimit') || '0';
  }

  set lowerLimit(lower: string) {
    this.setAttribute('lowerLimit', lower);
  }

  get upLimit(): string {
    return this.getAttribute('upLimit') || '∞';
  }

  set upLimit(upLimit: string) {
    this.setAttribute('upLimit', upLimit);
  }

  get checked() {
    return this.getAttribute('checked') != null;
  }

  set checked(checked: boolean) {
    if (checked) {
      this.setAttribute('checked', '');
    } else {
      this.removeAttribute('checked');
    }
  }

  initElements(): void {
    this._checkBox = this.shadowRoot?.getElementById('checkbox') as SpCheckDesBox;
    this._lowerLimit = this.shadowRoot?.getElementById('textLowerLimit') as HTMLInputElement;
    this._upLimit = this.shadowRoot?.getElementById('_upLimit') as HTMLInputElement;
  }

  initHtml(): string {
    return `
        <style>
        :host{
         display: grid;
         grid-template-columns: 1fr min-content min-content;
         grid-column-gap: 10px;
         text-align: center;
         height: 16px;
        }
        .input-style {
          width: 48px;
          height: 16px;
          border: 1px solid #B3B3B3;
          text-align: center;
        }

        </style>
        <check-des-box id ='checkbox' value="${this.text}"></check-des-box>
        <input class="input-style" id="textLowerLimit" value="${this.lowerLimit}"/>
        <input class="input-style" id="_upLimit" value="${this.upLimit}"/>
        `;
  }

  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
    if (name == 'checked') {
      this._checkBox!.checked = newValue !== null;
    }
    if (name == 'text') {
      this._checkBox?.setAttribute('value', newValue);
    }
    if (name == 'lowerLimit') {
      this._lowerLimit!.textContent = newValue;
    }
    if (name == 'upLimit') {
      this._upLimit!.textContent = newValue;
    }
  }
}