const $ = jQuery;

import { defineStore } from "pinia";
import { ElNotification } from "element-plus";
import Schema from "async-validator";
import type { ValidationData, AjaxResponse, Data, ValidationResult } from "./types/common";
// const Vuex = window.Vuex;
const lifelineDonation = globalThis.lifeline_donation;
const _ = globalThis._;


export const useDonationFormsStore = defineStore("wpcm-donationforms", {
	state: () => {
		return {
			config: {
				donate_now: '',
				wrapper_class: '',
				width: '',
				proceed_classes: '',
				steps: 1,
				show_back_btn: '',
				back_text: '',
				proceed: '',
				background_image: '',				
			},			
			components: [],
			showModal: false,
			post_id: 0,
			style: 1,
			loading: false,
			amount: 0,
			billing_fields: { email: "", first_name: "", last_name: "", address: "", zip: "", country: "", state: "", city: "", phone: "", company: "", tax: "" },
			token: "",
			currency: "",
			recurring: false,
			payment_method: "",
			cycle: "",
			step: 1,
			cc: {},
			extras: {donation_custom_dropdown: ''},
			proceed_submit: false,
		};
	},

	actions: {
		async getData(data: Data) : Promise<void> {
			this.post_id = data.vm.id || 0;
			this.style = data.vm.dstyle || 1;
			this.showModal = false;
			this.loading = true;

			// Get product donation data from session storage
			const productTotal = sessionStorage.getItem('ld_product_total');
			const productQuantities = sessionStorage.getItem('ld_product_quantities');
			const donationType = productTotal ? 'product' : 'cause';

			this.loading = true;
			await $.ajax({
				url: lifelineDonation.ajaxurl,
				type: "post",
				data: {
					action: "lifeline_donation_data",
					id: this.post_id,
					style: this.style,
					nonce: lifelineDonation.nonce,
					donation_type: donationType,
					product_total: productTotal || 0,
					quantity: productQuantities ? JSON.parse(productQuantities) : {},
				},
				success: (res) => {
					this.loading = false;
					this.components = res.data.components;
					this.config = res.data.config;

					if (res.data.config && res.data.config.product_total) {
						this.amount = res.data.config.product_total;
					} else if (productTotal) {
						this.amount = parseFloat(productTotal);
					}
					this.showModal = true;
					
					// Clear session storage after successful data load
					if (productTotal) {
						sessionStorage.removeItem('ld_product_total');
						sessionStorage.removeItem('ld_product_type');
						sessionStorage.removeItem('ld_product_quantities');
					}
				},
				error: (xhr, status, error) => {
					this.loading = false;
					console.error('Error fetching donation data:', error);
				}
			});
		},
		submit() {
			// const { eventBus } = lifeline_donation;
			const { payment_method, proceed_submit } = this.$state;
			jQuery(document).trigger("lifeline-donation-form-submit", this.$state);
			// eventBus.$emit("lifeline-donation-form-submit", this.$state);
			// console.log(eventBus, 'eventBus')

			if (payment_method === "offline" || payment_method === "paypal") {
				this.proceed_submit = true;

			}
			if (!this.proceed_submit) {
				return;
			}
			this.loading = true;
			$.ajax({
				url: lifelineDonation.ajaxurl,
				type: "post",
				data: {
					action: "lifeline_donation_donate_now",
					post_id: this.post_id,
					amount: this.amount,
					currency: this.currency,
					gateway: this.payment_method,
					recurring: this.recurring,
					type: !this.post_id ? "general" : "single",
					info: this.billing_fields,
					nonce: lifelineDonation.nonce,
					cycle: this.cycle,
					extras: this.extras,
					cc: this.cc,
				},
				success: (res) => {
					if (res.type == "redirect") {
						window.location = res.url;
					}
					// eventBus.$emit(
					// 	"webinane_commerce_checkout_form_submitted",
					// 	res
					// );
				jQuery(document).trigger('webinane_commerce_checkout_form_submitted', res)
				},
				complete: (res) => {
					if (res.status !== 200) {
						this.loading = false;

						const json = res.responseJSON;
						let messages = _.get(json, "data.messages");
						messages = !messages
							? _.get(json, ["data", "message"])
							: messages;
						messages = !messages ? res.responseText : messages;

						ElNotification({
							type: "error",
							title: res.statusText,
							message: messages,
							dangerouslyUseHTMLString: true,
							offset: 40,
						});
					}
				},
			});
		},
		validate(data: ValidationData) : Promise<ValidationResult> {
			const { fields, rules } = data;
			// console.log(this.$state, this)
			return new Promise((resolve, reject) => {
				const validator = new Schema(rules); // Assuming `Schema` is a valid constructor imported elsewhere
				validator.validate(fields, (errors: any, fields: Record<string, any>) => { // Adjust error type if needed
				  if (errors) {
					reject({fields, errors});
				  } else {
					resolve(errors);
				  }
				});
			})
		},
		next () {
			this.step++;
		},
		back () {
			this.step--;
		}
	},
});