<script setup>

import { confirmedValidator, passwordValidator } from "@validators";
import { computed, ref } from "vue";
import { useStore } from "vuex";
const store = useStore();
const refVForm = ref(null);
const isCurrentPasswordVisible = ref(false);
const isNewPasswordVisible = ref(false);
const isConfirmPasswordVisible = ref(false);
const currentPassword = ref("");
const newPassword = ref("");
const confirmPassword = ref("");
const passwordConfirmationTarget = computed(() => newPassword.value);
const passwordRequirements = [
    "Minimum 8 characters long - the more, the better",
    "At least one lowercase character",
    "At least one number, symbol, or whitespace character",
];

const serverKeys = [
    {
        name: "Server Key 1",
        key: "23eaf7f0-f4f7-495e-8b86-fad3261282ac",
        createdOn: "28 Apr 2021, 18:20 GTM+4:10",
        permission: "Full Access",
    },
    {
        name: "Server Key 2",
        key: "bb98e571-a2e2-4de8-90a9-2e231b5e99",
        createdOn: "12 Feb 2021, 10:30 GTM+2:30",
        permission: "Read Only",
    },
    {
        name: "Server Key 3",
        key: "2e915e59-3105-47f2-8838-6e46bf83b711",
        createdOn: "28 Dec 2020, 12:21 GTM+4:10",
        permission: "Full Access",
    },
];

const recentDevicesHeaders = [
    {
        title: "BROWSER",
        key: "browser",
    },
    {
        title: "DEVICE",
        key: "device",
    },
    {
        title: "LOCATION",
        key: "location",
    },
    {
        title: "RECENT ACTIVITY",
        key: "recentActivity",
    },
];

const recentDevices = [
    {
        browser: "Chrome on Windows",
        device: "HP Spectre 360",
        location: "New York, NY",
        recentActivity: "28 Apr 2022, 18:20",
        deviceIcon: {
            icon: "ri-macbook-line",
            color: "primary",
        },
    },
    {
        browser: "Chrome on iPhone",
        device: "iPhone 12x",
        location: "Los Angeles, CA",
        recentActivity: "20 Apr 2022, 10:20",
        deviceIcon: {
            icon: "ri-android-line",
            color: "error",
        },
    },
    {
        browser: "Chrome on Android",
        device: "Oneplus 9 Pro",
        location: "San Francisco, CA",
        recentActivity: "16 Apr 2022, 04:20",
        deviceIcon: {
            icon: "ri-smartphone-line",
            color: "success",
        },
    },
    {
        browser: "Chrome on macOS",
        device: "Apple iMac",
        location: "New York, NY",
        recentActivity: "28 Apr 2022, 18:20",
        deviceIcon: {
            icon: "ri-mac-line",
            color: "secondary",
        },
    },
    {
        browser: "Chrome on Windows",
        device: "HP Spectre 360",
        location: "Los Angeles, CA",
        recentActivity: "20 Apr 2022, 10:20",
        deviceIcon: {
            icon: "ri-macbook-line",
            color: "primary",
        },
    },
    {
        browser: "Chrome on Android",
        device: "Oneplus 9 Pro",
        location: "San Francisco, CA",
        recentActivity: "16 Apr 2022, 04:20",
        deviceIcon: {
            icon: "ri-android-line",
            color: "success",
        },
    },
];
const save = async () => {
    const { valid } = await refVForm.value.validate();
    console.log(valid);
    if (valid) {
        try {
            await store.dispatch("patientPasswordupdate", {
                password: currentPassword.value,
                new_password: newPassword.value,
                confirm_password: confirmPassword.value,
            });
        } catch (error) {
            console.error(error);
        }

        currentPassword.value = null;
        newPassword.value = null;
        confirmPassword.value = null;
    }
};

const isOneTimePasswordDialogVisible = ref(false);
</script>

<template>
    <VRow>
        <!-- SECTION: Change Password -->
        <VCol cols="12">
            <VCard>
                <VCardItem class="pb-6">
                    <VCardTitle>Change Password</VCardTitle>
                </VCardItem>
                <VForm ref="refVForm">
                    <VCardText class="pt-0">
                        <!-- 👉 Current Password -->
                        <VRow>
                            <VCol cols="12" md="6">
                                <!-- 👉 current password -->
                                <VTextField v-model="currentPassword" :type="isCurrentPasswordVisible
                                        ? 'text'
                                        : 'password'
                                    " :append-inner-icon="isCurrentPasswordVisible
                                        ? 'ri-eye-off-line'
                                        : 'ri-eye-line'
                                    " autocomplete="on" label="Current Password" placeholder="············"
                                    @click:append-inner="
                                    isCurrentPasswordVisible =
                                    !isCurrentPasswordVisible
                                    " />
                            </VCol>
                        </VRow>

                        <!-- 👉 New Password -->
                        <VRow>
                            <VCol cols="12" md="6">
                                <!-- 👉 new password -->
                                <VTextField v-model="newPassword" :type="isNewPasswordVisible
                                        ? 'text'
                                        : 'password'
                                    " :append-inner-icon="isNewPasswordVisible
                                        ? 'ri-eye-off-line'
                                        : 'ri-eye-line'
                                    " label="New Password" autocomplete="on" placeholder="············"
                                    @click:append-inner="
                                    isNewPasswordVisible =
                                    !isNewPasswordVisible
                                    " :rules="[passwordValidator]" />
                            </VCol>

                            <VCol cols="12" md="6">
                                <!-- 👉 confirm password -->
                                <VTextField v-model="confirmPassword" :type="isConfirmPasswordVisible
                                        ? 'text'
                                        : 'password'
                                    " :append-inner-icon="isConfirmPasswordVisible
                                        ? 'ri-eye-off-line'
                                        : 'ri-eye-line'
                                    " autocomplete="on" label="Confirm New Password" placeholder="············"
                                    @click:append-inner="
                                    isConfirmPasswordVisible =
                                    !isConfirmPasswordVisible
                                    " :rules="[
                                    (value) =>
                                        confirmedValidator(
                                            value,
                                            passwordConfirmationTarget
                                        ),
                                ]" />
                            </VCol>
                        </VRow>
                    </VCardText>

                    <!-- 👉 Password Requirements -->
                    <VCardText>
                        <h6 class="text-h6 text-medium-emphasis mt-1">
                            Password Requirements:
                        </h6>

                        <VList>
                            <VListItem v-for="(item, index) in passwordRequirements" :key="index" class="px-0">
                                <template #prepend>
                                    <VIcon size="8" icon="ri-circle-fill"
                                        color="rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))" />
                                </template>
                                <VListItemTitle class="text-medium-emphasis text-wrap">
                                    {{ item }}
                                </VListItemTitle>
                            </VListItem>
                        </VList>

                        <!-- 👉 Action Buttons -->
                        <div class="d-flex flex-wrap gap-4">
                            <VBtn @click="save">Save changes</VBtn>

                            <!-- <VBtn
                type="reset"
                color="secondary"
                variant="outlined"
              >
                Reset
              </VBtn>-->
                        </div>
                    </VCardText>
                </VForm>
            </VCard>
        </VCol>
        <!-- !SECTION -->

        <!-- SECTION Two-steps verification -->

        <!-- !SECTION -->

        <!-- SECTION Recent Devices -->

        <!-- !SECTION -->
    </VRow>

    <!-- SECTION Enable One time password -->

    <!-- !SECTION -->
</template>
