import {TbCornerDownLeft, TbTrash} from "react-icons/tb";
import {__} from "@wordpress/i18n";
// State actions.
import {useDispatch, useSelector} from "react-redux";
import {addRuleSet, deleteRuleSet} from "@app/modules/PersonaForm/store/PersonaFormStore";

export default function SearchRuleGroupItem({group}) {
	const dispatch = useDispatch();

	const selectedRules = useSelector((state) => state.ruleSets);
	const toggleRule = (rule) => {
		if (selectedRules.find((selectedRule) => true != selectedRule?.multi && selectedRule.id === rule.id)) {
			dispatch(deleteRuleSet(rule.id));
		} else if (selectedRules.length > 0) {
			return;
		} else {
			dispatch(addRuleSet(rule));
		}
	};

	// If we didn't find any rules, don't render the group.
	if (group.items.length === 0) {
		return null;
	}

	// If we have items show the rules.
	return (
		<div
			tabIndex="-1"
			aria-label={group['name']}
			className="dxp-border-b dxp-border-gray-200 dxp-pb-4 dxp-pt-6 last:dxp-border-b-0"
		>
			<div className="dxp-font-bold dxp-px-4 dxp-pb-3 dxp-text-sm dxp-text-tundora">
				{group['name']}
			</div>
			{group.items.map(function (rule, index) {
				const isSelected = selectedRules.find((selectedRule) => true != selectedRule?.multi && selectedRule.id === rule.id);

				return !rule.premium &&  <div
					key={index}
					role="option"
					aria-selected="false"
					onClick={() => toggleRule(rule)}
					className={`
						dxp-cursor-pointer
						dxp-flex
						dxp-group
						dxp-items-center
						dxp-justify-between
						dxp-no-underline
						dxp-px-4
						dxp-py-3
						${
							isSelected
								? 'dxp-bg-red[.04] dxp-bg-red/[.04]'
								: 'focus:dxp-bg-purple-300/[.08] hover:dxp-bg-purple-300/[.08]'
						}
						${
							!isSelected && selectedRules.length > 0
								? 'disabled'
								: ''
						}
					`}
				>
					<div>
						<div role="presentation" className="dxp-leading-5 dxp-text-sm dxp-text-tundora">
							{rule.name}
						</div>
						<div className="dxp-text-gray-500 dxp-text-sm">
							{group['name']}
						</div>
					</div>
					{
						isSelected && <>
							<div className="dxp-ml-auto dxp-pr-8 dxp-text-rolling-stone">
								<em>{__('This rule has already been added', 'dxp')}</em>
							</div>
							<div
								className="
									dxp-flex
									dxp-gap-2.5
									dxp-items-center
									dxp-text-red
									dxp-text-sm
								"
							>
								{__('Remove Rule', 'dxp')}
								<TbTrash size="20"/>
							</div>
						</>
					}
					{
						!isSelected && (
							<div
								className="
									dxp-gap-2.5
									dxp-hidden
									dxp-items-center
									dxp-text-purple
									dxp-text-sm
									group-focus:dxp-flex
									group-hover:dxp-flex
								"
							>
								{__("Add Rule", "dxp")}
								<TbCornerDownLeft size="20" className="dxp-bg-purple/[.15] dxp-rounded"/>
							</div>
						)
					}
					{
						!isSelected && selectedRules.length > 0 && <>
							<div className="dxp-ml-auto dxp-pr-8 dxp-text-rolling-stone">
								<em>{__('Only one rule can be added at a time on free version.', 'dxp')}</em>
							</div>
							<div
								className="
									dxp-gap-2.5
									dxp-hidden
									dxp-items-center
									dxp-text-purple
									dxp-text-sm
									group-focus:dxp-flex
									group-hover:dxp-flex
								"
							>
							</div>
						</>
					}
				</div>
			})}
		</div>
	)
}