import { test, expect, Page } from '@playwright/test'
import { nanoid } from 'nanoid'

test.describe.configure({ mode: 'serial' })
const cabinet = nanoid()
const drawer = nanoid()
const folder = nanoid()
const subfolder = nanoid()
const newName = nanoid()

let page: Page

test.beforeAll(async ({ browser }) => {
  page = await browser.newPage()
})

test.afterAll(async () => {
  await page.close()
})

test('Login', async () => {
  await page.goto('http://localhost:3010/admin')
  await expect(page).toHaveTitle('Sign in to EDM')
  await page.fill("input[name='username']", 'oom')
  await page.fill("input[name='password']", 'oom')
  await page.click("input[name='login']")

  await page.waitForTimeout(2000)
})

test('Create Cabinet', async () => {
  await page.waitForTimeout(2000)
  await page.click("//div[@id='triggerFolderCreateFileItem']")
  
  await page.fill(
    "//input[@placeholder='กรอกชื่อ']",
    cabinet,
  )
  await page.click("//button[@type='submit']")

  await page.waitForTimeout(300)

  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(cabinet)

  await page.waitForTimeout(300)
})

test('Go to Cabinet', async () => {
  await page.click(`(//div[text()='${cabinet}'])[2]`)
})

test('Create drawer', async () => {
  await page.click("//div[@id='triggerFolderCreateFileItem']")
  await page.fill(
    "//input[@placeholder='กรอกชื่อ']",
    drawer,
  )
  await page.click("//button[@type='submit']")

  await page.waitForTimeout(300)

  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(drawer)

  await page.waitForTimeout(300)
})

test('Go into drawer', async () => {
  await page.click(`(//div[text()='${drawer}'])[2]`)
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).not.toHaveText(drawer)
})

test('Create Folder', async () => {
  await page.click("//div[@id='triggerFolderCreateFileItem']")
  await page.fill(
    "//input[@placeholder='กรอกชื่อ']",
    folder,
  )
  await page.click("//button[@type='submit']")
  await page.waitForTimeout(300)
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(folder)
})

test('Go into Folder', async () => {
  await page.click(`(//div[text()='${folder}'])[2]`)
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).not.toHaveText(folder)
})

test('Create Subfolder', async () => {
  await page.click("//div[@id='triggerFolderCreateFileItem']")
  await page.fill(
    "//input[@placeholder='กรอกชื่อ']",
    subfolder,
  )
  await page.click("(//button[@type='submit'])[3]")
  await page.waitForTimeout(300)
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(subfolder)
})

test('Go into Subfolder', async () => {
  
  await page.click(`//div[text()='${subfolder}']`)
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).not.toHaveText(folder)
})

test('Back to Folder', async () => {
  await page.click("//i[text()='arrow_back']")
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(subfolder)
})

test('Edit Subfolder', async () => {
  await page.click(
    `//button[@data-testid='action${cabinet}/${drawer}/${folder}/${subfolder}/']`,
  )
  await page.click("(//div[@role='listitem'])[1]")
  await page.fill("(//input[@placeholder='กรอกชื่อ'])[1]", newName)
  await page.click("(//button[@id='FoldeSubmit'])[1]")
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(newName)
})

test('Delete Subfolder Cancel', async () => {
  await page.click(
    `//button[@data-testid='action${cabinet}/${drawer}/${folder}/${newName}/']`,
  )
  await page.click("(//div[@role='listitem'])[2]")
  await page.click("(//div[@class='q-space']/following-sibling::button)[2]")
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(newName)
})

test('Delete Subfolder Confirm', async () => {
  await page.click(
    `//button[@data-testid='action${cabinet}/${drawer}/${folder}/${newName}/']`,
  )
  await page.click("(//div[@role='listitem'])[2]")
  await page.click(
    "(//div[contains(@class,'q-card__actions justify-end')]//button)[2]",
  )
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).not.toHaveText(newName)
})

test('Back to drawer', async () => {
  await page.click("//i[text()='arrow_back']")
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(folder)
})

test('Edit Folder', async () => {
  await page.click(
    `//button[@data-testid='action${cabinet}/${drawer}/${folder}/']`,
  )
  await page.click("(//div[@role='listitem'])[1]")
  await page.fill("(//input[@placeholder='กรอกชื่อ'])[1]", newName)
  await page.click("(//button[@id='FoldeSubmit'])[1]")
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(newName)
})

test('Delete Folder Cancel', async () => {
  await page.click(
    `//button[@data-testid='action${cabinet}/${drawer}/${newName}/']`,
  )
  await page.click("(//div[@role='listitem'])[2]")
  await page.click("(//div[@class='q-space']/following-sibling::button)[2]")
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(newName)
})

test('Delete Folder Confirm', async () => {
  await page.click(
    `//button[@data-testid='action${cabinet}/${drawer}/${newName}/']`,
  )
  await page.click("(//div[@role='listitem'])[2]")
  await page.click(
    "(//div[contains(@class,'q-card__actions justify-end')]//button)[2]",
  )
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).not.toHaveText(newName)
})

test('Back to Cabinet', async () => {
  await page.click("//i[text()='arrow_back']")
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(drawer)
})

test('Edit drawer', async () => {
  await page.click(`//button[@data-testid='action${cabinet}/${drawer}/']`)
  await page.click("(//div[@role='listitem'])[1]")
  await page.fill("(//input[@placeholder='กรอกชื่อ'])[1]", newName)
  await page.click("(//button[@id='FoldeSubmit'])[1]")
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(newName)
})

test('Delete Drawer Cancel', async () => {
  await page.click(`//button[@data-testid='action${cabinet}/${newName}/']`)
  await page.click("(//div[@role='listitem'])[2]")
  await page.click("(//div[@class='q-space']/following-sibling::button)[2]")
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(newName)
})

test('Delete Drawer Confirm', async () => {
  await page.click(`//button[@data-testid='action${cabinet}/${newName}/']`)
  await page.click("(//div[@role='listitem'])[2]")
  await page.click(
    "(//div[contains(@class,'q-card__actions justify-end')]//button)[2]",
  )
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).not.toHaveText(newName)
})

test('Back to Home', async () => {
  await page.click("//i[text()='arrow_back']")
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(cabinet)
})

test('Edit Cabinet', async () => {
  await page.click(`//button[@data-testid='action${cabinet}/']`)
  await page.click("(//div[@role='listitem'])[1]")
  await page.fill("(//input[@placeholder='กรอกชื่อ'])[1]", newName)
  await page.click("(//button[@id='FoldeSubmit'])[1]")
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(newName)
})

test('Delete Cabinet Cancel', async () => {
  await page.click(`//button[@data-testid='action${newName}/']`)
  await page.click("(//div[@role='listitem'])[2]")
  await page.click("(//div[@class='q-space']/following-sibling::button)[2]")
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).toContainText(newName)
})

test('Delete Cabinet Confirm', async () => {
  await page.click(`//button[@data-testid='action${newName}/']`)
  await page.click("(//div[@role='listitem'])[2]")
  await page.click(
    "(//div[contains(@class,'q-card__actions justify-end')]//button)[2]",
  )
  await expect(
    page.locator("(//div[contains(@class,'bg-white rounded-borders')])[2]"),
  ).not.toHaveText(newName)
})