context("Create Bindings", () => {
  before(() => {
    cy.createTestApp()
    cy.navigateToFrontend()
  })

  it("should add a current user binding", () => {
    cy.addComponent("Elements", "Paragraph").then(componentId => {
      addSettingBinding("text", "Current User._id")
      cy.getComponent(componentId).should(
        "have.text",
        `ro_ta_users_us_test@test.com`
      )
    })
  })

  it("should handle an invalid binding", () => {
    cy.addComponent("Elements", "Paragraph").then(componentId => {
      // Cypress needs to escape curly brackets
      cy.get("[data-cy=setting-text] input")
        .type("{{}{{}{{} Current User._id {}}{}}")
        .blur()
      cy.getComponent(componentId).should("have.text", "{{{ [user].[_id] }}")
    })
  })

  it("should add a URL param binding", () => {
    const paramName = "foo"
    cy.createScreen("Test Param", `/test/:${paramName}`)
    cy.addComponent("Elements", "Paragraph").then(componentId => {
      addSettingBinding("text", `URL.${paramName}`)
      // The builder preview pages don't have a real URL, so all we can do
      // is check that we were able to bind to the property, and that the
      // component exists on the page
      cy.getComponent(componentId).should("have.text", "")
    })
  })

  it("should add a binding with a handlebars helper", () => {
    cy.addComponent("Elements", "Paragraph").then(componentId => {
      // Cypress needs to escape curly brackets
      addSettingBinding("text", "{{}{{} add 1 2 {}}{}}", false)
      cy.getComponent(componentId).should("have.text", "3")
    })
  })
})

const addSettingBinding = (setting, bindingText, clickOption = true) => {
  cy.get(`[data-cy="setting-${setting}"] [data-cy=text-binding-button]`).click()
  cy.get(".drawer").within(() => {
    if (clickOption) {
      cy.contains(bindingText).click()
      cy.get("textarea").should("have.value", `{{ ${bindingText} }}`)
    } else {
      cy.get("textarea").type(bindingText)
    }
    cy.get("button").click()
  })
}