import { test, expect } from "@playwright/test";

test("Cox can start and cancel trip", async ({ page }, testInfo) => {
  await page.goto("/auth");
  await page.getByPlaceholder("Name").click();
  await page.getByPlaceholder("Name").fill("cox2");
  await page.getByPlaceholder("Name").press("Tab");
  await page.getByPlaceholder("Passwort").fill("cox");
  await page.getByPlaceholder("Passwort").press("Enter");

  await page.goto("/");
  await page.getByRole("link", { name: "Ausfahrt eintragen" }).click();
  if (testInfo.project.name.includes("Mobile")) {
    // No left boat selector on mobile views
    await page.getByText("Kaputtes Boot :-( (7 x)").nth(1).click();
    await page.getByRole("option", { name: "Joe" }).click();
  } else {
    await page.getByText('2x').click();
    await page.getByText("Joe", { exact: true }).click();
  }
  await page.getByPlaceholder("Ruderer auswählen").click();
  await page.getByRole("option", { name: "rower2" }).click();
  await page.getByRole("option", { name: "cox2" }).click();
  await expect(page.getByRole("listbox")).toContainText(
    "Nur 2 Ruderer können hinzugefügt werden",
  );
  await expect(page.locator("#shipmaster-newrowerjs")).toContainText("cox");
  await expect(page.locator("#steering_person-newrowerjs")).toContainText(
    "rower2 cox",
  );
  await page.getByRole("button", { name: "Ausfahrt eintragen" }).click();
  await expect(page.locator("body")).toContainText(
    "Ausfahrt erfolgreich hinzugefügt",
  );
  await expect(page.locator("body")).toContainText("Joe");

  await page.getByRole("link", { name: "Joe" }).click();
  page.once("dialog", (dialog) => {
    dialog.accept().catch(() => {});
  });
  await page.getByRole("link", { name: "Löschen" }).click();
});

test("Cox can start and finish trip", async ({ page }, testInfo) => {
  await page.goto("/auth");
  await page.getByPlaceholder("Name").click();
  await page.getByPlaceholder("Name").fill("cox2");
  await page.getByPlaceholder("Name").press("Tab");
  await page.getByPlaceholder("Passwort").fill("cox");
  await page.getByPlaceholder("Passwort").press("Enter");

  await page.goto("/");
  await page.getByRole("link", { name: "Ausfahrt eintragen" }).click();
  if (testInfo.project.name.includes("Mobile")) {
    // No left boat selector on mobile views
    await page.getByText("Kaputtes Boot :-( (7 x)").nth(1).click();
    await page.getByRole("option", { name: "Joe" }).click();
  } else {
    await page.getByText('2x').click();
    await page.getByText("Joe", { exact: true }).click();
  }
  await page.getByPlaceholder("Ruderer auswählen").click();
  await page.getByRole("option", { name: "rower2" }).click();
  await page.getByRole("option", { name: "cox2" }).click();
  await expect(page.getByRole("listbox")).toContainText(
    "Nur 2 Ruderer können hinzugefügt werden",
  );
  await expect(page.locator("#shipmaster-newrowerjs")).toContainText("cox");
  await expect(page.locator("#steering_person-newrowerjs")).toContainText(
    "rower2 cox",
  );
  await page.getByRole("button", { name: "Ausfahrt eintragen" }).click();
  await expect(page.locator("body")).toContainText(
    "Ausfahrt erfolgreich hinzugefügt",
  );
  await expect(page.locator("body")).toContainText("Joe");

  await page.goto("/log");
  await page.locator("div:nth-child(2) > .border-0").click();

  // Add a minute
  const datetimeSelector = '#arrivaljs';
  const currentValue = await page.$eval(datetimeSelector, el => el.value);
  const currentDate = new Date(currentValue);
  currentDate.setMinutes(currentDate.getMinutes() + 1);
  currentDate.setHours(currentDate.getHours() - new Date().getTimezoneOffset()/60);
  const newDatetime = currentDate.toISOString().slice(0, 16);
  await page.$eval(datetimeSelector, (el, value) => el.value = value, newDatetime);

  await page.getByRole("combobox", { name: "Destination" }).click();
  await page.getByRole("combobox", { name: "Destination" }).fill("Ottensheim");
  await page.getByRole("button", { name: "Ausfahrt beenden" }).click();
  await expect(page.locator("body")).toContainText(
    "Ausfahrt korrekt eingetragen",
  );

  await page.goto('/log/show');
  await expect(page.locator('body')).toContainText('Joe');
  await expect(page.locator('body')).toContainText('(cox2)');
  await expect(page.locator('body')).toContainText('Ottensheim (25 km)');
  await expect(page.locator('body')).toContainText('Ruderer: cox2, rower2');
});

