<template>
	<div class="summary-container">
		<!--    <pre>{{ summary }}</pre>-->
		<template v-for="(item, index) in summary">
			<p
				v-if="item.title"
				:key="`title-${index}`"
				class="font-weight-bold text-uppercase text-right mb-4"
				:class="item.class"
			>
				<template v-if="item.discount">
					{{ item.key }}:
					<span class="discount-item__default">
						{{ item.value }}
					</span>
					<strong class="discount-item__discount">
						{{ item.discount }}
					</strong>
				</template>
				<template v-else> {{ item.key }}: {{ item.value }}</template>
			</p>
			<hr
				v-else-if="item.breaker"
				:key="`breaker-${index}`"
				:class="item.style"
			/>
			<slot
				v-else-if="item.slot"
				:name="`${item.slot}`"
				v-bind="{ item, index }"
			></slot>
			<v-row
				v-else
				:key="index"
				align-h="between"
				class="mb-3"
				:class="item.class"
			>
				<v-col cols="auto" class="flex-grow-1 summary-tooltip">
					<template v-if="inverted">
						{{ item.key }}
					</template>

					<v-tooltip v-if="item.tooltip">
						<template #activator="{ props }">
							<v-icon
								icon="mdi-help-circle"
								class="mr-1"
								v-bind="props"
							/>
						</template>

						<span v-html="item.tooltip"></span>
					</v-tooltip>

					<template v-if="!inverted">
						{{ item.key }}
					</template>
				</v-col>
				<v-col cols="auto" class="text-right summary-value">
					<template v-if="item.discount">
						<span class="discount-item__default">
							{{ item.value }}
						</span>
						<strong class="discount-item__discount">
							{{ item.discount }}
						</strong>
					</template>
					<template v-else>
						{{ item.value }}
					</template>
				</v-col>
			</v-row>
		</template>
	</div>
</template>

