<template>
	<Dialog v-model="show" :options="{ title: 'Add Conversion Date' }">
		<template #body-content>
			<div class="flex flex-col gap-5">
				<FormControl
					v-model="conversion_date"
					label="Conversion Date"
					type="date"
					name="conversion_date"
					:required="true"
				/>
				<FormControl
					v-model="hosting_type"
					label="Hosting Type"
					type="select"
					name="hosting_type"
					:options="[
						{ label: 'Self-Hosted', value: 'Self-Hosted' },
						{ label: 'Frappe Cloud', value: 'Frappe Cloud' },
					]"
					:required="true"
				/>
				<FormControl
					v-model="site_url"
					label="Site URL"
					type="data"
					name="site_url"
					:required="true"
				/>
				<ErrorMessage :message="errorMessage" />
				<Button variant="solid" @click="() => updateStatus.submit()"
					>Submit</Button
				>
			</div>
		</template>
	</Dialog>
</template>
<script setup>
import { Dialog, FormControl, createResource } from 'frappe-ui';
import { ref, defineEmits } from 'vue';
import { DashboardError } from '../../utils/error';

const emit = defineEmits(['update']);
const show = defineModel();
const props = defineProps({
	lead_id: {
		type: String,
		required: true,
	},
});

const conversion_date = ref();
const hosting_type = ref();
const site_url = ref();
const errorMessage = ref('');
const updateStatus = createResource({
	url: 'press.api.partner.update_lead_status',
	makeParams: () => {
		return {
			lead_name: props.lead_id,
			status: 'Won',
			conversion_date: conversion_date.value,
			hosting: hosting_type.value,
			site_url: site_url.value,
		};
	},
	validate: () => {
		if (
			conversion_date.value === undefined ||
			hosting_type.value === undefined ||
			site_url.value === undefined
		) {
			let error = 'Please fill all the required fields';
			errorMessage.value = error;
			throw new DashboardError(error);
		}
	},
	onSuccess: () => {
		emit('update');
		show.value = false;
	},
});
</script>
