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('https://edm.frappet.synology.me/admin')
  await expect(page).toHaveTitle('Sign in to EDM')
  await page.fill("input[name='username']", 'net')
  await page.fill("input[name='password']", 'P@ssw0rd')
  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[@class='col'])[3]")).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[@class='col'])[3]")).toContainText(drawer)

  await page.waitForTimeout(300)
})

test('Go into drawer', async () => {
  await page.click(`(//div[text()='${drawer}'])[2]`)
  await expect(page.locator("(//div[@class='col'])[3]")).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[@class='col'])[3]")).toContainText(folder)
})

test('Go into Folder', async () => {
  await page.click(`(//div[text()='${folder}'])[2]`)
  await expect(page.locator("(//div[@class='col'])[3]")).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']")
  await page.waitForTimeout(300)
  await expect(page.locator("(//div[@class='col'])[3]")).toContainText(
    subfolder,
  )
})

test('Go into Subfolder', async () => {
  await page.click(`(//div[text()='${subfolder}'])[2]`)

  await expect(page.locator("(//div[@class='col'])[3]")).not.toHaveText(folder)
})

test('Upload File in SubFolder Level', async () => {
  await page.click("//span[text()='สร้างเอกสาร']")
  await page
    .locator("//input[@type='file']")
    .setInputFiles('tests/searchtest.txt')
  await page.fill("//input[@placeholder='กรอกชื่อเรื่อง']", 'testtext')
  await page.click("(//button[@type='submit'])[1]")
  await page.waitForTimeout(2500)
  await page.click('button#getFolder')
  await page.waitForTimeout(1000)
  await expect(page.locator("(//div[@class='col'])[3]")).toContainText(
    'testtext',
  )
})

test('Go into Text File', async () => {
  await page.click("//div[text()='testtext']")
})

test('Download File Text', async () => {
  await page.click("//span[text()='ดาวน์โหลด']")
  await page.waitForTimeout(2000)
})

test('Go back to SubFolder Level Again', async () => {
  await page.click("//i[text()='arrow_back']")
})

test('Delete file Cancel', async () => {
  await page.click(
    `//button[@data-testid='action${cabinet}/${drawer}/${folder}/${subfolder}/searchtest.txt']`,
  )
  await page.click("(//div[@role='listitem'])[2]")
  await page.click("(//div[@class='q-space']/following-sibling::button)[2]")
  await expect(page.locator("(//div[@class='col'])[3]")).toContainText(
    'testtext',
  )
})

test('Delete file Confirm', async () => {
  await page.click(
    `//button[@data-testid='action${cabinet}/${drawer}/${folder}/${subfolder}/searchtest.txt']`,
  )
  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[@class='col'])[3]")).not.toHaveText(
    'testtext',
  )
})

test('Back to Folder', async () => {
  await page.click("//i[text()='arrow_back']")
  await expect(page.locator("(//div[@class='col'])[3]")).toContainText(
    subfolder,
  )
})

test('Upload File in Folder Level', async () => {
  await page.click("//span[text()='สร้างเอกสาร']")
  await page
    .locator("//input[@type='file']")
    .setInputFiles('tests/searchtest.txt')
  await page.fill("//input[@placeholder='กรอกชื่อเรื่อง']", 'testtext')
  await page.click("(//button[@type='submit'])[1]")
  await page.waitForTimeout(2500)
  await page.click('button#getFolder')
  await page.waitForTimeout(1000)
  await expect(page.locator("(//div[@class='col'])[3]")).toContainText(
    'testtext',
  )
})

test('Go into Text File in Folder', async () => {
  await page.click("//div[text()='testtext']")
})

test('Download File Text in Folder', async () => {
  await page.click("//span[text()='ดาวน์โหลด']")
  await page.waitForTimeout(2000)
})

test('Go back to Folder Level Again', async () => {
  await page.click("//i[text()='arrow_back']")
})

test('Delete file Cancel in Folder', async () => {
  await page.click(
    `//button[@data-testid='action${cabinet}/${drawer}/${folder}/searchtest.txt']`,
  )
  await page.click("(//div[@role='listitem'])[2]")
  await page.click("(//div[@class='q-space']/following-sibling::button)[2]")
  await expect(page.locator("(//div[@class='col'])[3]")).toContainText(
    'testtext',
  )
})

test('Delete file Confirm in Folder', async () => {
  await page.click(
    `//button[@data-testid='action${cabinet}/${drawer}/${folder}/searchtest.txt']`,
  )
  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[@class='col'])[3]")).not.toHaveText(
    'testtext',
  )
})

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[@class='col'])[3]")).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[@class='col'])[3]")).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[@class='col'])[3]")).not.toHaveText(newName)
})

test('Back to drawer', async () => {
  await page.click("//i[text()='arrow_back']")
  await expect(page.locator("(//div[@class='col'])[3]")).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[@class='col'])[3]")).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[@class='col'])[3]")).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[@class='col'])[3]")).not.toHaveText(newName)
})

test('Back to Cabinet', async () => {
  await page.click("//i[text()='arrow_back']")
  await expect(page.locator("(//div[@class='col'])[3]")).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[@class='col'])[3]")).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[@class='col'])[3]")).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[@class='col'])[3]")).not.toHaveText(newName)
})

test('Back to Home', async () => {
  await page.click("//i[text()='arrow_back']")
  await expect(page.locator("(//div[@class='col'])[3]")).toContainText(cabinet)
})

test('Edit Cabinet', async () => {
  console.log(cabinet)

  await page.click(`"//button[@data-testid='action${cabinet}/']"`)
  //button[@data-testid='actionI0Xc50SHxGe4kYehU4t2B/']
  await page.click("(//div[@role='listitem'])[2]")
  await page.fill("(//input[@placeholder='กรอกชื่อ'])2]", newName)
  await page.click("(//button[@id='FoldeSubmit'])[2]")
  await expect(page.locator("(//div[@class='col'])[3]")).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[@class='col'])[3]")).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[@class='col'])[3]")).not.toHaveText(newName)
})