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

// Constants.
import { BROWSE_RULES, RULES_TYPES } from "@app/config/constants";

// State actions.
import {
	addRuleSet,
	setError,
	setLoading,
	setTitle,
} from "@app/modules/PersonaForm/store/PersonaFormStore";

// API
import PersonaFormAPI from "@app/modules/PersonaForm/api";

// Components.
import Button from "@app/components/Button";
import Card from "@app/components/Card";
import Input from "@app/components/Input";
import Dropdown from "@app/components/Dropdown";
import Label from "@app/components/Label";
import RulesList from "@app/modules/RuleSets/components/RulesList";
import SearchRules from "@app/modules/RuleSets/components/SearchRules";

export default function AddPersonaForm({ handleFormSubmit }) {
	const {
		loading: loadingAPI,
		error: errorAPI,
		response: responseAPI,
	} = PersonaFormAPI();
	const title = useSelector((state) => state.title);
	const selectedRules = useSelector((state) => state.ruleSets);
	const titleLabel =
		selectedRules.length > 1
			? __("Recipe Title", "dxp")
			: __("Rule Title", "dxp");
	const error = useSelector((state) => state.error);
	const dispatch = useDispatch();
	const onTitleChange = (e) => dispatch(setTitle(e.target.value));
	const addRule = (rule) => dispatch(addRuleSet(rule));
	const [selectedRuleType, setSelectedRuleType] = useState("");
	const getRuleQueryParam = () => {
		const urlParams = new URLSearchParams(window.location.search);
		return urlParams.get("rule");
	};
	useEffect(() => {
		const findRuleById = (ruleId) => {
			for (const category of BROWSE_RULES) {
				const foundRule = category.rules.find(
					(rule) => rule.id === ruleId,
				);
				if (foundRule) {
					return foundRule;
				}
			}
			return null;
		};

		const ruleQueryParam = getRuleQueryParam();
		const matchedRule = findRuleById(ruleQueryParam);

		if (matchedRule) {
			addRule(matchedRule);
		}
	}, []);

	useEffect(() => {
		dispatch(setLoading(loadingAPI));
	}, [loadingAPI]);

	useEffect(() => {
		dispatch(setError(errorAPI));
	}, [errorAPI]);

	return (
		<div className="-dxp-ml-2.5 dxp-max-w-4xl dxp-pb-14 dxp-pt-8 dxp-px-8 sm:-dxp-ml-5">
			<div className="dxp-mb-8">
				<Label for="title" title={titleLabel} />
				<Input
					id="title"
					type="text"
					placeholder={__("Add a Title", "dxp")}
					value={title}
					onChange={onTitleChange}
					aria-required="true"
					aria-invalid="false"
					onBlur={(event) => {
						if (event.target.validity.valid) {
							event.target.classList.remove("!dxp-border-red");
						} else {
							event.target.classList.add("!dxp-border-red");
						}
					}}
					required
				/>
			</div>
			{/* Title */}
			<div className="dxp-mb-8">
				<Label title={__("Add Persona Rules", "dxp")} />
				<div className="dxp-flex">
					<div className="dxp-basis-1/3">
						<Dropdown
							variant="group-left-gray"
							options={RULES_TYPES}
							placeholder={__("All Rule Types", "dxp")}
							selectedOption={selectedRuleType}
							handleSelectChange={(event) =>
								setSelectedRuleType(event.target.value)
							}
							disabled={ selectedRules.length>0 }
						/>
					</div>
					<div className="dxp-basis-full">
						<SearchRules
							typeID={selectedRuleType}
							placeholder={__("Search by rule name", "dxp")}
						/>
					</div>
				</div>
			</div>
			{/* Search */}

			{/* RuleSets with Collapse and Check Logic */}
			{selectedRules.length > 0 && (
				<RulesList selectedRules={selectedRules} />
			)}

			{/* Popular Rules Cards */}
			{!selectedRules.length && (
				<div className="dxp-gap-8 dxp-grid dxp-grid-cols-1 sm:dxp-grid-cols-2">
					{BROWSE_RULES.map((rulecard, cardIndex) => {
						return (
							<Card
								key={cardIndex}
								title={__(rulecard.title, "dxp")}
								wide={rulecard?.wide}
								premium={rulecard?.premium}
							>
								<div className="dxp-flex dxp-flex-wrap dxp-gap-3">
									{rulecard.rules.map((rule, index) => {
										return (
											<Button
												key={index}
												right={
													<TbCirclePlus size="24" />
												}
												onClick={() => addRule(rule)}
												premium={rule?.premium}
											>
												{rule.name} {rule.premium ? " (Premium)" : ""}
											</Button>
										);
									})}
								</div>
							</Card>
						);
					})}
				</div>
			)}
		</div>
	);
}