// https://docs.cypress.io/api/introduction/api.html

describe("WIDGET", () => {
  it("Performs all crud ops on widget", () => {
    var 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");
    //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
    cy.get("[data-cy=name]").type("E2E CRUD " + unique);
    //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();
    //first row first day (the first of the month)
    cy.get(
      '[data-cy="dpick:startDate"] > .v-picker__body > :nth-child(1) > .v-date-picker-table > table > tbody > :nth-child(1) > :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();
    //first row second day (the second of the month)
    cy.get(
      '[data-cy="dpick:endDate"] > .v-picker__body > :nth-child(1) > .v-date-picker-table > table > tbody > :nth-child(1) > :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
    //.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)
    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();
    // cy.get(" div.v-picker__title__btn:nth-child(2) > :nth-child(1)").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();

    //select customer user
    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}");

    cy.get("[data-cy=WidgetCustom2]").click(); //to close the tags above
    cy.get("[data-cy=WidgetCustom2]").type(
      "Custom text field testing a...b...c...{enter}EOT"
    );
    //cy.get("[data-cy=tags]").type("zone1{enter}", { force: true });

    // // we should be redirected to /dashboard
    // cy.url().should("include", "/home-dashboard");

    // //navigate and confirm
    // //open nav and home menu
    // cy.get("[data-cy=navicon]").click();
    // cy.get("[data-cy=home]").click();
    // cy.get("[data-cy='nav/home-user-settings']").click();
    // cy.url().should("include", "/home-user-settings");
    // cy.get("[data-cy=contextmenu]").click();
    // cy.get("[data-cy='app:logout']").click();
    // cy.url().should("include", "/login");
  });
});