<template>
	<div
		:class="active ? 'method-active' : ''"
		class="payment-method-card my-4 mx-2 pa-3 rounded"
	>
		<v-row class="pt-2 justify-space-between">
			<v-img
				:src="modelValue?.brand === 'visa' ? Visa : Mastercard"
				class="mb-2"
				height="45"
				width="75"
				@click="$emit('update:modelValue', modelValue)"
			/>

			<v-icon
				class="icon"
				color="red"
				icon="mdi-trash-can-outline"
				size="15"
				@click="dialog = true"
			/>
		</v-row>
		<v-row
			class="flex-column px-2 flex-wrap"
			@click="$emit('update:modelValue', modelValue)"
		>
			<span class="text-uppercase">{{ cardNumber }}</span>
			<span>Exp {{ expiration }}</span>
			<span>{{ modelValue?.name }}</span>
		</v-row>
	</div>

	<v-dialog v-model="dialog" width="auto">
		<v-card
			max-width="400"
			text="Are you sure to remove this payment method?"
			title="Please Confirm"
		>
			<v-alert v-if="error.show" class="ma-3" type="error">
				{{ error.message }}
			</v-alert>
			<template v-slot:actions>
				<v-row class="mx-3 justify-end">
					<v-btn class="mr-2" text="Cancel" @click="dialog = false"/>
					<v-btn
						:loading="loading"
						color="red"
						outlined
						text="Remove"
						@click="removePayment()"
					/>
				</v-row>
			</template>
		</v-card>
	</v-dialog>
</template>
<script>
export default {
	props: {
		modelValue: {type: Object, default: () => ({})},
		active: {type: Boolean, default: false},
	},
	data() {
		return {
			dialog: false,
			loading: false,
			error: {show: false, message: ""},
			Visa: `${SAS_URL}/src/assets/images/visa-active.png`,
			Mastercard: `${SAS_URL}/src/assets/images/mastercard-active.png`,
		};
	},
	computed: {
		cardNumber() {
			try {
				return `xxxx xxxx xxxx ${this.modelValue.last4}`;
			} catch {
				return "xxxx xxxx xxxx xxxx";
			}
		},
		expiration() {
			try {
				return `${("0" + this.modelValue.exp_month).slice(
					-2,
				)}/${this.modelValue.exp_year.slice(-2)}`;
			} catch {
				return "";
			}
		},
	},
	methods: {
		async removePayment() {
			try {
				this.loading = true;
				const customer = {
					customers: {
						customer_id: this.modelValue.stripe_customer_id,
						payment_method_id:
						this.modelValue.stripe_payment_method_id,
					},
				};

				const result = await axios.delete(
					`/vendor/financial/stripe/destroy_payment_method`,
					{data: customer},
				);
				this.$emit("removedPaymentMethod", result.data.data);
				this.dialog = false;
			} catch (e) {
				this.error = {
					show: true,
					message: e.response.data.message,
				};
			} finally {
				this.loading = false;
			}
		},
	},
};
</script>

<style scoped>
.payment-method-card {
	max-width: 150px;
	cursor: pointer;
	border: 1px solid transparent;
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	transition: border-color 0.2s ease-in-out;
}

.payment-method-card:hover,
.payment-method-card.method-active {
	border-color: #ff5313;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.payment-method-card .icon {
	position: absolute;
	right: 0;
}

@media only screen and (max-width: 767px) {
	.payment-method-card {
		max-width: 135px;
		width: 100%;
	}
}
</style>
