import { injectStyle } from '@descope-ui/common/components-helpers';
import { IconClass } from '@descope-ui/descope-icon/class';
import { createBaseClass } from '../../baseClasses/createBaseClass';
import { compose } from '../../helpers';
import { getComponentName } from '../../helpers/componentHelpers';
import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';
import { LogoClass } from '../descope-logo/LogoClass';
import arrowsImg from './arrows.svg';

export const componentName = getComponentName('third-party-app-logo');
class RawThirdPartyAppLogoClass extends createBaseClass({
  componentName,
  baseSelector: '.wrapper',
}) {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }).innerHTML = `
			<div class="wrapper">
        <div class="third-party-app-logo-wrapper">
          <div class="third-party-app-logo"></div>
        </div>
        <div class="arrows">
          <descope-icon src="${arrowsImg}"></descope-icon>
        </div>
        <div class="company-logo-wrapper">
            <descope-logo st-height="100%"></descope-logo>
        </div>
      </div>
			`;

    injectStyle(
      `
        :host {
					display: inline-flex;
				}
				:host([draggable="true"]) > div {
					pointer-events: none
				}

        .wrapper {
          display: flex;
          justify-content: center;
          align-items: center;
          min-width: max-content;
        }

				.third-party-app-logo {
          flex-shrink: 0;
					display: inline-block;
					max-width: 100%;
					max-height: 100%;
					object-fit: contain;
				}

        .company-logo-wrapper, .third-party-app-logo-wrapper {
          flex-shrink: 0;
          display: inline-flex;
        }

        .company-logo-wrapper {
          justify-content: flex-end;
        }

        .third-party-app-logo-wrapper {
          justify-content: flex-start;
        }

        .arrows {
          flex-shrink: 0;
          display: flex;
        }
          `,
      this
    );
  }
}

const companyLogoWrapper = '>.company-logo-wrapper';
const thirdPartyAppLogoWrapper = '>.third-party-app-logo-wrapper';

export const ThirdPartyAppLogoClass = compose(
  createStyleMixin({
    mappings: {
      logoMaxHeight: [
        { selector: companyLogoWrapper, property: 'height' },
        { selector: thirdPartyAppLogoWrapper, property: 'height' },
      ],
      logoMaxWidth: [
        { selector: companyLogoWrapper, property: 'max-width' },
        { selector: thirdPartyAppLogoWrapper, property: 'max-width' },
      ],
      thirdPartyAppLogo: {
        selector: () => '.third-party-app-logo',
        property: 'content',
        fallback: {},
      },
      companyLogoFallback: {
        selector: LogoClass.componentName,
        property: LogoClass.cssVarList.fallbackUrl,
      },
      gap: {},
      arrowsColor: { selector: IconClass.componentName, property: IconClass.cssVarList.fill },
    },
  }),
  draggableMixin,
  componentNameValidationMixin
)(RawThirdPartyAppLogoClass);
