import {
  createStyleMixin,
  draggableMixin,
  createProxy,
  proxyInputMixin,
  componentNameValidationMixin,
} from '../../../mixins';
import { componentName as descopeInternalComponentName } from '../descope-button-multi-selection-group-internal/ButtonMultiSelectionGroupInternalClass';
import { compose } from '../../../helpers';
import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
import {
  buttonSelectionGroupBaseMixin,
  buttonSelectionGroupMappings,
  buttonSelectionGroupStyles,
} from '../baseButtonSelectionGroup';

export const componentName = getComponentName('button-multi-selection-group');

const buttonMultiSelectionGroupMixin = (superclass) =>
  class ButtonMultiSelectionGroupMixinClass extends superclass {
    init() {
      super.init?.();
      const template = document.createElement('template');

      template.innerHTML = `
      <${descopeInternalComponentName}
      	name="button-selection-group"
      	slot="input"
        tabindex="-1"
        part="internal-component"
      >
        <slot></slot>
      </${descopeInternalComponentName}>
      `;

      this.baseElement.appendChild(template.content.cloneNode(true));

      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);

      forwardAttrs(this, this.inputElement, {
        includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
      });
    }
  };

export const ButtonMultiSelectionGroupClass = compose(
  createStyleMixin({
    mappings: {
      ...buttonSelectionGroupMappings,
    },
  }),
  draggableMixin,
  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
  componentNameValidationMixin,
  buttonSelectionGroupBaseMixin,
  buttonMultiSelectionGroupMixin
)(
  createProxy({
    slots: [],
    wrappedEleName: 'vaadin-text-field',
    style: () => buttonSelectionGroupStyles,
    excludeAttrsSync: ['tabindex', 'style'],
    componentName,
  })
);

export default ButtonMultiSelectionGroupClass;
