import {useState} from "react";
import {__} from '@wordpress/i18n';
import {useDispatch, useSelector} from 'react-redux';
import {TbCircleChevronDown, TbCircleChevronUp} from "react-icons/tb";

// Components.
import Rule from "./Rule";
import Button from "@app/components/Button";
import {setCheckingLogic} from "@app/modules/PersonaForm/store/PersonaFormStore";

/**
 * RulesList component
 *
 * @param selectedRules - array - array of user rules

 * @returns
 */
export default function RulesList({selectedRules}) {
	const [collapsed, setCollapsed] = useState(false);
	const dispatch = useDispatch();
	const checkingLogic = useSelector(state => state.checkingLogic);

	const toggleCollapse = () => {
		setCollapsed(!collapsed);
	}

	const toggleCheckingLogic = (logic) => {
		dispatch(setCheckingLogic(logic));
	}

	return (
		<div>
			{selectedRules.map((rule, index) => (
				<Rule
					key={index}
					collapsed={collapsed}
					id={rule.id}
					title={rule.name}
					details={rule.details}
					validationStatus={rule.validationStatus || false}
					typeID={rule.typeID || null}
				/>
			))}
		</div>
	)
}