/**
 * Visited Pages Rule Form.
 *
 * @returns {JSX.Element}
 */
import {useEffect, useState} from "react";
import {useDispatch} from 'react-redux';
import {__} from "@wordpress/i18n";

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

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

export default function VisitedPages() {
	const dispatch = useDispatch();
	const [option, setOption] = useState('exact');
	const [link, setLink] = useState('');

	useEffect(() => {
		dispatch(setRuleConfig(
			{
				id: 'VisitedPages',
				config: {
					ruleType: "visited_pages",
					args: {
						rules: [
							{
								operator: option,
								url: link
							}
						]
					}
				}
			}
		));
	}, [option, link]);

	return (
		<div>
			<Label
				title={__('Configure your persona rule', 'dxp')}
			/>
			<div
				className="dxp-mb-4"
			>
				<Select
					value={option}
					onChange={(e) => setOption(e.target.value)}
				>
					{options.map((option, index) => (
						<option key={index} value={option.value}>{option.label}</option>
					))}
				</Select>
			</div>
			<div>
				<Input
					type="text"
					variant="small"
					value={link}
					placeholder={__('Enter a URL', 'dxp')}
					onChange={(e) => setLink(e.target.value)}
				/>
				<p>{__('Enter the URL of the visited pages you would like to track for this persona rule.', 'dxp')}</p>
			</div>
		</div>
	);
}

const options = [
	{
		label: __('Website Is Exactly'),
		value: 'exact'
	},
	{
		label: __('Website address contains the following string'),
		value: 'contains'
	},
	{
		label: __('Website Is Different From'),
		value: 'opposite'
	},
	{
		label: __('Website address does NOT contain the following string'),
		value: 'not_contain'
	}
];