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

export const componentName = getComponentName('loader-linear');

class RawLoaderLinear extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
  static get componentName() {
    return componentName;
  }

  constructor() {
    super();

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

    injectStyle(
      `
    @keyframes tilt {
				0% { transform: translateX(0); }
				50% { transform: translateX(400%); }
			}
			:host {
				position: relative;
				display: flex;
			}
			div::after {
				content: '';
				animation-name: tilt;
				position: absolute;
				left: 0;
			}
			:host > div {
				width: 100%;
			}
        `,
      this
    );
  }
}

const selectors = {
  after: { selector: '::after' },
  host: { selector: () => ':host' },
};

const { after, host } = selectors;

export const LoaderLinearClass = compose(
  createStyleMixin({
    mappings: {
      hostDisplay: {},
      hostWidth: { ...host, property: 'width' },
      barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
      barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
      verticalPadding: [
        { ...host, property: 'padding-top' },
        { ...host, property: 'padding-bottom' },
      ],
      barBackgroundColor: { property: 'background-color' },
      barColor: { ...after, property: 'background-color' },
      barWidth: { ...after, property: 'width' },
      animationDuration: [{}, after],
      animationTimingFunction: [{}, after],
      animationIterationCount: [{}, after],
    },
  }),
  draggableMixin,
  componentNameValidationMixin
)(RawLoaderLinear);
