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

export const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
  let style;
  const getContent = () => style;

  class RawCssVarImageClass extends createBaseClass({
    componentName,
    baseSelector: ':host > div',
  }) {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' }).innerHTML = `
			<div></div>
			`;

      injectStyle(
        `
				:host {
					display: inline-flex;
				}
				:host([draggable="true"]) > div {
					pointer-events: none
				}
				:host > div {
					display: inline-block;
					max-width: 100%;
					max-height: 100%;
					object-fit: contain;
					margin: auto;
					${getContent()}
				}
        `,
        this
      );
    }
  }

  const CssVarImageClass = compose(
    createStyleMixin({
      mappings: {
        height: { selector: () => ':host > div' },
        width: { selector: () => ':host > div' },
        [varName]: { property: 'content' },
        [fallbackVarName]: { property: 'content' },
      },
    }),
    draggableMixin,
    componentNameValidationMixin
  )(RawCssVarImageClass);

  style = `content: var(${CssVarImageClass.cssVarList[varName]}, var(${CssVarImageClass.cssVarList[fallbackVarName]}));`;

  return CssVarImageClass;
};
