import { defineComponent, h, Fragment, onMounted } from 'vue';

import type { CSSVariables } from './types';

export const ColorTheme = defineComponent({
  name: 'ColorTheme',
  props: {
    variables: {
      type: Object as () => CSSVariables,
    },
  },
  setup(props, { slots }) {
     function applyColors() {
      if (!props.variables?.colors) return;

      document.documentElement.style.setProperty(
        '--checkout-cta-default',
        props.variables.colors.CheckoutCTADefault,
      );
      document.documentElement.style.setProperty(
        '--checkout-cta-hover',
        props.variables.colors.CheckoutCTAHover,
      );
      document.documentElement.style.setProperty(
        '--checkout-cta-text',
        props.variables.colors.CheckoutCTAText,
      );
      document.documentElement.style.setProperty(
        '--primary-cta-text',
        props.variables.colors.PrimaryCTAText,
      );
      document.documentElement.style.setProperty(
        '--primary-interactive-default',
        props.variables.colors.PrimaryInteractiveDefault,
      );
      document.documentElement.style.setProperty(
        '--primary-interactive-hover',
        props.variables.colors.PrimaryInteractiveHover,
      );
      document.documentElement.style.setProperty(
        '--primary-interactive-hover-low',
        props.variables.colors.PrimaryInteractiveHoverLow,
      );
      document.documentElement.style.setProperty(
        '--primary-surface-disabled',
        props.variables.colors.PrimarySurfaceDisabled,
      );
      document.documentElement.style.setProperty(
        '--primary-surface-low',
        props.variables.colors.PrimarySurfaceLow,
      );
      document.documentElement.style.setProperty(
        '--primary-text-decorative',
        props.variables.colors.PrimaryTextDecorative,
      );
      document.documentElement.style.setProperty(
        '--neutral-background',
        props.variables.colors.NeutralBackground,
      );
      document.documentElement.style.setProperty(
        '--neutral-text-high',
        props.variables.colors.NeutralTextHigh,
      );
      document.documentElement.style.setProperty(
        '--neutral-text-medium',
        props.variables.colors.NeutralTextMedium,
      );
      document.documentElement.style.setProperty(
        '--neutral-text-low',
        props.variables.colors.NeutralTextLow,
      );
      document.documentElement.style.setProperty(
        '--neutral-text-disabled',
        props.variables.colors.NeutralTextDisabled,
      );
      document.documentElement.style.setProperty(
        '--neutral-surface',
        props.variables.colors.NeutralSurface,
      );
      document.documentElement.style.setProperty(
        '--neutral-surface-low',
        props.variables.colors.NeutralSurfaceLow,
      );
      document.documentElement.style.setProperty(
        '--neutral-surface-hover',
        props.variables.colors.NeutralSurfaceHover,
      );
      document.documentElement.style.setProperty(
        '--neutral-surface-disabled',
        props.variables.colors.NeutralSurfaceDisabled,
      );
      document.documentElement.style.setProperty(
        '--neutral-border',
        props.variables.colors.NeutralBorder,
      );
      document.documentElement.style.setProperty(
        '--success-surface',
        props.variables.colors.SuccessSurface,
      );
      document.documentElement.style.setProperty(
        '--success-border',
        props.variables.colors.SuccessBorder,
      );
      document.documentElement.style.setProperty(
        '--success-surface-low',
        props.variables.colors.SuccessSurfaceLow,
      );
      document.documentElement.style.setProperty(
        '--warning-surface',
        props.variables.colors.WarningSurface,
      );
      document.documentElement.style.setProperty(
        '--warning-border',
        props.variables.colors.WarningBorder,
      );
      document.documentElement.style.setProperty(
        '--warning-surface-low',
        props.variables.colors.WarningSurfaceLow,
      );
      document.documentElement.style.setProperty(
        '--error-surface',
        props.variables.colors.ErrorSurface,
      );
      document.documentElement.style.setProperty(
        '--error-border',
        props.variables.colors.ErrorBorder,
      );
      document.documentElement.style.setProperty(
        '--error-surface-low',
        props.variables.colors.ErrorSurfaceLow,
      );
      document.documentElement.style.setProperty(
        '--info-border',
        props.variables.colors.InfoBorder,
      );
      document.documentElement.style.setProperty(
        '--info-surface',
        props.variables.colors.InfoSurface,
      );
      document.documentElement.style.setProperty(
        '--info-surface-low',
        props.variables.colors.InfoSurfaceLow,
      );
      document.documentElement.style.setProperty(
        '--link-interactive-default',
        props.variables.colors.LinkInteractiveDefault,
      );
      document.documentElement.style.setProperty(
        '--link-interactive-hover',
        props.variables.colors.LinkInteractiveHover,
      );
    }

    function applyFont() {
      if (!props?.variables?.font?.link) return;

      const fontLink = document.createElement('link');
      fontLink.rel = 'stylesheet';
      fontLink.setAttribute('uappi-custom-font', '');
      fontLink.href = props.variables.font.link;
      document.head.appendChild(fontLink);

      document.documentElement.style.setProperty(
        '--font-family',
        props.variables.font.family,
      );
    }

    onMounted(() => {
      applyColors();
      applyFont();
    });

    return () => h(Fragment, null, slots.default?.());
  },
});