<template>
	<Dialog
		v-model="show"
		:options="{
			title:
				accountID === 'new' ? __('New Zoom Account') : __('Edit Zoom Account'),
			size: 'xl',
			actions: [
				{
					label: __('Save'),
					variant: 'solid',
					onClick: ({ close }) => {
						saveAccount(close)
					},
				},
			],
		}"
	>
		<template #body-content>
			<div class="mb-4">
				<FormControl
					v-model="account.enabled"
					:label="__('Enabled')"
					type="checkbox"
				/>
			</div>
			<div class="grid grid-cols-2 gap-5">
				<FormControl
					v-model="account.name"
					:label="__('Account Name')"
					type="text"
					:required="true"
				/>
				<FormControl
					v-model="account.client_id"
					:label="__('Client ID')"
					type="text"
					:required="true"
				/>
				<Link
					v-model="account.member"
					:label="__('Member')"
					doctype="Course Evaluator"
					:onCreate="(value: string, close: () => void) => openSettings('Members', close)"
					:required="true"
				/>
				<FormControl
					v-model="account.client_secret"
					:label="__('Client Secret')"
					type="password"
					:required="true"
				/>
				<FormControl
					v-model="account.account_id"
					:label="__('Account ID')"
					type="text"
					:required="true"
				/>
			</div>
		</template>
	</Dialog>
</template>
<script setup lang="ts">
import { call, Dialog, FormControl, toast } from 'frappe-ui'
import { inject, reactive, watch } from 'vue'
import { User } from '@/components/Settings/types'
import { openSettings, cleanError } from '@/utils'
import Link from '@/components/Controls/Link.vue'
import { useTelemetry } from 'frappe-ui/frappe'

interface ZoomAccount {
	name: string
	account_name: string
	enabled: boolean
	member: string
	account_id: string
	client_id: string
	client_secret: string
}

interface ZoomAccounts {
	data: ZoomAccount[]
	reload: () => void
	insert: {
		submit: (
			data: ZoomAccount,
			options: { onSuccess: () => void; onError: (err: any) => void }
		) => void
	}
	setValue: {
		submit: (
			data: ZoomAccount,
			options: { onSuccess: () => void; onError: (err: any) => void }
		) => void
	}
}

const show = defineModel('show')
const user = inject<User | null>('$user')
const zoomAccounts = defineModel<ZoomAccounts>('zoomAccounts')
const { capture } = useTelemetry()

const account = reactive({
	name: '',
	enabled: false,
	member: user?.data?.name || '',
	account_id: '',
	client_id: '',
	client_secret: '',
})

const props = defineProps<{
	accountID: string | null
}>()

watch(
	() => props.accountID,
	(val) => {
		console.log(props.accountID)
		if (val === 'new') {
			account.name = ''
			account.enabled = false
			account.member = user?.data?.name || ''
			account.account_id = ''
			account.client_id = ''
			account.client_secret = ''
		} else if (val && val !== 'new') {
			const acc = zoomAccounts.value?.data.find((acc) => acc.name === val)
			if (acc) {
				account.name = acc.name
				account.enabled = acc.enabled || false
				account.member = acc.member
				account.account_id = acc.account_id
				account.client_id = acc.client_id
				account.client_secret = acc.client_secret
			}
		}
	}
)

const saveAccount = (close: () => void) => {
	if (props.accountID == 'new') {
		createAccount(close)
	} else {
		updateAccount(close)
	}
}

const createAccount = (close: () => void) => {
	zoomAccounts.value?.insert.submit(
		{
			account_name: account.name,
			...account,
		},
		{
			onSuccess() {
				capture('zoom_account_linked')
				zoomAccounts.value?.reload()
				close()
				toast.success(__('Zoom Account created successfully'))
			},
			onError(err) {
				close()
				toast.error(
					cleanError(err.messages[0]) || __('Error creating Zoom Account')
				)
			},
		}
	)
}

const updateAccount = async (close: () => void) => {
	if (props.accountID != account.name) {
		await renameDoc()
	}
	setValue(close)
}

const renameDoc = async () => {
	await call('frappe.client.rename_doc', {
		doctype: 'LMS Zoom Settings',
		old_name: props.accountID,
		new_name: account.name,
	})
}

const setValue = (close: () => void) => {
	zoomAccounts.value?.setValue.submit(
		{
			...account,
			name: account.name,
			account_name: props.accountID,
		},
		{
			onSuccess() {
				zoomAccounts.value?.reload()
				close()
				toast.success(__('Zoom Account updated successfully'))
			},
			onError(err: any) {
				close()
				toast.error(
					cleanError(err.messages[0]) || __('Error updating Zoom Account')
				)
			},
		}
	)
}
</script>
