import { test } from 'node:test';
import assert from 'node:assert/strict';
import {
  withChart, chartBox, at, armTool, drawingIds, assertNoPageErrors,
} from './helpers.mjs';

test('editing a drawing name with Backspace or Delete cannot delete the drawing',
  { timeout: 180000 }, async () => {
    await withChart(async page => {
      const label = `e2e rename ${Date.now()}`;
      const box = await chartBox(page);
      await armTool(page, 'Trendline');
      await page.fill('input[aria-label="Trendline label"]', label);
      const first = at(box, 0.42, 0.55);
      const second = at(box, 0.62, 0.40);
      await page.mouse.click(first.x, first.y);
      await page.waitForTimeout(300);
      await page.mouse.click(second.x, second.y);

      await page.waitForFunction(name =>
        [...document.querySelectorAll('input[aria-label="Drawing name"]')]
          .some(input => input.value === name), label);
      await page.waitForFunction(name =>
        window.__chart.levels.some(level => level.label === name && !level.id.startsWith('tmp_')),
      label);
      const created = await page.evaluate(name => {
        const line = window.__chart.levels.find(
          level => level.label === name && !level.id.startsWith('tmp_'),
        );
        return line?.id || null;
      }, label);
      assert.ok(created, 'the trendline was not created');
      assert.ok((await drawingIds(page)).includes(created), 'the trendline was not persisted');

      await page.fill('input[aria-label="Filter drawings by text"]', label);
      const input = page.locator('input[aria-label="Drawing name"]');
      assert.equal(await input.count(), 1, 'the unique drawing filter did not isolate the test line');
      const row = page.locator('.trendline-row');
      const rowBox = await row.boundingBox();
      assert.ok(rowBox.height <= 48, `drawing row is still ${rowBox.height}px tall`);
      assert.equal(await row.locator('.drawing-state .fa-bell').count(), 1,
        'the armed state is not represented by a bell');
      await row.locator('.color-picker>summary').click();
      assert.equal(await row.locator('.color-popover>button').count(), 16,
        'the preset palette does not contain 16 colors');
      assert.equal(await row.locator('.custom-color input[type="color"]').count(), 1,
        'the custom color choice is missing');
      await row.locator('button[aria-label="Use color #bd4545"]').click();
      await page.waitForFunction(([id, color]) =>
        window.__chart.levels.find(level => level.id === id)?.color === color,
      [created, '#bd4545']);
      await input.focus();
      await input.press('End');
      await input.press('Backspace');
      assert.equal(await input.inputValue(), label.slice(0, -1), 'Backspace did not edit the name');
      await page.waitForTimeout(500);
      assert.ok((await drawingIds(page)).includes(created), 'Backspace deleted the drawing');

      const beforeDelete = await input.inputValue();
      await input.press('Home');
      await input.press('Delete');
      assert.equal(await input.inputValue(), beforeDelete.slice(1), 'Delete did not edit the name');
      await page.waitForTimeout(500);
      assert.ok((await drawingIds(page)).includes(created), 'Delete deleted the drawing');
      assertNoPageErrors(page, assert);
    });
  });