<script>
export default {
	props: {
		config: {
			type: Object,
			default: () => ({
				bond: true,
				bond_extras: true,
				bond_slot: false,
				period: true,
				period_card_fee: true,
				period_extras: true,
				period_taxes: true,
				period_total: true,
				period_total_slot: false,
				installment: true,
				installment_parcels: true,
				total_bond: true,
			}),
		},
		inverted: {
			type: Boolean,
			default: false,
		},
		property: {
			type: Object,
			default: () => ({}),
			required: true,
		},
		quotes: {
			type: Object,
			required: true,
		},
		show: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			summary: [],
		};
	},
	computed: {},
	watch: {
		quotes: {
			immediate: true,
			deep: true,
			handler() {
				this.summary = this.getSummary();
			},
		},
	},
	methods: {
		getSummary() {
			if (!this.quotes || !this.quotes.days) return []
			const summaryList = []

			if (this.config.period) {
				let period
				if (this.config.period_taxes && this.quotes?.booking_payments?.sas_fee) {
					period =
						this.quotes.booking_payments.base_total +
						this.quotes.booking_payments.sas_fee
				} else if (this.quotes.booking_payments.base_total) {
					period = this.quotes.booking_payments.base_total
				} else {
					period = this.quotes?.payment_details?.find(
						(el) => el.detail_type === 'payment_period',
					)?.value
				}

				summaryList.push({
					key: `${this.quotes.days} Night${this.quotes.days === 1 ? '' : 's'}`,
					value: money(period, this.property.properties?.currency_code),
				})
			}

			if (this.config.period_extras) {
				if (this.quotes.promocode_status) {
					summaryList.push({
						key: 'Promo code discount',
						value: `-${money(
							this.quotes.booking_payments.base_discount_amount,
							this.property.properties?.currency_code
						)}`,
						class: 'text-danger',
					})
				}

				const taxes = this.quotes?.taxes?.filter(
					(tx) => tx?.tax_operation === 'extra_fees' && tx?.value > 0,
				)
				if (taxes) {
					const extras = []
					let extra_total = 0
					for (const tax of taxes) {
						if (
							tax.tax_type === 'linen' ||
							tax.tax_type === 'extra_linen'
						) {
							extras.push(`Linen: ${money(tax?.value, this.property.properties?.currency_code)}`)
						} else if (
							tax.tax_type === 'extra_cleaning_fee' ||
							tax.tax_type === 'block_cleaning_cost_fee'
						) {
							extras.push(`Cleaning: ${money(tax?.value, this.property.properties?.currency_code)}`)
						} else if (tax.tax_type === 'extra_amount_per_guest_fee') {
							extras.push(`Extra guests: ${money(tax.value, this.property.properties?.currency_code)}`)
						} else if (
							tax.tax_type === 'extra_amount_days_pet_fee' ||
							tax.tax_type === 'extra_amount_per_pet_fee' ||
							tax.tax_type === 'extra_amount_pet_fixed_fee'
						) {
							extras.push(`Pets: ${money(tax?.value, this.property.properties?.currency_code)}`)
						} else if (tax.tax_type === 'property_additional_fee') {
							extras.push(`Additional fee: ${money(tax?.value, this.property.properties?.currency_code)}`)
						}

						extra_total += tax.value
					}

					if (extras.length) {
						summaryList.push({
							key: 'Extras',
							value: money(extra_total, this.property.properties?.currency_code),
							tooltip: extras.join('\n'),
						})
					}
				}

				const booking_fee = this.quotes?.taxes?.find(
					(tx) => tx.tax_type === 'booking_fee',
				)
				if (booking_fee?.value) {
					summaryList.push({
						key: 'Non-Refundable Booking Fee',
						value: money(booking_fee.value, this.property.properties?.currency_code),
						tooltip: 'Non-refundable',
					})
				}

				const special_offer = this.quotes?.payment_details?.find(
					(el) =>
						el.detail_type === 'special_offer' && el?.value?.description,
				)
				if (special_offer) {
					summaryList.push({
						key: special_offer.value.description,
						value: money(special_offer.value.price_reduction, this.property.properties?.currency_code),
					})
				}

				const nz_tax = this.quotes?.booking_payments?.nz_tax
				if (nz_tax) {
					summaryList.push({
						key: `NZ GST`,
						value: money(nz_tax, this.property.properties?.currency_code),
						tooltip: `15% GST`,
					})
				}

				if (this.quotes.booking_payments?.base_discount_amount > 0) {
					summaryList.push({
						key: 'Discount',
						value: `-${money(
							this.quotes?.booking_payments?.base_discount_amount,
							this.property.properties?.currency_code
						)}`,
						class: 'text-danger',
					})
				}
			}

			if (this.config.period_total) {
				let total = this.quotes?.booking_payments?.base_sub_total_no_cc_fee
				if (!total && this.quotes.base_grand_sub_total)
					total = this.quotes.base_grand_sub_total

				summaryList.push({breaker: true})
				summaryList.push({slot: 'before-total'})
				const _total = {
					key: 'TOTAL',
					value: money(total, this.property.properties?.currency_code),
					class: 'text-xl',
				}

				if (this.config.period_total_slot) _total.slot = 'total'
				else _total.title = true

				summaryList.push(_total)
			} else {
				summaryList.push({slot: 'before-total'})
			}

			if (this.quotes.payment_details && this.quotes.payment_details.length) {
				if (this.config.installment) {
					const payments = this.quotes?.payment_details?.find(
						(el) => el.detail_type === 'installment_subtotal',
					)
					for (let i = 0; i < payments.value.length; i++) {
						const payment = payments.value[i]
						summaryList.push({
							key: `Instalment ${i + 1} - Due ${moment(
								payment.due_date,
								'YYYY-MM-DD',
							).format('DD/MM/YYYY')}`,
							value: money(payment.value, this.property.properties?.currency_code),
						})
					}
				}

				if (this.config.total_bond) {
					summaryList.push({slot: 'before-total-bond'})
					const bond = this.quotes.partial_payment_info?.find(
						(el) => el.parcel_type === 'bond',
					)
					if (bond?.value) {
						summaryList.push({breaker: true, style: 'dashed'})

						const total_obj = {
							key: `Total Bond - Due ${moment(bond.due_date).format(
								'DD/MM/YYYY',
							)}`,
							value: money(bond.value, this.property.properties?.currency_code),
							bold: true,
						}

						summaryList.push(total_obj)
					}
				}
			}

			return summaryList
		},
	},
};
</script>

<style scoped>
.discount-item {
	&__default {
		text-decoration: line-through;
	}

	&__discount {
		text-decoration: none;
		white-space: pre;
	}
}
</style>
