<template>
	<div class="booking-rules-container booking-sections mt-4">
		<div>
			<v-row>
				<v-col cols="12" class="pb-0">
					<div class="d-flex">
						<div class="d-flex flex-column bordered-right">
							<small>Arrival</small>
							<span>
								<v-icon icon="mdi-calendar" class="icon"/>
								<strong class="strong">
									{{
										momentFormat(
											modelValue.response.data
												.checkin_date,
											"YYYY-MM-DD",
										).format("DD/MM/YY")
									}}
								</strong>
							</span>
						</div>

						<div class="d-flex flex-column bordered-right">
							<small>Departure</small>
							<span>
								<v-icon icon="mdi-calendar" class="icon"/>
								<strong class="strong">
									{{
										momentFormat(
											modelValue.response.data
												.checkout_date,
											"YYYY-MM-DD",
										).format("DD/MM/YY")
									}}
								</strong>
							</span>
						</div>

						<div class="d-flex flex-column bordered-right">
							<small>Guests</small>
							<span>
								<v-icon icon="mdi-user" class="icon"/>
								<strong class="strong">{{ guests }}</strong>
							</span>
						</div>
					</div>
				</v-col>
				<v-col cols="12">
					<div class="d-flex">
						<div class="d-flex flex-column px-5">
							<small>Check-in</small>
							<strong class="strong">
								{{
									momentFormat(
										property.property_configurations
											.hour_check_in,
										"HH:mm",
									).format("HH:mmA")
								}}
							</strong>
						</div>

						<div class="d-flex flex-column">
							<small>Check-out</small>
							<strong class="strong">
								{{
									momentFormat(
										property.property_configurations
											.hour_check_out,
										"HH:mm",
									).format("HH:mmA")
								}}
							</strong>
						</div>
					</div>
				</v-col>
			</v-row>

			<hr class="my-4"/>

			<div>
				<h4>Cancellation Policy</h4>
			</div>
			<div class="mb-2">
				Search And Stay changes a <strong>3.5%</strong> Credit Card Fee
			</div>
			<div v-if="parseFloat(bookingFee) > 0">
				Non-refundable Booking Fee -
				<b>{{ toMoney(bookingFee) }}</b>
			</div>
			<div v-if="cancellation_policies && cancellation_policies.allowed">
				<div v-if="cancellation_policies?.fee > 0">
					Non-refundable cancellation Fee:
					<b>{{ toMoney(cancellation_policies.fee) }}</b>
				</div>
				<div>
					<div
						v-for="(rule, i) in cancellation_rules"
						:key="i"
						class="my-2"
					>
						If cancellation is requested
						<b>{{ rule.days_range }} days</b> before check-in,
						<b>{{ rule.percent_back }}%</b> back of paid amount
					</div>
				</div>
				<div>
					Booking cancelled if any payment more than
					<b>{{ cancellation_policies.cancellation_days_late }}</b>
					days late
				</div>
			</div>
			<div v-else>
				<div>Cancellation not available</div>
			</div>
		</div>

		<div class="mt-5 mb-5">
			<div>
				<h4>Bond</h4>
			</div>
			<div
				v-if="
					quotes?.property?.vendor_settings?.bond_requirements
						?.required || bond?.value > 0
				"
			>
				<div>
					<b>Payment Schedule</b> - Bond required
					<b
						v-if="
							quotes?.property?.vendor_settings?.bond_requirements
						"
					>
						{{
							quotes.property.vendor_settings.bond_requirements
								.held
						}}
						days before check-in
					</b>
					date
				</div>
				<div>
					<b>Bond Release</b> - Bond held for
					<b
						v-if="
							quotes?.property?.vendor_settings?.bond_requirements
						"
					>
						{{
							quotes.property.vendor_settings.bond_requirements
								.trigger
						}}
						days after check-out
					</b>
					date
				</div>
			</div>
			<div v-else>
				<div>Bond not required</div>
			</div>
		</div>

		<div>
			<div>
				<h4>House Rules</h4>
			</div>
			<div
				v-for="(rule, i) in rules"
				:key="i"
				class="d-flex align-items-center"
			>
				<v-icon
					:class="rule.icon?.class || 'text-success'"
					:icon="rule.icon ? `mdi-${rule.icon.name}` : 'mdi-check'"
				/>
				<span>{{ rule.text }}</span>
			</div>
		</div>

		<!--        <v-form v-model="form.valid">-->
		<!--          <v-checkbox v-model="form.readTerms">-->
		<!--            <template v-slot:label>-->
		<!--              <span class="font-weight-bold">-->
		<!--                I have read and agree to comply with all-->
		<!--                <a :href="`${locationUrl}/terms`">rules</a> &-->
		<!--                <a :href="`${locationUrl}/policies`">policies</a> *-->
		<!--              </span>-->
		<!--            </template>-->
		<!--          </v-checkbox>-->
		<!--        </v-form>-->

		<div v-if="isInterhome">
			<div class="mb-3">
				<h4>Terms & Conditions</h4>
			</div>
			<a
				href="downloads/Interhome_Booking_Conditions.pdf"
				target="_blank"
			>
				<fa :icon="['fas', 'file-pdf']"/>
				Click here for Terms and Conditions.
			</a>
		</div>
	</div>
