context("Date Range Control", () => {
	before(() => {
		cy.login();
		cy.visit("/app");
	});

	function get_dialog() {
		return cy.dialog({
			title: "Date Range",
			fields: [
				{
					label: "Date Range",
					fieldname: "date_range",
					fieldtype: "Date Range",
				},
			],
		});
	}

	it("Selecting a date range from the datepicker", () => {
		cy.clear_dialogs();
		cy.clear_datepickers();

		get_dialog().as("dialog");
		cy.get_field("date_range", "Date Range").click();
		cy.get(".datepicker--nav-title").click();
		cy.get(".datepicker--nav-title").click({ force: true });

		//Inputing date range values in the date range field
		cy.get(
			".datepicker--years > .datepicker--cells > .datepicker--cell[data-year=2020]"
		).click();
		cy.get(
			".datepicker--months > .datepicker--cells > .datepicker--cell[data-month=0]"
		).click();
		cy.get(".datepicker--cell[data-date=1]:first").click({ force: true });
		cy.get(".datepicker--cell[data-date=15]:first").click({ force: true });

		// Verify if the selected date range values is set in the date range field
		cy.window()
			.its("cur_dialog")
			.then((dialog) => {
				let date_range = dialog.get_value("date_range");
				expect(date_range[0]).to.equal("2020-01-01");
				expect(date_range[1]).to.equal("2020-01-15");
			});
	});
});