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('loader-radial');

class RawLoaderRadial extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
  constructor() {
    super();

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

    injectStyle(
      `
    @keyframes spin {
				0% { transform: rotate(0deg); }
				100% { transform: rotate(360deg); }
			}
			:host {
				position: relative;
				display: inline-flex;
			}
			:host > div {
				animation-name: spin;
			}
        `,
      this
    );
  }
}

export const LoaderRadialClass = compose(
  createStyleMixin({
    mappings: {
      hostDisplay: { property: 'display' },
      spinnerSize: [{ property: 'width' }, { property: 'height' }],
      spinnerBorderWidth: { property: 'border-width' },
      spinnerBorderStyle: { property: 'border-style' },
      spinnerBorderRadius: { property: 'border-radius' },
      spinnerQuadrant1Color: { property: 'border-top-color' },
      spinnerQuadrant2Color: { property: 'border-bottom-color' },
      spinnerQuadrant3Color: { property: 'border-right-color' },
      spinnerQuadrant4Color: { property: 'border-left-color' },
      animationDuration: {},
      animationTimingFunction: {},
      animationIterationCount: {},
    },
  }),
  draggableMixin,
  componentNameValidationMixin
)(RawLoaderRadial);
