import { ButtonClass } from '@descope-ui/descope-button/class';
import { injectStyle } from '@descope-ui/common/components-helpers';
import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../../mixins';
import { createBaseClass } from '../../../baseClasses/createBaseClass';
import { compose } from '../../../helpers';
import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';

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

class RawSelectItem extends createBaseClass({
  componentName,
  baseSelector: ':host > descope-button',
}) {
  get size() {
    return this.getAttribute('size') || 'md';
  }

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

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

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

  constructor() {
    super();

    this.attachShadow({ mode: 'open' }).innerHTML = `
    <descope-button variant="${this.variant}" size="${this.size}" mode="primary">
      <slot></slot>
    </descope-button>
	`;

    injectStyle(
      `
      descope-button {
        max-width: 100%;
      }
			descope-button > slot {
				width: 100%;
				overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
			}
			:host {
				display: inline-block;
        max-width: 100%
			}
  `,
      this
    );

    forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
    forwardAttrs(this.baseElement, this, { includeAttrs: ['focused', 'active'] });
  }

  handleFocus() {
    this.shadowRoot.querySelector('descope-button')?.focus();
  }

  focus() {
    this.handleFocus();
  }

  init() {
    super.init();
    this.addEventListener('focus', (e) => {
      // we want to ignore focus events we are dispatching
      if (e.isTrusted) {
        this.handleFocus();
      }
    });
  }
}

export const ButtonSelectionGroupItemClass = compose(
  createStyleMixin({
    mappings: {
      hostDirection: {
        selector: () => ButtonClass.componentName,
        property: ButtonClass.cssVarList.hostDirection,
      },
      backgroundColor: {
        selector: () => ButtonClass.componentName,
        property: ButtonClass.cssVarList.backgroundColor,
      },
      labelTextColor: {
        selector: () => ButtonClass.componentName,
        property: ButtonClass.cssVarList.labelTextColor,
      },
      borderColor: {
        selector: () => ButtonClass.componentName,
        property: ButtonClass.cssVarList.borderColor,
      },
      borderWidth: {
        selector: () => ButtonClass.componentName,
        property: ButtonClass.cssVarList.borderWidth,
      },
      borderStyle: {
        selector: () => ButtonClass.componentName,
        property: ButtonClass.cssVarList.borderStyle,
      },
      borderRadius: {
        selector: () => ButtonClass.componentName,
        property: ButtonClass.cssVarList.borderRadius,
      },
      outlineColor: {
        selector: () => ButtonClass.componentName,
        property: ButtonClass.cssVarList.outlineColor,
      },
    },
  }),
  draggableMixin,
  componentNameValidationMixin
)(RawSelectItem);
