/**
 * LoggedIn form component.
 *
 * @returns {JSX.Element}
 */
// State action for update/set rule config.
import {useDispatch, useSelector} from "react-redux";
import {useEffect, useState} from "react";
import {__} from "@wordpress/i18n";

// State action for update/set rule config.
import {setRuleConfig} from "@app/modules/PersonaForm/store/PersonaFormStore";
import GravityFormsAPI from "@app/modules/Rulesets/api/GravityForms";

// Components.
import Select from "@app/components/Select";
import Label from "@app/components/Label";

const ruleID = "SubmittedGravityForms";

export default function SubmittedGravityForms({ id = ruleID }) {
	const { loading, error, response, getGravityFormss } = GravityFormsAPI();
	const dispatch = useDispatch();
	const rule = useSelector((state) =>
		state.ruleSets.find((rule) => rule.id === id),
	);
	const [selectedGravityForms, setSelectedGravityForms] = useState(
		rule.config?.args?.gravity_forms || "",
	);

	useEffect(() => {
		getGravityFormss();
	}, []);

	useEffect(() => {
		dispatch(
			setRuleConfig({
				id: id,
				config: {
					ruleType: "gravity_forms",
					args: {
						gravity_forms: selectedGravityForms,
					},
				},
			}),
		);
	}, [selectedGravityForms]);

	return (
		<div>
			<Label
				for="gravity_forms"
				className={"dxp-block"}
				title={__("Gravity Forms", "dxp")}
			/>

			<Select
				name="gravity_forms"
				id="gravity_forms"
				value={selectedGravityForms}
				onChange={(e) => setSelectedGravityForms(e.target.value)}
			>
				<option value="">{__("Pick a form", "dxp")}</option>
				{loading && <option>{__("Loading...", "dxp")}</option>}
				{error && <option>{error}</option>}
				{response &&
					response.map((form, index) => (
						<option key={index} value={form.id}>
							{form.name}
						</option>
					))}
			</Select>
		</div>
	);
}