import { Selector } from "testcafe";
import {
  getSiteRoot, getPageUrl, generateTestForm, deleteEvent, deleteForm, doLogin, generateAccessToken, getPostRequestLogger, waitForLogger,
} from "../utils";

const LOGGER = getPostRequestLogger("events/");

fixture`Admin events`.page(`${getSiteRoot()}/admin/events`)
  .requestHooks(LOGGER)
  .before(async (ctx) => {
    const token = await generateAccessToken();
    const form = await generateTestForm(token);
    ctx.formId = form.id;
  })
  .after(async (ctx) => {
    const token = await generateAccessToken();
    await deleteEvent(ctx.eventId, token);
    await deleteForm(ctx.formId, token);
  });

test("Logged in user can create event", async (t) => {
  const loginForm = Selector("form.admin-login-form");
  await t.expect(loginForm.exists).ok();
  await doLogin(t);
  await t.wait(3000);
  await t.expect(await getPageUrl()).contains("/admin/events");

  const newButton = Selector("[data-e2e=\"create-event\"]");
  await t.click(newButton);
  await t.wait(3000);
  await t.expect(await getPageUrl()).contains("/admin/events/create");

  const titleFi = Selector("#rjsf_title_fi");
  const titleEn = Selector("#rjsf_title_en");
  const descFi = Selector("#rjsf_description_fi");
  const descEn = Selector("#rjsf_description_en");
  const contentFi = Selector("[data-testid=\"text-area\"]").nth(0);
  const contentEn = Selector("[data-testid=\"text-area\"]").nth(1);
  const locationFi = Selector("#rjsf_location_fi");
  const locationEn = Selector("#rjsf_location_en");

  const tagSelect = Selector("#rjsf_tags");
  const signupSelect = Selector("#rjsf_signupForm");
  // const tagOption = tagSelect.find("option").withExactText("Testi");
  // const signupOption = signupSelect.find("option").withExactText("Testi");

  // TODO: Testcafe bug https://github.com/DevExpress/testcafe/issues/5339
  // https://stackoverflow.com/questions/62932588/unable-to-select-drop-down-list-in-testcafe
  // so use keyboard for selection...
  await t
    .click(tagSelect)
    .pressKey("down")
    .pressKey("down")
    .pressKey("space");
  // .pressKey("tab");

  // .click(tagOption, { modifiers: { ctrl: true } });
  await t
    .click(signupSelect)
    .pressKey("down")
    .pressKey("down")
    .pressKey("space");
  // .pressKey("tab");
  // .click(signupOption, { modifiers: { ctrl: true } });

  await t
    .typeText(titleFi, "title_fi")
    .typeText(descFi, "desc_fi")
    .typeText(contentFi, "content_fi")
    .typeText(locationFi, "location_fi")
    .typeText(titleEn, "title_en")
    .typeText(descEn, "desc_en")
    .typeText(contentEn, "content_en")
    .typeText(locationEn, "location_en");

  const submit = Selector("button[type=\"submit\"]");

  await t.click(submit);

  const parsed = JSON.parse(LOGGER.requests[0].response.body as string);

  await waitForLogger(LOGGER);
  // eslint-disable-next-line no-param-reassign
  t.fixtureCtx.eventId = parsed.id;

  const statusMessage = Selector(".Toastify__toast-body");
  await t
    .hover(statusMessage)
    .expect(
      statusMessage.innerText,
    ).eql("Event created successfully 😎");
});