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

const LOGGER = getPostRequestLogger("signupForm/");

fixture`Admin signup form`.page(`${getSiteRoot()}/admin/signups`)
  .requestHooks(LOGGER)
  .after(async (ctx) => {
    const token = await generateAccessToken();
    await deleteForm(ctx.formId, token);
  });

test("Logged in user can create signup", 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/signups");

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

  const titleFi = Selector("#rjsf_title_fi");
  const titleEn = Selector("#rjsf_title_en");
  const visible = Selector("#rjsf_visible");

  await t
    .typeText(titleFi, "Testi Ilmo")
    .typeText(titleEn, "Test Signup")
    .click(visible);

  const newQuestionButton = Selector("[data-e2e=\"admin-signup-new-question\"]");
  const lastQuestion = () => Selector("[data-e2e=\"admin-signup-question\"]").child("div").child("div").child("div")
    .nth(-1);

  await t.click(newQuestionButton);
  let question = lastQuestion();
  let questionNameFi = question.child("input").nth(0);
  let questionNameEn = question.child("input").nth(1);
  let questionTypeSelect = question.child("select");
  let requiredBox = question.child("label");

  await t
    .selectText(questionNameFi)
    .pressKey("delete")
    .typeText(questionNameFi, "Nimi")
    .selectText(questionNameEn)
    .pressKey("delete")
    .typeText(questionNameEn, "Name")
    .click(questionTypeSelect)
    .click(questionTypeSelect.find("option").withExactText("name"))
    .click(requiredBox);

  await t.click(newQuestionButton);
  question = lastQuestion();
  questionNameFi = question.child("input").nth(0);
  questionNameEn = question.child("input").nth(1);
  questionTypeSelect = question.child("select");
  requiredBox = question.child("label");

  await t
    .selectText(questionNameFi)
    .pressKey("delete")
    .typeText(questionNameFi, "S-Posti")
    .selectText(questionNameEn)
    .pressKey("delete")
    .typeText(questionNameEn, "Email")
    .click(questionTypeSelect)
    .click(questionTypeSelect.find("option").withExactText("email"))
    .click(requiredBox);

  await t.click(newQuestionButton);
  question = lastQuestion();
  questionNameFi = question.child("input");
  questionTypeSelect = question.child("select");
  const radioOptionsFi = question.child("input").nth(-2);
  const radioOptionsEn = question.child("input").nth(-1);

  await t
    .selectText(questionNameFi)
    .pressKey("delete")
    .typeText(questionNameFi, "Olen")
    .selectText(questionNameEn)
    .pressKey("delete")
    .typeText(questionNameEn, "I am")
    .click(questionTypeSelect)
    .click(questionTypeSelect.find("option").withExactText("radiobutton"))
    .typeText(radioOptionsFi, "Nuori;Vanha;Testaaja")
    .typeText(radioOptionsEn, "Yung;Old;Tester");

  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.formId = parsed.id;

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