<template>
	<div class="flex flex-col gap-5">
		<FormControl
			v-model="billingInformation.billing_name"
			type="text"
			name="billing_name"
			label="账单名称"
			:required="true"
		/>
		<NewAddressForm
			ref="addressFormRef"
			v-model="billingInformation"
			@success="() => emit('success')"
		/>
		<ErrorMessage class="mt-2" :message="errorMessage" />
	</div>
	<div v-if="addressFormRef" class="mt-6">
		<Button
			class="w-full"
			variant="solid"
			label="更新账单信息"
			:loading="addressFormRef.updateBillingInformation.loading"
			@click="updateBillingInformation"
		/>
	</div>
</template>
<script setup>
import NewAddressForm from './NewAddressForm.vue';
import { FormControl, ErrorMessage, Button, createResource } from 'jingrow-ui';
import { reactive, ref, inject } from 'vue';

const emit = defineEmits(['success']);

const team = inject('team');

const addressFormRef = ref(null);

const fullName = `${team.pg.user_info.first_name || ''} ${
	team.pg.user_info.last_name || ''
}`.trim();

const billingInformation = reactive({
	billing_name: fullName || '',
	address: '',
	city: '',
	state: '',
	postal_code: '',
	country: '',
	gstin: '',
});

createResource({
	url: 'jcloud.api.account.get_billing_information',
	auto: true,
	onSuccess: (data) => {
		if (!Object.keys(data).length) return;

		Object.assign(billingInformation, {
			address: data.address_line1,
			city: data.city,
			state: data.state,
			postal_code: data.pincode,
			country: data.country,
			gstin: data.gstin == 'Not Applicable' ? '' : data.gstin,
			billing_name: data.billing_name,
		});
	},
});

const errorMessage = ref('');

function updateBillingInformation() {
	if (!billingInformation.billing_name) {
		errorMessage.value = '账单名称为必填项';
		return;
	}
	const billing_name = billingInformation.billing_name.trim();
	const billingNameRegex = /^[a-zA-Z0-9\-\'\,\.\s]+$/;
	const billingNameValid = billingNameRegex.test(billing_name);
	if (!billingNameValid) {
		errorMessage.value = '账单名称包含无效字符';
		return;
	}
	billingInformation.billing_name = billing_name;
	addressFormRef.value.updateBillingInformation.submit();
}
</script>