import { describe, it, expect } from 'vitest';
import { mapNodeToCSS } from '../property-mapper.js';
describe('pencil/property-mapper', () => {
    it('maps fill to background-color for frame nodes', () => {
        const node = { type: 'frame', fill: '#FF5733' };
        const css = mapNodeToCSS(node);
        expect(css).toContain('background: #FF5733');
    });
    it('maps fill to color for text nodes', () => {
        const node = { type: 'text', fill: '#333333' };
        const css = mapNodeToCSS(node);
        expect(css).toContain('color: #333333');
    });
    it('maps font properties', () => {
        const node = {
            type: 'text',
            fontSize: 24,
            fontWeight: '700',
            fontFamily: 'Inter',
            lineHeight: 1.5,
            letterSpacing: 0.5,
        };
        const css = mapNodeToCSS(node);
        expect(css).toContain('font-size: 24px');
        expect(css).toContain('font-weight: 700');
        expect(css).toContain('font-family: Inter');
        expect(css).toContain('line-height: 1.5');
        expect(css).toContain('letter-spacing: 0.5px');
    });
    it('maps padding array [T,R,B,L]', () => {
        const node = { type: 'frame', padding: [10, 20, 10, 20] };
        const css = mapNodeToCSS(node);
        expect(css).toContain('padding: 10px 20px 10px 20px');
    });
    it('maps padding array [V,H]', () => {
        const node = { type: 'frame', padding: [10, 20] };
        const css = mapNodeToCSS(node);
        expect(css).toContain('padding: 10px 20px');
    });
    it('maps single padding value', () => {
        const node = { type: 'frame', padding: 16 };
        const css = mapNodeToCSS(node);
        expect(css).toContain('padding: 16px');
    });
    it('maps layout vertical to flex-direction column', () => {
        const node = { type: 'frame', layout: 'vertical' };
        const css = mapNodeToCSS(node);
        expect(css).toContain('display: flex');
        expect(css).toContain('flex-direction: column');
    });
    it('maps layout horizontal to flex-direction row', () => {
        const node = { type: 'frame', layout: 'horizontal' };
        const css = mapNodeToCSS(node);
        expect(css).toContain('display: flex');
        expect(css).toContain('flex-direction: row');
    });
    it('maps gap', () => {
        const node = { type: 'frame', gap: 12 };
        const css = mapNodeToCSS(node);
        expect(css).toContain('gap: 12px');
    });
    it('maps width fill_container to width 100%', () => {
        const node = { type: 'frame', width: 'fill_container' };
        const css = mapNodeToCSS(node);
        expect(css).toContain('width: 100%');
    });
    it('maps width fit_content', () => {
        const node = { type: 'frame', width: 'fit_content' };
        const css = mapNodeToCSS(node);
        expect(css).toContain('width: fit-content');
    });
    it('maps numeric width to px', () => {
        const node = { type: 'frame', width: 300 };
        const css = mapNodeToCSS(node);
        expect(css).toContain('width: 300px');
    });
    it('maps cornerRadius to border-radius', () => {
        const node = { type: 'frame', cornerRadius: 8 };
        const css = mapNodeToCSS(node);
        expect(css).toContain('border-radius: 8px');
    });
    it('maps cornerRadius array', () => {
        const node = { type: 'frame', cornerRadius: [8, 8, 0, 0] };
        const css = mapNodeToCSS(node);
        expect(css).toContain('border-radius: 8px 8px 0px 0px');
    });
    it('maps clip true to overflow hidden', () => {
        const node = { type: 'frame', clip: true };
        const css = mapNodeToCSS(node);
        expect(css).toContain('overflow: hidden');
    });
    it('maps opacity', () => {
        const node = { type: 'frame', opacity: 0.5 };
        const css = mapNodeToCSS(node);
        expect(css).toContain('opacity: 0.5');
    });
    it('maps justifyContent and alignItems', () => {
        const node = {
            type: 'frame',
            justifyContent: 'center',
            alignItems: 'flex-start',
        };
        const css = mapNodeToCSS(node);
        expect(css).toContain('justify-content: center');
        expect(css).toContain('align-items: flex-start');
    });
    it('maps stroke to border', () => {
        const node = {
            type: 'frame',
            stroke: { thickness: 2, fill: '#000000' },
        };
        const css = mapNodeToCSS(node);
        expect(css).toContain('border: 2px solid #000000');
    });
    it('returns empty string for empty node', () => {
        const node = { type: 'frame' };
        const css = mapNodeToCSS(node);
        expect(css).toBe('');
    });
});
