import {
  createStyleMixin,
  draggableMixin,
  createProxy,
  proxyInputMixin,
  componentNameValidationMixin,
} from '../../../mixins';
import { compose } from '../../../helpers';
import { forwardAttrs, getComponentName, syncAttrs } from '../../../helpers/componentHelpers';
import { componentName as descopeInternalComponentName } from './descope-saml-group-mappings-internal/SamlGroupMappingsInternal';

export const componentName = getComponentName('saml-group-mappings');

const customMixin = (superclass) =>
  class SamlGroupMappingsMixinClass extends superclass {
    init() {
      super.init?.();

      const template = document.createElement('template');

      template.innerHTML = `
      <${descopeInternalComponentName}
        tabindex="-1"
      ></${descopeInternalComponentName}>
      `;

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

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

      forwardAttrs(this, this.inputElement, {
        includeAttrs: [
          'size',
          'full-width',
          'label-group',
          'label-value',
          'label-attr',
          'button-label',
          'separator',
          'options',
          'readonly',
          'disabled',
        ],
      });

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

const { host, groupInput, errorMessage } = {
  host: { selector: () => ':host' },
  groupInput: { selector: 'descope-text-field' },
  errorMessage: { selector: '::part(error-message)' },
};

export const SamlGroupMappingsClass = compose(
  createStyleMixin({
    mappings: {
      hostWidth: { ...host, property: 'width' },
      hostDirection: { ...host, property: 'direction' },
      groupNameInputMarginBottom: { ...groupInput, property: 'margin-bottom' },
      errorMessageIcon: { ...errorMessage, property: 'background-image' },
      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
      errorMessageFontSize: { ...errorMessage, property: 'font-size' },
    },
  }),
  draggableMixin,
  proxyInputMixin({
    proxyProps: ['value', 'selectionStart'],
    inputEvent: 'input',
    triggerValidationEvents: ['mapping-item-added', 'mapping-item-removed'],
    proxyParentValidation: true,
  }),
  componentNameValidationMixin,
  customMixin
)(
  createProxy({
    slots: [],
    wrappedEleName: 'vaadin-custom-field',
    style: () => `
      :host {
        display: inline-flex;
        max-width: 100%;
        direction: ltr;
      }

      vaadin-custom-field {
        line-height: unset;
        width: 100%;
      }

      descope-text-field {
        width: auto;
      }

      descope-mappings-field {
        display: block;
      }
    `,
    excludeAttrsSync: [
      'tabindex',
      'label-group',
      'label-value',
      'label-attr',
      'button-label',
      'separator',
      'options',
      'error-message',
      'style',
    ],
    componentName,
  })
);

export default SamlGroupMappingsClass;
