import { test } from '@playwright/test';
import { ProjectType, ProjectTypes } from 'nocodb-sdk';
import { DashboardPage } from '../../pages/Dashboard';
import setup, { NcContext } from '../../setup';

test.describe('Create docs project and verify docs UI', () => {
  let dashboard: DashboardPage;
  let context: NcContext;
  let project: ProjectType;

  test.beforeEach(async ({ page }) => {
    context = await setup({ page, projectType: ProjectTypes.DOCUMENTATION });
    project = context.project;
    dashboard = new DashboardPage(page, context.project);
  });

  test('Update title page of root and child page and verify', async ({ page }) => {
    const openedPage = dashboard.docs.openedPage;
    // Page update of root page
    await dashboard.sidebar.docsSidebar.createPage({ projectTitle: project.title as any, title: 'root-page' });

    await dashboard.sidebar.docsSidebar.verifyPageInSidebar({
      title: 'root-page',
      projectTitle: project.title as any,
    });

    await page.reload();

    await dashboard.sidebar.docsSidebar.verifyPageInSidebar({
      title: 'root-page',
      projectTitle: project.title as any,
    });

    await openedPage.verifyTitle({ title: 'root-page' });
    await openedPage.verifyBreadcrumb({ pages: [{ title: 'root-page' }] });

    // Page update of child page
    await dashboard.sidebar.docsSidebar.createChildPage({
      parentTitle: 'root-page',
      projectTitle: project.title as any,
      title: 'child-page',
    });

    await dashboard.sidebar.docsSidebar.verifyPageInSidebar({
      title: 'child-page',
      projectTitle: project.title as any,
      level: 1,
    });

    await page.reload();

    await page.waitForTimeout(1500);

    await openedPage.verifyTitle({ title: 'child-page' });
    await openedPage.verifyBreadcrumb({ pages: [{ title: 'root-page' }, { title: 'child-page' }] });

    await dashboard.sidebar.docsSidebar.verifyPageInSidebar({
      title: 'child-page',
      projectTitle: project.title as any,
      level: 1,
    });

    // Verify that page title doesnt break when a new page is created, an existing page is opened and title is changed and new page is opened again and the title is updated there as well
    await dashboard.sidebar.docsSidebar.createChildPage({
      parentTitle: 'root-page',
      projectTitle: project.title as any,
    });

    await dashboard.sidebar.docsSidebar.openPage({
      title: 'child-page',
      projectTitle: project.title as any,
    });
    await dashboard.docs.openedPage.fillTitle({ title: 'child-page-1' });
    await dashboard.sidebar.docsSidebar.verifyPageInSidebar({
      title: 'child-page-1',
      projectTitle: project.title as any,
      level: 1,
    });
    await openedPage.verifyTitle({ title: 'child-page-1' });
    await openedPage.verifyBreadcrumb({ pages: [{ title: 'root-page' }, { title: 'child-page-1' }] });

    await dashboard.sidebar.docsSidebar.openPage({ title: 'Page', projectTitle: project.title as any });
    await dashboard.docs.openedPage.fillTitle({ title: 'child-page-2' });
    await openedPage.verifyTitle({ title: 'child-page-2' });
    await openedPage.verifyBreadcrumb({ pages: [{ title: 'root-page' }, { title: 'child-page-2' }] });

    await dashboard.sidebar.docsSidebar.verifyPageInSidebar({
      title: 'child-page-2',
      projectTitle: project.title as any,
      level: 1,
    });
  });

  test('Update emoji and content of newly created root page and child page', async ({ page }) => {
    const openedPage = dashboard.docs.openedPage;
    // root page
    await dashboard.sidebar.docsSidebar.createPage({ projectTitle: project.title as any, title: 'root-page' });
    await dashboard.docs.openedPage.verifyOpenedPageVisible();

    await dashboard.sidebar.docsSidebar.selectEmoji({
      emoji: 'hot-dog',
      projectTitle: project.title as any,
      title: 'root-page',
    });
    await dashboard.sidebar.docsSidebar.verifyEmoji({
      emoji: 'hot-dog',
      projectTitle: project.title as any,
      title: 'root-page',
    });
    await dashboard.docs.openedPage.verifyTitleEmoji({ emoji: 'hot-dog' });
    await openedPage.verifyBreadcrumb({ pages: [{ title: 'root-page', emoji: 'hot-dog' }] });

    await dashboard.docs.openedPage.selectEmoji({ emoji: 'rolling-on-the-floor-laughing' });
    await dashboard.docs.openedPage.verifyTitleEmoji({ emoji: 'rolling-on-the-floor-laughing' });
    await dashboard.sidebar.docsSidebar.verifyEmoji({
      emoji: 'rolling-on-the-floor-laughing',
      projectTitle: project.title as any,
      title: 'root-page',
    });
    await openedPage.verifyBreadcrumb({ pages: [{ title: 'root-page', emoji: 'rolling-on-the-floor-laughing' }] });

    await dashboard.docs.openedPage.fillTitle({ title: 'root-page-1' });
    await dashboard.docs.openedPage.tiptap.fillContent({ content: 'root-page-1-content' });
    await dashboard.docs.openedPage.tiptap.verifyContent({ content: 'root-page-1-content' });

    await openedPage.verifyBreadcrumb({ pages: [{ title: 'root-page-1', emoji: 'rolling-on-the-floor-laughing' }] });
    await dashboard.sidebar.docsSidebar.verifyPageInSidebar({
      title: 'root-page-1',
      projectTitle: project.title as any,
    });

    // child page
    await dashboard.sidebar.docsSidebar.createChildPage({
      parentTitle: 'root-page-1',
      projectTitle: project.title as any,
      title: 'child-page',
    });

    await dashboard.docs.openedPage.fillTitle({ title: 'child-page-1' });
    await dashboard.docs.openedPage.tiptap.fillContent({ content: 'child-page-1-content' });
    await dashboard.docs.openedPage.tiptap.verifyContent({ content: 'child-page-1-content' });
    await openedPage.verifyBreadcrumb({
      pages: [{ title: 'root-page-1', emoji: 'rolling-on-the-floor-laughing' }, { title: 'child-page-1' }],
    });

    await dashboard.sidebar.docsSidebar.selectEmoji({
      emoji: 'hot-dog',
      projectTitle: project.title as any,
      title: 'child-page-1',
    });
    await dashboard.sidebar.docsSidebar.verifyEmoji({
      emoji: 'hot-dog',
      projectTitle: project.title as any,
      title: 'child-page-1',
    });
    await dashboard.docs.openedPage.verifyTitleEmoji({ emoji: 'hot-dog' });
    await openedPage.verifyBreadcrumb({
      pages: [
        { title: 'root-page-1', emoji: 'rolling-on-the-floor-laughing' },
        { title: 'child-page-1', emoji: 'hot-dog' },
      ],
    });

    await dashboard.docs.openedPage.selectEmoji({ emoji: 'rolling-on-the-floor-laughing' });
    await dashboard.docs.openedPage.verifyTitleEmoji({ emoji: 'rolling-on-the-floor-laughing' });
    await dashboard.sidebar.docsSidebar.verifyEmoji({
      emoji: 'rolling-on-the-floor-laughing',
      projectTitle: project.title as any,
      title: 'child-page-1',
    });
    await openedPage.verifyBreadcrumb({
      pages: [
        { title: 'root-page-1', emoji: 'rolling-on-the-floor-laughing' },
        { title: 'child-page-1', emoji: 'rolling-on-the-floor-laughing' },
      ],
    });

    await dashboard.sidebar.docsSidebar.verifyPageInSidebar({
      title: 'child-page-1',
      projectTitle: project.title as any,
      level: 1,
      emoji: 'rolling-on-the-floor-laughing',
    });

    await dashboard.sidebar.docsSidebar.openPage({
      projectTitle: project.title as any,
      title: 'root-page-1',
    });
    await dashboard.docs.openedPage.tiptap.verifyContent({ content: 'root-page-1-content' });
    await dashboard.docs.openedPage.tiptap.clearContent();
    await dashboard.docs.openedPage.tiptap.fillContent({ content: 'new-root-page-1-content' });
    await dashboard.docs.openedPage.tiptap.verifyContent({ content: 'new-root-page-1-content' });

    await dashboard.sidebar.docsSidebar.openPage({
      projectTitle: project.title as any,
      title: 'child-page-1',
    });
    // TODO: Child page content is not updated in this case, only on playwright
    // await dashboard.docs.openedPage.tiptap.verifyContent({ content: 'child-page-1-content' });
    await dashboard.docs.openedPage.tiptap.clearContent();
    await dashboard.docs.openedPage.tiptap.fillContent({ content: 'new-child-page-1-content' });
    await dashboard.docs.openedPage.tiptap.verifyContent({ content: 'new-child-page-1-content' });

    await page.reload();

    await openedPage.waitForRender();
    await dashboard.docs.openedPage.tiptap.verifyContent({ content: 'new-child-page-1-content' });
    await dashboard.sidebar.docsSidebar.verifyPageInSidebar({
      title: 'child-page-1',
      projectTitle: project.title as any,
      level: 1,
      emoji: 'rolling-on-the-floor-laughing',
    });
    await openedPage.verifyBreadcrumb({
      pages: [
        { title: 'root-page-1', emoji: 'rolling-on-the-floor-laughing' },
        { title: 'child-page-1', emoji: 'rolling-on-the-floor-laughing' },
      ],
    });
    await openedPage.verifyTitle({ title: 'child-page-1' });
    await openedPage.verifyTitleEmoji({ emoji: 'rolling-on-the-floor-laughing' });
  });
});