<script setup>
import { VDataTable } from "vuetify/lib/labs/VDataTable";

const isNewPasswordVisible = ref(false);
const isConfirmPasswordVisible = ref(false);
const smsVerificationNumber = ref("+1(968) 819-2547");
const isTwoFactorDialogOpen = ref(false);

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

const recentDevices = [
  {
    browser: "Chrome on Windows",
    logo: "tabler-brand-windows",
    color: "info",
    device: "HP Specter 360",
    location: "Switzerland",
    activity: "10, July 2021 20:07",
  },
  {
    browser: "Chrome on iPhone",
    logo: "tabler-device-mobile",
    color: "error",
    device: "iPhone 12x",
    location: "Australia",
    activity: "13, July 2021 10:10",
  },
  {
    browser: "Chrome on Android",
    logo: "tabler-brand-android",
    color: "success",
    device: "OnePlus 9 Pro",
    location: "Dubai",
    activity: "4, July 2021 15:15",
  },
  {
    browser: "Chrome on macOS",
    logo: "tabler-brand-apple",
    color: "secondary",
    device: "Apple iMac",
    location: "India",
    activity: "20, July 2021 21:01",
  },
  {
    browser: "Chrome on Windows",
    logo: "tabler-brand-windows",
    color: "info",
    device: "HP Specter 360",
    location: "Switzerland",
    activity: "10, July 2021 20:07",
  },
  {
    browser: "Chrome on Android",
    logo: "tabler-brand-android",
    color: "success",
    device: "OnePlus 9 Pro",
    location: "Dubai",
    activity: "4, July 2021 15:15",
  },
];
</script>

<template>
  <VRow>
    <VCol cols="12">
      <!-- 👉 Change password -->
      <VCard title="Change Password">
        <VCardText>
          <VAlert variant="tonal" color="warning" class="mb-4 px-4 py-3">
            <VAlertTitle class="mb-3">
              Ensure that these requirements are met
            </VAlertTitle>
            <span>Minimum 8 characters long, uppercase & symbol</span>
          </VAlert>

          <VForm @submit.prevent="() => {}">
            <VRow>
              <VCol cols="12" md="6">
                <AppTextField
                  label="New Password"
                  placeholder="············"
                  :type="isNewPasswordVisible ? 'text' : 'password'"
                  :append-inner-icon="
                    isNewPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'
                  "
                  @click:append-inner="
                    isNewPasswordVisible = !isNewPasswordVisible
                  "
                />
              </VCol>
              <VCol cols="12" md="6">
                <AppTextField
                  label="Confirm Password"
                  placeholder="············"
                  :type="isConfirmPasswordVisible ? 'text' : 'password'"
                  :append-inner-icon="
                    isConfirmPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'
                  "
                  @click:append-inner="
                    isConfirmPasswordVisible = !isConfirmPasswordVisible
                  "
                />
              </VCol>

              <VCol cols="12">
                <VBtn type="submit"> Change Password </VBtn>
              </VCol>
            </VRow>
          </VForm>
        </VCardText>
      </VCard>
    </VCol>

    <VCol cols="12">
      <!-- 👉 Two step verification -->
      <VCard>
        <VCardItem>
          <VCardTitle class="mb-2"> Two-steps verification </VCardTitle>
          <VCardSubtitle>
            <span class="text-base text-medium-emphasis"
              >Keep your account secure with authentication step.</span
            >
          </VCardSubtitle>
        </VCardItem>

        <VCardText>
          <div>
            <span class="text-base text-high-emphasis font-weight-medium mb-1">
              SMS
            </span>
            <VTextField
              variant="underlined"
              :model-value="smsVerificationNumber"
            >
              <template #append-inner>
                <IconBtn size="small" variant="text">
                  <VIcon
                    icon="tabler-edit"
                    @click="isTwoFactorDialogOpen = true"
                  />
                </IconBtn>
                <IconBtn size="small" variant="text">
                  <VIcon icon="tabler-trash" />
                </IconBtn>
              </template>
            </VTextField>
          </div>

          <p class="mb-0 mt-4">
            Two-factor authentication adds an additional layer of security to
            your account by requiring more than just a password to log in.
            <a href="javascript:void(0)" class="text-decoration-none"
              >Learn more</a
            >.
          </p>
        </VCardText>
      </VCard>
    </VCol>

    <VCol cols="12">
      <!-- 👉 Recent devices -->
      <VCard title="Recent devices">
        <VDivider />
        <VDataTable
          :items="recentDevices"
          :headers="recentDeviceHeader"
          hide-default-footer
          class="text-no-wrap"
        >
          <template #item.browser="{ item }">
            <div class="d-flex align-center">
              <VIcon
                :icon="item.logo"
                :color="item.color"
                size="18"
                class="me-2"
              />
              {{ item.browser }}
            </div>
          </template>
          <!-- TODO Refactor this after vuetify provides proper solution for removing default footer -->
          <template #bottom />
        </VDataTable>
      </VCard>
    </VCol>
  </VRow>

  <!-- 👉 Enable One Time Password Dialog -->
  <TwoFactorAuthDialog
    v-model:isDialogVisible="isTwoFactorDialogOpen"
    :sms-code="smsVerificationNumber"
  />
</template>
