<template>
	<div class="quick-actions">
		<Button
			@click="handleEdit"
			icon="pi pi-pencil"
			label="Edit Information"
			size="small"
			severity="secondary"
		/>
		<Button
			@click="handleCreateEstimate"
			icon="pi pi-file-edit"
			label="Create Estimate"
			size="small"
			severity="secondary"
		/>
		<Button
			@click="handleCreateBidMeeting"
			icon="pi pi-calendar-plus"
			label="Create Bid Meeting"
			size="small"
			severity="secondary"
		/>

		<!-- Edit Confirmation Dialog -->
		<Dialog
			:visible="showEditConfirmDialog"
			@update:visible="showEditConfirmDialog = $event"
			header="Confirm Edit"
			:modal="true"
			:closable="false"
			class="confirm-dialog"
		>
			<p>Are you sure you want to edit this client information? This will enable editing mode.</p>
			<template #footer>
				<Button
					label="Cancel"
					severity="secondary"
					@click="showEditConfirmDialog = false"
				/>
				<Button
					label="Yes, Edit"
					@click="confirmEdit"
				/>
			</template>
		</Dialog>
	</div>
</template>

<script setup>
import { ref } from "vue";
import Button from "primevue/button";
import Dialog from "primevue/dialog";
import { useRouter } from "vue-router";
import DataUtils from "../../utils";

const props = defineProps({
	fullAddress: {
		type: String,
		required: true,
	},
});

const emit = defineEmits(["edit-mode-enabled"]);

const router = useRouter();
const showEditConfirmDialog = ref(false);

const handleEdit = () => {
	showEditConfirmDialog.value = true;
};

const confirmEdit = () => {
	showEditConfirmDialog.value = false;
	emit("edit-mode-enabled");
};

const handleCreateEstimate = () => {
	router.push({
		path: "/estimate",
		query: {
			new: "true",
			address: props.fullAddress,
		},
	});
};

const handleCreateBidMeeting = () => {
	router.push({
		path: "/calendar",
		query: {
			tab: "bids",
			new: "true",
			address: props.fullAddress,
		},
	});
};
</script>

<style scoped>
.quick-actions {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.confirm-dialog {
	max-width: 400px;
}

.confirm-dialog :deep(.p-dialog-footer) {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
}
</style>
