import { __ } from "@wordpress/i18n";
import { TbLoader, TbRocket } from "react-icons/tb";
import { useDispatch, useSelector } from "react-redux";

// Components.
import Button from "@app/components/Button";
import PersonaFormAPI from "@app/modules/PersonaForm/api";
import store, {
	getSubmitData,
	getUpdateData,
} from "@app/modules/PersonaForm/store/PersonaFormStore";
import Snackbar from "@app/components/Snackbar";

export default function PersonaFormFooter() {
	const dispatch = useDispatch();
	const isValid = useSelector((state) => state.isValid);
	const isEditing = useSelector((state) => state.isEditing);
	const {
		loading,
		error,
		response,
		submitPersonaForm,
		updatePersonaForm,
		deletePersonaFrom,
	} = PersonaFormAPI();

	const handleFormSubmit = () => {
		const currentState = store.getState();
		if (!currentState.isEditing) {
			submitPersonaForm(getSubmitData(currentState));
		} else {
			updatePersonaForm(getUpdateData(currentState));
		}
	};
	const handleTrashClick = () => {
		const currentState = store.getState();
		deletePersonaFrom(currentState.id);
	};

	return (
		<div className="-dxp-mx-5 -dxp-my-2.5 dxp-bg-white dxp-border-black/10 dxp-border-t dxp-border-t-solid dxp-px-8 dxp-py-6 dxp-relative max-md:[.wp-responsive-open_&]:-dxp-right-[11.875rem]">
			<Snackbar show={response}>{response.message || ""}</Snackbar>

			<Snackbar show={error}>{error}</Snackbar>

			<div className="dxp-max-w-4xl">
				<div className="dxp-flex dxp-gap-6 dxp-items-center">
					<Button
						variant="primary"
						left={
							loading ? (
								<TbLoader
									size="24"
									className="leading-5 dxp-animate-spin"
								/>
							) : (
								<TbRocket size="24" className="leading-5" />
							)
						}
						disabled={loading || !isValid || response}
						onClick={handleFormSubmit}
					>
						{isEditing
							? loading
								? __("Updating...", "dxp")
								: __("Update", "dxp")
							: loading
							? __("Saving...", "dxp")
							: __("Save", "dxp")}
					</Button>
					{isEditing && (
						<Button variant="link" onClick={handleTrashClick}>
							{__("Delete Ruleset", "dxp")}
						</Button>
					)}
				</div>
			</div>
		</div>
	);
}