import { applyThemeStyleDeclaration, toCssStylePropertyName } from './theme-style-application.logic';

describe('theme style application', () => {
  it('applies camelCase theme properties as real CSS declarations', () => {
    const host = createHost();

    expect(applyThemeStyleDeclaration(host, 'backgroundImage', 'url("/theme.png")')).toBe('background-image');
    expect(applyThemeStyleDeclaration(host, 'borderRadius', '12px')).toBe('border-radius');
    expect(applyThemeStyleDeclaration(host, 'boxShadow', '0 4px 20px rgba(0, 0, 0, 0.25)')).toBe('box-shadow');

    expect(host.style.backgroundImage).toContain('/theme.png');
    expect(host.style.borderRadius).toBe('12px');
    expect(host.style.boxShadow).toBe('0 4px 20px rgba(0, 0, 0, 0.25)');
  });

  it('keeps CSS custom properties intact', () => {
    const host = createHost();

    expect(toCssStylePropertyName('--theme-effect-glass-blur')).toBe('--theme-effect-glass-blur');
    applyThemeStyleDeclaration(host, '--theme-effect-glass-blur', 'blur(18px)');

    expect(host.style.getPropertyValue('--theme-effect-glass-blur')).toBe('blur(18px)');
  });
});

function createHost(): HTMLElement {
  const values = new Map<string, string>();
  const style = {
    backgroundImage: '',
    borderRadius: '',
    boxShadow: '',
    setProperty(propertyName: string, value: string) {
      values.set(propertyName, value);

      if (propertyName === 'background-image') {
        this.backgroundImage = value;
      }

      if (propertyName === 'border-radius') {
        this.borderRadius = value;
      }

      if (propertyName === 'box-shadow') {
        this.boxShadow = value;
      }
    },
    getPropertyValue(propertyName: string) {
      return values.get(propertyName) ?? '';
    }
  };

  return { style } as unknown as HTMLElement;
}
