import { forwardAttrs, forwardProps, syncAttrs } from '../../helpers/componentHelpers';
import { componentName as descopeInternalComponentName } from './descope-boolean-field-internal/BooleanFieldInternal';

export const booleanFieldMixin = (superclass) =>
  class BooleanFieldMixinClass extends superclass {
    init() {
      super.init?.();

      const template = document.createElement('template');
      template.innerHTML = `
				<${descopeInternalComponentName}
					tabindex="-1"
					slot="input"
				></${descopeInternalComponentName}>
			`;

      this.baseElement.appendChild(template.content.cloneNode(true));
      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
      this.checkbox = this.inputElement.querySelector('vaadin-checkbox');

      forwardAttrs(this, this.inputElement, {
        includeAttrs: [
          'required',
          'full-width',
          'size',
          'label',
          'invalid',
          'disabled',
          'readonly',
        ],
      });

      forwardProps(this.inputElement, this, ['checked']);
      syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
    }
  };
