<template>
	<div class="flex h-full flex-col">
		<div class="sticky top-0 z-10 shrink-0">
			<Header>
				<Breadcrumbs
					:items="[{ label: object.list.title, route: object.list.route }]"
				/>
			</Header>
		</div>
		<div class="p-5">
			<AlertUnpaidInvoices
				class="mb-5"
				v-if="hasUnpaidInvoices > 0"
				:amount="hasUnpaidInvoices"
			/>
			<ObjectList :options="listOptions" />
		</div>
	</div>
</template>

<script>
import Header from '../components/Header.vue';
import ObjectList from '../components/ObjectList.vue';
import { Breadcrumbs, Button, Dropdown, TextInput } from 'jingrow-ui';
import { getObject } from '../objects';
import { defineAsyncComponent } from 'vue';
import dayjs from '../utils/dayjs';
import AlertBanner from '../components/AlertBanner.vue';

export default {
	components: {
		Header,
		Breadcrumbs,
		ObjectList,
		Button,
		Dropdown,
		TextInput,
		AlertBanner,
		AlertUnpaidInvoices: defineAsyncComponent(() =>
			import('../components/AlertUnpaidInvoices.vue')
		)
	},
	props: {
		objectType: {
			type: String,
			required: true
		}
	},
	methods: {
		getRoute(row) {
			return {
				name: `${this.object.pagetype} Detail`,
				params: {
					name: row.name
				}
			};
		}
	},
	computed: {
		object() {
			return getObject(this.objectType);
		},
		listOptions() {
			return {
				...this.object.list,
				pagetype: this.object.pagetype,
				route: this.object.detail ? this.getRoute : null
			};
		},
		isCardExpired() {
			if (this.$team.pg.payment_method?.expiry_year < dayjs().year()) {
				return true;
			} else if (
				this.$team.pg.payment_method?.expiry_year == dayjs().year() &&
				this.$team.pg.payment_method?.expiry_month < dayjs().month() + 1
			) {
				return true;
			} else {
				return false;
			}
		},
		banner() {
			return this.$resources.banner.pg;
		},
		isMandateNotSet() {
			return !this.$team.pg?.payment_method?.stripe_mandate_id;
		},
		hasUnpaidInvoices() {
			return this.$resources.getAmountDue.data;
		}
	},
	resources: {
		banner() {
			return {
				type: 'document',
				pagetype: 'Dashboard Banner',
				name: 'Dashboard Banner'
			};
		},
		getAmountDue() {
			return {
				url: 'jcloud.api.billing.total_unpaid_amount',
				auto: true
			};
		}
	}
};
</script>