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

	function get_dialog_with_autocomplete(options) {
		cy.visit("/app/website");
		return cy.dialog({
			title: "Autocomplete",
			fields: [
				{
					label: "Select an option",
					fieldname: "autocomplete",
					fieldtype: "Autocomplete",
					options: options || ["Option 1", "Option 2", "Option 3"],
				},
			],
		});
	}

	it("should set the valid value", () => {
		get_dialog_with_autocomplete().as("dialog");

		cy.get(".xhiveframework-control[data-fieldname=autocomplete] input").focus().as("input");
		cy.wait(1000);
		cy.get("@input").type("2", { delay: 300 });
		cy.get(".xhiveframework-control[data-fieldname=autocomplete]")
			.findByRole("listbox")
			.should("be.visible");
		cy.get(".xhiveframework-control[data-fieldname=autocomplete] input").type("{enter}", {
			delay: 300,
		});
		cy.get(".xhiveframework-control[data-fieldname=autocomplete] input").blur();
		cy.get("@dialog").then((dialog) => {
			let value = dialog.get_value("autocomplete");
			expect(value).to.eq("Option 2");
			dialog.clear();
		});
	});

	it("should set the valid value with different label", () => {
		const options_with_label = [
			{ label: "Option 1", value: "option_1" },
			{ label: "Option 2", value: "option_2" },
		];
		get_dialog_with_autocomplete(options_with_label).as("dialog");

		cy.get(".xhiveframework-control[data-fieldname=autocomplete] input").focus().as("input");
		cy.get(".xhiveframework-control[data-fieldname=autocomplete]")
			.findByRole("listbox")
			.should("be.visible");
		cy.get("@input").type("2", { delay: 300 });
		cy.get(".xhiveframework-control[data-fieldname=autocomplete] input").type("{enter}", {
			delay: 300,
		});
		cy.get(".xhiveframework-control[data-fieldname=autocomplete] input").blur();
		cy.get("@dialog").then((dialog) => {
			let value = dialog.get_value("autocomplete");
			expect(value).to.eq("option_2");
			dialog.clear();
		});
	});
});