</template>

<script setup>
const props = defineProps({
	property: {
		type: Object,
		default: () => ({}),
	},
	quotes: {
		type: Object,
		default: () => ({}),
	},
	modelValue: {
		type: Object,
		default: () => ({}),
	},
});

const emit = defineEmits(["update:modelValue"]);

const form = Vue.ref({
	readTerms: false,
});

const isInterhome = Vue.computed(
	() => props.property.properties?.integration === "interhome",
);

const bookingFee = Vue.computed(() => {
	return (
		props.quotes?.taxes?.filter((t) => t.tax_type === "booking_fee")[0]
			?.value || 0
	);
});

const guests = Vue.computed(() => {
	return (
		(props.modelValue.response.data.booking_guests?.adults || 1) +
		(props.modelValue.response.data.booking_guests?.children || 0) +
		(props.modelValue.response.data.booking_guests?.infants || 0)
	);
});

const rules = Vue.computed(() => {
	const rules = [];

	if (props.property?.property_house_rules?.length) {
		const smoking_rules = [157, 158, 407];
		const pets_includes_id = 159;
		const pets_not_includes_id = 160;
		const pets_rules = [pets_includes_id, pets_not_includes_id];

		if (
			!props.property?.property_house_rules.some((el) =>
				pets_rules.includes(el.id),
			)
		) {
			rules.push({
				icon: {
					name: "close",
					class: "text-danger",
				},
				text: "Pets not allowed",
			});
		} else if (
			props.property?.property_house_rules.some(
				(el) => pets_includes_id === el.id,
			)
		) {
			const pet_rule = props.property?.property_house_rules.find(
				(el) => pets_includes_id === el.id,
			);
			rules.push({
				icon: {
					name: "check",
					class: "text-success",
				},
				text: pet_rule.name,
			});
		} else {
			const pet_rule = props.property?.property_house_rules.find(
				(el) => pets_not_includes_id === el.id,
			);
			rules.push({
				icon: {
					name: "close",
					class: "text-red",
				},
				text: pet_rule.name,
			});
		}
		if (
			!props.property?.property_house_rules.some((el) =>
				smoking_rules.includes(el.id),
			)
		) {
			rules.push({
				icon: {
					name: "close",
					class: "text-red",
				},
				text: "Smoking or Vaping not allowed",
			});
		}

		for (let i = 0; i < props.property?.property_house_rules.length; i++) {
			const rule = props.property?.property_house_rules[i];
			if (smoking_rules.includes(rule.id) || pets_rules.includes(rule.id))
				continue;
			const is_no_rule = rule.name.toLowerCase().search("no") >= 0;
			rules.push({
				icon: {
					name: is_no_rule ? "close" : "check",
					class: is_no_rule ? "text-red" : "text-success",
				},
				text: rule.name,
			});
		}
	}

	if (props.property?.properties?.age_restriction_active) {
		rules.push({
			icon: {
				name: "account-off",
				class: "text-red",
			},
			text: `Booking Guest Age Restriction: ${props.property?.properties?.age_restriction}+`,
		});
	}

	return rules;
});

const cancellation_rules = Vue.computed(() => {
	try {
		if (
			props.quotes.booking_payments &&
			props.quotes.booking_payments.cancellation_policies &&
			props.quotes.booking_payments.cancellation_policies.rules
		) {
			return props.quotes.booking_payments.cancellation_policies.rules;
		}
		return [];
	} catch (e) {
		console.error(e);
		return [];
	}
});

const cancellation_policies = Vue.computed(() => {
	try {
		if (
			props.quotes.booking_payments &&
			props.quotes.booking_payments.cancellation_policies
		) {
			return props.quotes.booking_payments.cancellation_policies;
		}
		return [];
	} catch (e) {
		console.error(e);
		return [];
	}
});

const bond = Vue.computed(() => {
	return (
		props.quotes?.booking_payments?.booking_payment_parcels?.filter(
			(bpp) => bpp.type == "bond",
		)[0] || 0
	);
});

Vue.watch(
	() => form.value,
	(newVal) => {
		emit("update:modelValue", newVal);
	},
	{deep: true},
);

Vue.watch(
	() => props.modelValue,
	(newVal) => {
		form.value = newVal;
	},
	{immediate: true, deep: true},
);

const toMoney = (value) => {
	return money(value, props.property.properties?.currency_code);
};

const formReady = () => {
	reset();
};

const reset = () => {
	try {
		return form.value.reset();
	} catch {
		return false;
	}
};

const momentFormat = (date, format) => {
	return $moment(date, format);
};

Vue.onMounted(() => {
	formReady();
});
</script>

<style scoped>
a {
	color: #000;
}

.booking-rules-container {
	font-size: 15px;
}

.bordered-right {
	border-right: 2px solid #cacaca;
	border-bottom: 2px solid #cacaca;
	padding: 0 20px;
}

.icon {
	font-weight: normal;
	margin-right: 10px;
	font-size: 16px;
}

.strong {
	font-size: 14px;
}
</style>
