import { __ } from "@wordpress/i18n";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useState } from "react";
import {id_seperator} from "@app/modules/RuleSets/utils";

// Icons.
import {
	TbArrowBigRightLines,
	TbCircleChevronDown,
	TbCircleChevronUp,
	TbSettingsCheck,
	TbSettingsExclamation,
	TbTransform,
	TbTrashX,
} from "react-icons/tb";

import { RULES_TYPES } from "@app/config/constants";

// State actions.
import { deleteRuleSet } from "@app/modules/PersonaForm/store/PersonaFormStore";

// Rule Forms
import { rulesForms } from "@app/modules/RuleSets/components/RuleForms";

// Components.
import Button from "@app/components/Button";
import Heading from "@app/components/Heading";

const getTypeName = (typeID) => {
	const type = RULES_TYPES.find((type) => type.id === typeID);
	return type.name || null;
};

/**
 * Rule component
 * @param collapsed - string - true or false
 * @param title - string - title of rule
 * @param validationStatus - string - true or false
 * @returns
 */
export default function Rule({
	id,
	collapsed,
	title,
	validationStatus,
	details,
	typeID,
}) {
	const isRevision = useSelector((state) => state.isRevision);
	const [isCollapsed, setIsCollapsed] = useState(false);
	const [detailsCollapse, setDetailsCollapse] = useState(false);
	const [collapseIconState, setCollapseIconState] = useState(
		collapsed === true ? "closed" : "open",
	);
	const dispatch = useDispatch();
	const deleteRule = () => dispatch(deleteRuleSet(id));
	let searchId = id.split(id_seperator)[0];
	const RuleForm = rulesForms[searchId];

	useEffect(() => {
		setIsCollapsed(collapsed);
		setCollapseIconState(collapsed === true ? "closed" : "open");
	}, [collapsed]);

	const handleCollapseIcon = () => {
		setIsCollapsed(!isCollapsed);
		setCollapseIconState(collapseIconState === "open" ? "closed" : "open");
	};

	const convertToRecipe = () => {
		const response = confirm(
			"Are you sure you want to convert this rule to a recipe?",
		);
		if (response) {
			console.log("convert to recipe");
		}
	};

	const destroyRule = () => {
		deleteRule();
	};

	return (
		<div
			className="
				dxp-bg-gradient-to-br
				dxp-border
				dxp-border-gray-200
				dxp-mb-6
				dxp-rounded-lg
				dxp-group/rule
				focus:dxp-shadow-black/[.08]
				hover:dxp-shadow-black/[.08]
			"
			data-collapsed={isCollapsed}
		>
			<div
				className="
				-dxp-m-1px
				dxp-flex
				dxp-flex-row
				dxp-group
				header
			"
			>
				<div
					className="
						dxp-border
						dxp-border-gray-200
						dxp-border-r-0
						dxp-flex
						dxp-flex-1
						dxp-flex-row
						dxp-items-center
						dxp-p-4
						dxp-rounded-l-lg
						group-hover:dxp-bg-gradient-to-r
						group-hover:dxp-border-orange
						group-hover:dxp-from-orange/0
						group-hover:dxp-to-orange/5"
				>
					<Heading
						level="h2"
						title={title}
						className="dxp-w-6/12 dxp-capitalize dxp-my-0 dxp-text-[18px] dxp-font-medium dxp-mr-8"
					/>
					{isCollapsed && (
						<div className="dxp-flex-1">
							<Heading
								level="h4"
								title={__("Rule type", "dxp")}
								className="dxp-uppercase dxp-text-xs dxp-text-gray-400 dxp-tracking-widest dxp-my-0"
							/>
							<p className="dxp-capitalize dxp-text-base dxp-my-0 dxp-leading-5">
								{getTypeName(typeID)}
							</p>
						</div>
					)}
					<div
						className="
						dxp-ml-auto
						dxp-flex
						dxp-flex-row
						dxp-group/validation
						dxp-items-center"
						data-validationstatus={validationStatus}
					>
						<div className="dxp-pt-1 dxp-text-green group-data-[validationstatus=false]/validation:dxp-hidden">
							<TbSettingsCheck size="30" />
						</div>
						<div className="dxp-pt-1 dxp-text-orange group-data-[validationstatus=true]/validation:dxp-hidden">
							<TbSettingsExclamation size="30" />
						</div>
						<div
							className="
							dxp-duration-500
							dxp-ease-in-out
							dxp-max-w-0
							dxp-overflow-hidden
							dxp-transition-max-w
							group-hover:dxp-max-w-[300px]
						"
						>
							<div
								className="
								dxp-grid
								dxp-gap-4
								dxp-grid-flow-col
								dxp-items-center
								dxp-pl-4
							"
							>
								{false && (
									<Button
										variant="secondary-small"
										left={<TbTransform size="24" />}
									>
										<div
											className="dxp-whitespace-nowrap"
											onClick={convertToRecipe}
										>
											{__("Convert to recipe", "dxp")}
										</div>
									</Button>
								)}
								{!isRevision && <div
									className="
										dxp-bg-red/10
										dxp-border
										dxp-border-red
										dxp-border-solid
										dxp-cursor-pointer
										dxp-flex
										dxp-h-9
										dxp-items-center
										dxp-justify-center
										dxp-rounded-full
										dxp-text-red
										dxp-w-9
										hover:dxp-bg-red/0
									"
									onClick={destroyRule}
								>
									<TbTrashX size="24"/>
								</div>}
							</div>
						</div>
					</div>
				</div>
				<div
					className="
					dxp-border
					dxp-border-gray-200
					dxp-cursor-pointer
					dxp-flex
					dxp-items-center
					dxp-p-4
					dxp-rounded-r-lg
					dxp-w-6
					group-hover:dxp-border-orange
					dxp-group/icon
					"
					onClick={handleCollapseIcon}
					data-collapseicon={collapseIconState}
				>
					<TbCircleChevronUp
						size="24"
						className="group-data-[collapseicon=closed]/icon:dxp-hidden"
					/>
					<TbCircleChevronDown
						size="24"
						className="group-data-[collapseicon=open]/icon:dxp-hidden"
					/>
				</div>
			</div>

			<div
				className="
				dxp-p-4
				group-data-[collapsed=true]/rule:dxp-hidden
			"
			>
				<div className="dxp-flex dxp-flex-row dxp-items-center">
					<div className="dxp-w-3/12 dxp-gap-8">
						<Heading
							level="h4"
							title={__("Rule type", "dxp")}
							className="dxp-uppercase dxp-text-xs dxp-text-gray-400 dxp-tracking-widest dxp-my-0"
						/>
						<p className="dxp-capitalize dxp-text-sm dxp-my-0 dxp-leading-5">
							{getTypeName(typeID)}
						</p>
					</div>
					{RuleForm && (
						<div className="dxp-flex-1">
							<div
								className="
							dxp-bg-gradient-to-br
							dxp-border
							dxp-border-gray-200
							dxp-flex
							dxp-flex-row
							dxp-flex-wrap
							dxp-from-gray-200/0
							dxp-gap-y-6
							dxp-items-center
							dxp-p-4
							dxp-rounded-lg
							dxp-to-gray-200/[.08]
							hover:dxp-border-purple
							hover:dxp-shadow-cardfocus
						"
							>
								<RuleForm id={id} />
							</div>
						</div>
					)}
				</div>
				{details && (
					<div
						className="
						dxp-flex
						dxp-items-center
						dxp-border-t
						dxp-border-gray-200
						dxp-mt-4
						-dxp-mx-4
						dxp-pt-4
						dxp-px-4
						dxp-cursor-help
						"
						onClick={() => setDetailsCollapse(!detailsCollapse)}
					>
						<div className="dxp-w-3/12">
							{details && (
								<Button
									variant="link-purple"
									pressed={detailsCollapse}
									right={
										<TbArrowBigRightLines
											size="20"
											className="dxp-text-black"
										/>
									}
									onClick={() =>
										setDetailsCollapse(!detailsCollapse)
									}
								>
									{__("More Details", "dxp")}
								</Button>
							)}
						</div>
						{detailsCollapse && details && (
							<div
								className="dxp-flex-1"
								dangerouslySetInnerHTML={{ __html: details }}
							/>
						)}
					</div>
				)}
			</div>
		</div>
	);
}