<script setup>
const props = defineProps({
    userData: {
        type: Object,
        required: false,
        default: () => ({
            avatar: "",
            company: "",
            contact: "",
            country: null,
            currentPlan: "",
            email: "",
            fullName: "",
            id: 0,
            role: "",
            status: null,
            username: "",
            language: [],
            projectDone: 0,
            taskDone: 0,
            taxId: "",
        }),
    },
    isDialogVisible: {
        type: Boolean,
        required: true,
    },
});

const emit = defineEmits(["submit", "update:isDialogVisible"]);

const userData = ref(structuredClone(toRaw(props.userData)));

watch(props, () => {
    userData.value = structuredClone(toRaw(props.userData));
});

const onFormSubmit = () => {
    emit("update:isDialogVisible", false);
    emit("submit", userData.value);
};

const onFormReset = () => {
    userData.value = structuredClone(toRaw(props.userData));
    emit("update:isDialogVisible", false);
};

const dialogVisibleUpdate = (val) => {
    emit("update:isDialogVisible", val);
};
</script>

<template>
    <VDialog
        :width="$vuetify.display.smAndDown ? 'auto' : 900"
        :model-value="props.isDialogVisible"
        @update:model-value="dialogVisibleUpdate"
    >
        <VCard class="pa-sm-11 pa-3">
            <!-- 👉 dialog close btn -->

            <VCardText class="pt-5">
                <div class="text-center pb-6">
                    <h4 class="text-h4 mb-2">Edit User Information</h4>
                    <div class="text-body-1">
                        Updating user details will receive a privacy audit.
                    </div>
                </div>

                <!-- 👉 Form -->
                <VForm class="mt-4" @submit.prevent="onFormSubmit">
                    <VRow>
                        <!-- 👉 First Name -->
                        <VCol cols="12" md="6">
                            <VTextField
                                v-model="userData.fullName.split(' ')[0]"
                                label="First Name"
                                placeholder="John"
                            />
                        </VCol>

                        <!-- 👉 Last Name -->
                        <VCol cols="12" md="6">
                            <VTextField
                                v-model="userData.fullName.split(' ')[1]"
                                label="Last Name"
                                placeholder="doe"
                            />
                        </VCol>

                        <!-- 👉 User Name  -->

                        <VCol cols="12">
                            <VTextField
                                v-model="userData.username"
                                label="Username"
                                placeholder="John Doe"
                            />
                        </VCol>

                        <!-- 👉 Billing Email -->
                        <VCol cols="12" md="6">
                            <VTextField
                                v-model="userData.email"
                                label="Billing Email"
                                placeholder="johndoe@email.com"
                            />
                        </VCol>

                        <!-- 👉 Status -->
                        <VCol cols="12" md="6">
                            <VSelect
                                v-model="userData.status"
                                :items="['Active', 'Inactive', 'Pending']"
                                label="Status"
                                placeholder="Status"
                            />
                        </VCol>

                        <!-- 👉 Tax Id -->
                        <VCol cols="12" md="6">
                            <VTextField
                                v-model="userData.taxId"
                                label="Tax Id"
                                placeholder="Tax-3456789"
                            />
                        </VCol>

                        <!-- 👉 Contact -->
                        <VCol cols="12" md="6">
                            <VTextField
                                v-model="userData.contact"
                                label="Contact"
                                placeholder="+1 9876543210"
                            />
                        </VCol>

                        <!-- 👉 Language -->
                        <VCol cols="12" md="6">
                            <VSelect
                                v-model="userData.language"
                                :items="['English', 'Spanish', 'French']"
                                label="Language"
                                placeholder="English"
                                chips
                                closable-chips
                                multiple
                            />
                        </VCol>

                        <!-- 👉 Country -->
                        <VCol cols="12" md="6">
                            <VSelect
                                v-model="userData.country"
                                :items="[
                                    'United States',
                                    'United Kingdom',
                                    'France',
                                ]"
                                label="Country"
                                placeholder="United States"
                            />
                        </VCol>

                        <!-- 👉 Switch -->
                        <VCol cols="12">
                            <VSwitch
                                density="compact"
                                label="Use as a billing address?"
                            />
                        </VCol>

                        <!-- 👉 Submit and Cancel -->
                        <VCol
                            cols="12"
                            class="d-flex flex-wrap justify-center gap-4"
                        >
                            <VBtn type="submit"> Submit </VBtn>

                            <VBtn
                                color="secondary"
                                variant="outlined"
                                @click="onFormReset"
                            >
                                Cancel
                            </VBtn>
                        </VCol>
                    </VRow>
                </VForm>
            </VCardText>
        </VCard>
    </VDialog>
</template>
