// https://docs.cypress.io/api/introduction/api.html
//https://docs.cypress.io/guides/references/assertions.html#BDD-Assertions
describe("WIDGET FORM", () => {
  it("Performs all crud ops on widget successfully", () => {
    let unique = new Date().getTime();
    cy.visit("/login");
    cy.get("input[name=username]")
      .clear()
      .type(Cypress.env("adminusername"));

    // {enter} causes the form to submit
    cy.get("input[name=password]")
      .clear()
      .type(`${Cypress.env("adminpassword")}{enter}`);

    cy.url().should("include", "/home-dashboard");
    cy.visit("/widgets/0");
    cy.url().should("include", "/widgets/0");

    //save the start url for later
    let startUrl = null;
    //funcs are async so need to get result via then
    cy.url().then(url => {
      startUrl = url;
    });

    //first edit to break the required rules
    cy.get("[data-cy=active]").check({ force: true }); //have to force, for some reason it thinks it's covered
    //now name and price sb required rule broken
    cy.contains("Name is a required field");
    cy.contains("Price is a required field");
    //enter name
    let name = "E2E CRUD " + unique;
    cy.get("[data-cy=name]").type(name);
    //confirm error went away
    cy.contains("Name is a required field").should("not.exist");

    cy.get("[data-cy=count]").type("123");
    cy.get("[data-cy=dollarAmount]").type("123.45");
    cy.contains("Price is a required field").should("not.exist");

    //start date
    cy.get("[data-cy='dtfpick:startDate']").click();
    //second row first day (the first row first day is variable (not always Monday) so not suitable)
    cy.get(
      '[data-cy="dpick:startDate"] > .v-picker__body > :nth-child(1) > .v-date-picker-table > table > tbody > :nth-child(2) > :nth-child(1)'
    ).click();

    //Start time
    cy.get("[data-cy='ttfpick:startDate']").click();
    //click on 4
    cy.get(
      "span.v-time-picker-clock__item:nth-child(6) > span:nth-child(1)"
    ).click();
    //click on PM
    cy.get(".v-time-picker-title__ampm > :nth-child(2)").click();
    // cy.get(" div.v-picker__title__btn:nth-child(2) > :nth-child(1)").click();
    //click on 20
    cy.get(
      "span.v-time-picker-clock__item:nth-child(6) > span:nth-child(1)"
    ).click();
    //click on OK
    cy.get('[data-cy="tpick:startDate"] > .v-picker__actions > .v-btn').click();

    //end date
    cy.get("[data-cy='dtfpick:endDate']").click();
    //second row second day (second row always has all days represented)
    cy.get(
      '[data-cy="dpick:endDate"] > .v-picker__body > :nth-child(1) > .v-date-picker-table > table > tbody > :nth-child(2) > :nth-child(2)'
    ).click();

    //End time
    //NOTE: had to use some different selectors, maybe because of prior start date pick changing dom and causing duplicates
    //If need exact selector in future use Firefox, pick element and select Copy->CSS Selector to get accurate thing to select
    cy.get("[data-cy='ttfpick:endDate']").click();
    //click on 4
    cy.get(
      ".v-dialog--active > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > span:nth-child(6) > span:nth-child(1)"
    ).click();
    //click on PM
    cy.get(
      ".v-dialog--active > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(2)"
    ).click();
    //click on 20
    cy.get(
      ".v-dialog--active > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > span:nth-child(6) > span:nth-child(1)"
    ).click();
    //click on OK
    cy.get('[data-cy="tpick:endDate"] > .v-picker__actions > .v-btn').click();

    //USER PICKLIST
    //this is an assumption but it's pretty hard to imagine there not being a user that matches this
    //if it's an issue can just generate a known user before this test runs directly to the api, it's a thing that's possible with cypress
    cy.get("[data-cy=userid] > .v-input").type("a ..zone");
    //select the second item, this assumes only one picklist at a time is dropped down because nothing ties the picklist control to the actual content list
    cy.get(
      ".v-autocomplete__content > .v-select-list > div:nth-child(2)"
    ).click();

    cy.get("[data-cy=usertype]").type("cu{enter}", { force: true });
    cy.get("[data-cy=notes]").type("Testing 1..2..3{enter}EOT");
    cy.get("[data-cy=tags] input[type=text] ").type("zone1{enter}{esc}"); //esc necessary to close tags control
    cy.get("[data-cy=WidgetCustom2]").type(
      "Custom text field testing a...b...c...{enter}EOT"
    );

    //SAve the record and ensure it's different
    cy.get('[data-cy="widget-edit:save"]').click();
    cy.url().should("not.eql", startUrl);

    //confirm it's the same one
    cy.get("[data-cy=name]").should("have.value", name);

    //delete the record
    cy.get('[data-cy="widget-edit:delete"]').click();
    cy.get('[data-cy="gzconfirm:yesbutton"]').click();

    //LOGOUT
    cy.get("[data-cy=contextmenu]").click();
    cy.get("[data-cy='app:logout']").click();
    cy.url().should("include", "/login");
  });
});