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

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

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

const ruleID = "CommonReferrers";

export default function CommonReferrers({id = ruleID}) {
	const dispatch = useDispatch();
	const rule = useSelector((state) =>
		state.ruleSets.find((rule) => rule.id === id),
	);
	const [selectedReferrer, setSelectedReferrer] = useState(
		rule.config?.args?.url || "",
	);
	useEffect(() => {
		dispatch(
			setRuleConfig({
				id: id,
				config: {
					ruleType: "referrer",
					args: {
						operator: "contains",
						url: selectedReferrer,
						id: ruleID,
					},
				},
			}),
		);
	}, [selectedReferrer]);

	return (
		<div>
			<Label title={__("Referral Website", "dxp")} />
			<Select
				value={selectedReferrer}
				onChange={(e) => setSelectedReferrer(e.target.value)}
			>
				<option value="">
					{__("Select a common referral website", "dxp")}
				</option>
				<option value={"google.com"}>{__("Google", "dxp")}</option>
				<option value={"facebook.com"}>{__("Facebook", "dxp")}</option>
				<option value={"youtube.com"}>{__("YouTube", "dxp")}</option>
				<option value={"linkedin.com"}>{__("LinkedIn", "dxp")}</option>
				<option value={"twitter.com"}>{__("Twitter", "dxp")}</option>
			</Select>
		</div>
	);
}