<template>
  <setting-card class="profile-tab">
    <o-common-card small>
      <section class="col-12">
        <q-list no-border link>
          <q-item class="profile">
            <q-item-section avatar>
              <q-avatar size="80px">
                <img :src="avatar || $public('/logo.png')" alt="Avatar" />
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label caption>{{ $t('auth.account.name') }}</q-item-label>
              <q-item-label>
                <q-input v-model="name" class="pi-field"
                         debounce="800"
                         @update:modelValue="onUpdateName"
                         standout dense autofocus />
              </q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </section>
    </o-common-card>
    <o-common-card icon="o_security" :title="$t('auth.account.security.title')" small header padding>
      <section class="col-12">
        <q-list no-border link>
          <o-common-item :label="$t('auth.account.security.email')"
                         :sub-label="account.email" />
          <o-common-item :label="$t('auth.account.security.password')"
                         :sub-label="$t('auth.account.security.password_tips')">
            <div class="row items-center">
              <q-btn :label="$t('auth.account.security.password_action')"
                     class="bg-accent text-tips"
                     flat
                     @click="onChangePassword" />
            </div>
          </o-common-item>
          <o-common-item :label="$t('auth.account.security.passkeys')"
                         :sub-label="$t('auth.account.security.passkey_tips')">
            <div class="row items-center">
              <q-btn :label="$t('auth.account.security.passkey_action')"
                     class="bg-accent text-tips"
                     flat />
            </div>
          </o-common-item>
        </q-list>
      </section>
    </o-common-card>
    <o-common-card icon="o_assignment_ind" :title="$t('auth.account.user_id')" small header padding>
      <section class="col-12">
        <q-list no-border link>
          <o-common-item :label="$t('auth.account.user_id')">
            <div class="row items-center text-readable">
              <span class="q-mr-sm">{{account.id}}</span>
              <o-copy-btn :value="account.id" flat dense />
            </div>
          </o-common-item>
        </q-list>
      </section>
    </o-common-card>

    <o-side-dialog v-bind="side"
                   :seamless="false"
                   scrollable
                   @show="side.show = true"
                   @close="side.show = false">
      <template #content>
        <change-password @success="onClose" v-if="view === 'change-password'" />
      </template>
    </o-side-dialog>
  </setting-card>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { userService } from 'src/api/service/remote/user'
import useAccount from 'src/hooks/useAccount'
import OSideDialog from 'core/components/dialog/OSideDialog.vue'
import SettingCard from './setting-card.vue'
import ChangePassword from './profile/ChangePassword.vue'
import useCommon from 'core/hooks/useCommon'

const { t } = useCommon()
const { account, setAccount } = useAccount()
const name = ref('')
const avatar = ref('')
const view = ref('change-password')
const side = reactive<Indexable>({
  show: false,
  title: t('auth.account.security.password_action'),
  icon: 'edit',
  position: 'standard',
  style: {width: '30vw', minWidth: '600px'},
  contentClass: 'card pi-card-dialog-theme'
})

const onUpdateName = () => {
  console.log('name', name.value)
  setAccount({ ...account.value, name: name.value })
  userService.save({ id: account.value.id, name: name.value })
}

const onChangePassword = () => {
  side.show = true
}

const onClose = () => {
  side.show = false
}

onMounted(() => {
  name.value = account.value.name
  avatar.value = account.value.avatar
})
</script>

<style lang="scss">
.profile-tab {
  .profile {
    padding: 8px 0;
    .q-field {
      max-width: 320px;
    }
  }
}
</style>
