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

export const componentName = getComponentName('container');

class RawContainer extends createBaseClass({ componentName, baseSelector: 'slot' }) {
  constructor() {
    super();

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

    injectStyle(
      `
			:host > slot {
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				display: flex;
				overflow: auto;
			}
			:host {
				display: inline-block;
			}
  `,
      this
    );
  }
}

export const ContainerClass = compose(
  createStyleMixin({
    mappings: {
      hostHeight: { selector: () => ':host', property: 'height' },
      hostWidth: { selector: () => ':host', property: 'width' },
      hostDirection: { selector: () => ':host', property: 'direction' },
      itemsGrow: { selector: () => '::slotted(*)', property: 'flex-grow', fallback: '0' },
      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],

      flexDirection: {},
      justifyContent: {},
      alignItems: {},
      gap: {},
      flexWrap: {},

      backgroundColor: {},
      backgroundImage: {},
      backgroundPositionX: {},
      backgroundPositionY: {},
      backgroundSize: {},
      backgroundRepeat: {},

      color: {},
      borderRadius: {},

      borderColor: {},
      borderStyle: {},
      borderWidth: {},

      boxShadow: {},
    },
  }),
  draggableMixin,
  componentNameValidationMixin
)(RawContainer);
