import { readFileSync } from 'node:fs';

import { describe, expect, it } from 'vitest';

const stylesheet = readFileSync(
  new URL('../../index.css', import.meta.url),
  'utf8',
);

function readCssRule(selector: string) {
  const ruleStart = stylesheet.indexOf(selector);
  expect(ruleStart).toBeGreaterThanOrEqual(0);
  const bodyStart = stylesheet.indexOf('{', ruleStart) + 1;
  const bodyEnd = stylesheet.indexOf('}', bodyStart);
  expect(bodyEnd).toBeGreaterThan(bodyStart);
  return stylesheet.slice(bodyStart, bodyEnd);
}

describe('image canvas textarea chrome', () => {
  it('keeps complete chrome in the canonical generation prompt styles', () => {
    const generationRule = readCssRule(
      '.image-canvas-editor__generation-prompt',
    );
    expect(generationRule).toContain('border: 1px solid');
    expect(generationRule).toContain('border-radius: 1.05rem;');
    expect(generationRule).toContain('background: #f8fafc;');
    expect(generationRule).toContain('padding: 0.52rem 0.82rem;');

    const generationFocusRule = readCssRule(
      '.image-canvas-editor__generation-prompt:focus,',
    );
    expect(generationFocusRule).toContain(
      'border-color: var(--image-canvas-brand-border-strong);',
    );
    expect(generationFocusRule).toContain(
      'box-shadow: 0 0 0 3px var(--image-canvas-brand-focus-ring);',
    );

    const modalRule = readCssRule('.image-canvas-editor__generate-prompt');
    expect(modalRule).toContain('border: 1px solid #d9dee8;');
    expect(modalRule).toContain('border-radius: 0.45rem;');
    expect(modalRule).toContain('background: #f8fafc;');
    expect(modalRule).toContain('padding: 0.7rem;');

    const modalFocusRule = readCssRule(
      '.image-canvas-editor__generate-prompt:focus',
    );
    expect(modalFocusRule).toContain(
      'border-color: var(--image-canvas-brand-border-strong);',
    );
    expect(modalFocusRule).toContain(
      'box-shadow: 0 0 0 3px var(--image-canvas-brand-focus-ring);',
    );
  });
});