test("Kiosk can start and cancel trip", async ({ page }, testInfo) => {
  await page.goto("/log/kiosk/ekrv2019/Linz");
  if (testInfo.project.name.includes("Mobile")) {
    // No left boat selector on mobile views
    await page.getByText("Kaputtes Boot :-( (7 x)").nth(1).click();
    await page.getByRole("option", { name: "Joe" }).click();
  } else {
    await page.getByText('2x').click();
    await page.getByText("Joe", { exact: true }).click();
  }
  await page.getByPlaceholder("Ruderer auswählen").click();
  await page.getByRole("option", { name: "rower2" }).click();
  await page.getByRole("option", { name: "cox2" }).click();
  await expect(page.getByRole("listbox")).toContainText(
    "Nur 2 Ruderer können hinzugefügt werden",
  );
  await expect(page.locator("#shipmaster-newrowerjs")).toContainText("cox");
  await expect(page.locator("#steering_person-newrowerjs")).toContainText(
    "rower2 cox",
  );
  await page.getByRole("button", { name: "Ausfahrt eintragen" }).click();
  await expect(page.locator("body")).toContainText(
    "Ausfahrt erfolgreich hinzugefügt",
  );
  await expect(page.locator("body")).toContainText("Joe");

  await page.getByRole("link", { name: "Joe" }).click();
  page.once("dialog", (dialog) => {
    dialog.accept().catch(() => {});
  });
  await page.getByRole("link", { name: "Löschen" }).click();
});

test("Kiosk can start and finish trip", async ({ page }, testInfo) => {
  await page.goto("/log/kiosk/ekrv2019/Linz");

  if (testInfo.project.name.includes("Mobile")) {
    // No left boat selector on mobile views
    await page.getByText("Kaputtes Boot :-( (7 x)").nth(1).click();
    await page.getByRole("option", { name: "Joe" }).click();
  } else {
    await page.getByText('2x').click();
    await page.getByText("Joe", { exact: true }).click();
  }
  await page.getByPlaceholder("Ruderer auswählen").click();
  await page.getByRole("option", { name: "rower2" }).click();
  await page.getByRole("option", { name: "cox2" }).click();
  await expect(page.getByRole("listbox")).toContainText(
    "Nur 2 Ruderer können hinzugefügt werden",
  );
  await expect(page.locator("#shipmaster-newrowerjs")).toContainText("cox");
  await expect(page.locator("#steering_person-newrowerjs")).toContainText(
    "rower2 cox",
  );
  await page.getByRole("button", { name: "Ausfahrt eintragen" }).click();
  await expect(page.locator("body")).toContainText(
    "Ausfahrt erfolgreich hinzugefügt",
  );
  await expect(page.locator("body")).toContainText("Joe");

  await page.goto("/log");
  await page.locator('div:nth-child(2) > .pt-2 > div > div > div:nth-child(2) > .border-0').click(); // 2 trips currently running, try to close second one
  
  // Add a minute
  const datetimeSelector = '#arrivaljs';
  const currentValue = await page.$eval(datetimeSelector, el => el.value);
  const currentDate = new Date(currentValue);
  currentDate.setMinutes(currentDate.getMinutes() + 1);
  currentDate.setHours(currentDate.getHours() - new Date().getTimezoneOffset()/60);
  const newDatetime = currentDate.toISOString().slice(0, 16);
  await page.$eval(datetimeSelector, (el, value) => el.value = value, newDatetime);

  await page.getByRole("combobox", { name: "Destination" }).click();
  await page.getByRole("combobox", { name: "Destination" }).fill("Ottensheim");
  await page.getByRole("button", { name: "Ausfahrt beenden" }).click();
  await expect(page.locator("body")).toContainText(
    "Ausfahrt korrekt eingetragen",
  );

  await page.getByRole('link', { name: 'Logbuch' }).click();
  await expect(page.locator('body')).toContainText('Joe');
  await expect(page.locator('body')).toContainText('(cox2)');
  await expect(page.locator('body')).toContainText('Ottensheim (25 km)');
  await expect(page.locator('body')).toContainText('Ruderer: cox2, rower2');
});