<template>
	<v-form ref="form">
		<v-row>
			<v-col cols="3">
				<v-text-field
					v-model="stripeData.billing_details.unit"
					:readonly="stripeData.loading"
					hide-details="auto"
					label="Unit"
					required
					variant="outlined"
				/>
			</v-col>
			<v-col cols="9">
				<app-address
					v-model:address="stripeData.billing_details.line1"
					v-model:city="stripeData.billing_details.city"
					v-model:country_code="
						stripeData.billing_details.country_code
					"
					v-model:postcode="stripeData.billing_details.postal_code"
					v-model:state_code="stripeData.billing_details.state_code"
					:map="false"
					:clear="clearAddress"
					label="Full Address*"
					payment
				>
					<template #activator="{osm}">
						<v-text-field
							v-model="osm.params.q"
							label="Full Address*"
							:loading="osm.loading"
							:rules="rulesInput"
							append-inner-icon="mdi-map-marker"
							hide-details="auto"
							required
							variant="outlined"
						/>
					</template>
				</app-address>
			</v-col>
		</v-row>
		<v-text-field
			v-model="stripeData.billing_details.name"
			:readonly="stripeData.loading"
			:rules="rulesInput"
			class="mt-3"
			hide-details="auto"
			label="Card Name*"
			required
			variant="outlined"
		/>

		<v-text-field
			v-model="stripeData.complete"
			:base-color="
				stripeData.paymentMethodCreated ? 'success' : 'primary'
			"
			:color="stripeData.paymentMethodCreated ? 'success' : 'primary'"
			:error-messages="errorStripeMessage"
			:rules="rulesInput"
			class="saswp-ui-stripe-card__input-card mt-3"
			hide-details="auto"
			readonly
			variant="outlined"
		>
			<template #default>
				<div
					:id="stripeData.card.id"
					class="saswp-ui-stripe-card__input-stripe flex-grow-1 d-block ma-auto w-100"
				></div>
			</template>
			<!--			<template #append-inner v-if="!isMobile">-->
			<!--				<v-btn-->
			<!--					:color="stripeData.paymentMethodCreated ? 'success' : 'primary'"-->
			<!--					:loading="stripeData.loading"-->
			<!--					@click="stripeData.createPaymentMethod()"-->
			<!--				>-->
			<!--					{{ stripeData.paymentMethodCreated ? "Card Added" : "Add Card" }}-->
			<!--				</v-btn>-->
			<!--			</template>-->
		</v-text-field>

		<!--		<v-btn-->
		<!--			v-if="isMobile"-->
		<!--			class="w-100 mt-3"-->
		<!--			:color="stripeData.paymentMethodCreated ? 'success' : 'primary'"-->
		<!--			:loading="stripeData.loading"-->
		<!--			@click="stripeData.createPaymentMethod()"-->
		<!--		>-->
		<!--			{{ stripeData.paymentMethodCreated ? "Card Added" : "Add Card" }}-->
		<!--		</v-btn>-->
	</v-form>

	<v-alert
		v-if="cardValidation.show"
		:text="cardValidation.message"
		:type="cardValidation.type"
		class="mt-5"
		closable
	/>
</template>

<script setup>
const AppAddress = Vue.defineAsyncComponent(
	async () =>
		await loadModule(`${SAS_URL}/src/components/AppAddress.vue`, options)
);

const props = defineProps({
	modelValue: {type: [Object], default: () => ({})},
	cardSelected: {type: String, default: () => ('')},
});
const store = useStripeStore()
const {stripeData, form, cardValidation, errorStripeMessage, clearAddress} = Pinia.storeToRefs(store)

const stripeKey = useAxios({
	url: "/vendor/stripe_keys?",
	method: "get",
	autoSubmit: true,
	onSuccess() {
		stripeData.value.stripe = Stripe(stripeKey.response.data.key);
		store.init();
	},
	response: {
		data: {},
	},
});

Vue.watch(() => props.cardSelected, () => form.value.validate());

const rulesInput = [
	(v) => {
		if (!props.cardSelected) {
			return !!v || 'This field is required';
		}
		return true;
	},
];
</script>

<style>
form > .saswp-ui-stripe-card__input-card .v-input__control .v-field__input {
	display: flex;
	align-items: center;
}

form
> .saswp-ui-stripe-card__input-card
.v-input__control
.v-field__input
input {
	display: none !important;
}

form > .saswp-ui-stripe-card__input-card .saswp-ui-stripe-card__input-stripe {
	position: relative;
}

form > .saswp-ui-stripe-card__input-stripe:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	content: "";
}
</style>
