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

export const componentName = getComponentName('divider');
class RawDivider extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
  constructor() {
    super();

    this.attachShadow({ mode: 'open' }).innerHTML = `
			<div>
				<descope-text>
					<slot></slot>
				</descope-text>
			</div>
		`;

    injectStyle(
      `
      	:host {
					display: inline-block;
				}
				:host > div {
					display: flex;
					height: 100%;
					width: 100%;
				}
				:host > div::before,
				:host > div::after {
					content: '';
					flex-grow: 1;
				}
				descope-text {
					flex-grow: 0;
					flex-shrink: 0;
				}
				:host(:empty) descope-text {
					display: none;
				}
				:host([vertical="true"]) div {
					width: fit-content;
				}
          `,
      this
    );

    this.textComponent = this.shadowRoot.querySelector('descope-text');

    forwardAttrs(this, this.textComponent, {
      includeAttrs: ['mode', 'variant', 'italic'],
    });
  }
}

const textVars = TextClass.cssVarList;
const { host, before, after, text } = {
  host: { selector: () => ':host' },
  before: { selector: '::before' },
  after: { selector: '::after' },
  text: { selector: 'descope-text' },
};

export const DividerClass = compose(
  createStyleMixin({
    mappings: {
      hostWidth: { ...host, property: 'width' },
      hostPadding: { ...host, property: 'padding' },
      hostDirection: { ...text, property: 'direction' },

      minHeight: {},
      alignItems: {},
      alignSelf: {},
      flexDirection: {},
      textAlign: { ...text, property: textVars.textAlign },

      labelTextWidth: { ...text, property: 'width' },
      labelTextMaxWidth: { ...text, property: 'max-width' },
      labelTextVerticalSpacing: [
        { ...text, property: 'padding-top' },
        { ...text, property: 'padding-bottom' },
      ],
      labelTextHorizontalSpacing: [
        { ...text, property: 'padding-right' },
        { ...text, property: 'padding-left' },
      ],

      stripeColor: [
        { ...before, property: 'background-color' },
        { ...after, property: 'background-color' },
      ],
      stripeHorizontalThickness: [
        { ...before, property: 'height' },
        { ...after, property: 'height' },
      ],
      stripeVerticalThickness: [
        { ...before, property: 'width' },
        { ...after, property: 'width' },
      ],
      stripeColorOpacity: [
        { ...before, property: 'opacity' },
        { ...after, property: 'opacity' },
      ],
    },
  }),
  draggableMixin,
  componentNameValidationMixin
)(RawDivider);
