/*
 * 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 { LitTabs } from './lit-tabs.js';

@element('lit-tabpane')
export class LitTabpane extends BaseElement {
  static get observedAttributes() {
    return ['tab', 'key', 'disabled', 'icon', 'closeable', 'hidden'];
  }

  get tab() {
    return this.getAttribute('tab');
  }

  set tab(value) {
    this.setAttribute('tab', value || '');
  }

  get icon() {
    return this.getAttribute('icon');
  }

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

  set disabled(value) {
    if (value === null || value === false) {
      this.removeAttribute('disabled');
    } else {
      this.setAttribute('disabled', value + '');
    }
  }

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

  set hidden(value) {
    this.setAttribute('hidden', `${value}`);
  }

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

  set closeable(value) {
    if (value === null || value === false) {
      this.removeAttribute('closeable');
    } else {
      this.setAttribute('closeable', value + '');
    }
  }

  get key() {
    return this.getAttribute('key') || '';
  }

  set key(value) {
    this.setAttribute('key', value);
  }

  initElements(): void {}

  initHtml(): string {
    return `
        <style>
        :host(){
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            overflow: auto;
            width: 100%;
        }
        </style>
        <slot></slot>
        `;
  }

  connectedCallback() {}

  disconnectedCallback() {}

  adoptedCallback() {}

  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
    if (oldValue !== newValue && newValue !== undefined) {
      if (name === 'tab' && this.parentNode && this.parentNode instanceof LitTabs) {
        this.parentNode.updateLabel && this.parentNode.updateLabel(this.key, newValue);
      }
      if (name === 'disabled' && this.parentNode && this.parentNode instanceof LitTabs) {
        this.parentNode.updateDisabled && this.parentNode.updateDisabled(this.key, newValue);
      }
      if (name === 'closeable' && this.parentNode && this.parentNode instanceof LitTabs) {
        this.parentNode.updateCloseable && this.parentNode.updateCloseable(this.key, newValue);
      }
      if (name === 'hidden' && this.parentNode && this.parentNode instanceof LitTabs) {
        this.parentNode.updateHidden && this.parentNode.updateHidden(this.key, newValue);
      }
    }
  }
}