<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { computed, reactive, ref, shallowReadonly, useTemplateRef, nextTick } from 'vue'
import type { FormItemRule, FormInst, InputInst } from 'naive-ui'
import isEmail from 'validator/es/lib/isEmail'
import { useSystemLanguageStore } from '@/store/modules/system-language'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'

const userStore = useUserStore()
const systemLanguageStore = useSystemLanguageStore()
const router = useRouter()
const { t } = useI18n()

const inputRefs = useTemplateRef<InputInst | InputInst[]>('inputRefs')
const avatarInputRef = useTemplateRef('avatarInputRef')
const emailInfoFormRef = useTemplateRef<FormInst>('emailInfoFormRef')
const passwordInfoFormRef = useTemplateRef<FormInst>('passwordInfoFormRef')

const userInfoForm = reactive({
  nickName: userStore.userInfo.nickName,
  remark: userStore.userInfo.remark,
})

const userInfoFormItemEdit = reactive({
  nickName: false,
  remark: false,
})

/* 邮箱绑定 */
const isShowMailboxBindingModal = ref(false)
const mailboxBindingSubmitBtnLoading = ref(false)
const emailInfoForm = ref({
  email: '',
})

const emailInfoFormRules = shallowReadonly({
  email: {
    required: true,
    trigger: 'blur',
    validator: (_rule: FormItemRule, value: string) => {
      if (!value) {
        return new Error(t('login_module.please_enter_your_email_address'))
      } else if (!isEmail(value)) {
        return new Error(t('login_module.please_enter_the_correct_email_address'))
      }

      return
    },
  },
})

/* 密码修改 */
const isShowPasswordChangeModal = ref(false)
const passwordChangeSubmitBtnLoading = ref(false)
const passwordInfoForm = ref({
  password: '',
  confirmPassword: '',
})

const passwordFormRules = shallowReadonly({
  password: {
    required: true,
    trigger: 'blur',
    validator: (_rule: FormItemRule, value: string) => {
      if (!value) {
        return new Error(t('personal_settings_module.please_enter_your_new_password'))
      } else if (value.length <= 6) {
        return new Error(t('personal_settings_module.the_password_contains_a_maximum_of_6_characters'))
      }

      return
    },
  },
  confirmPassword: {
    required: true,
    trigger: 'blur',
    validator: (_rule: FormItemRule, value: string) => {
      if (!value) {
        return new Error(t('personal_settings_module.please_enter_confirm_new_password'))
      } else if (value !== passwordInfoForm.value.password) {
        return new Error(
          t('personal_settings_module.verify_that_the_new_password_is_inconsistent_with_the_new_password'),
        )
      }

      return
    },
  },
})

const listItemLabelWidth = ref(systemLanguageStore.currentLanguageInfo.key === 'en' ? '168px' : '100px')
// const confirmBtnLoading = ref(true)

const currentLanguage = computed({
  get() {
    return systemLanguageStore.currentLanguageInfo.key
  },
  set(value: I18n.LangType) {
    systemLanguageStore.updateCurrentLanguageInfo(value)

    router.go(0)
  },
})

const userInfo = computed(() => userStore.userInfo)

const languageOptions = computed(() => {
  return systemLanguageStore.languageOptions.map((item) => ({ value: item.key, label: item.label }))
})

function handleAvatarUpdate() {
  avatarInputRef.value && avatarInputRef.value.click()
}

function handleAvatarUpload(e: Event) {
  const target = e.target as HTMLInputElement
  const file = target.files && target.files[0]

  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      const result = e.target?.result

      console.log('🟰🟰🟰🟰🟰🟰test🟰🟰🟰🟰🟰🟰')
      console.log(result)
    }
  }
}

function handleUserInfoFormItemEditUpdate(key: keyof typeof userInfoFormItemEdit, status: boolean) {
  userInfoFormItemEdit[key] = status

  nextTick(() => {
    if (inputRefs.value && !Array.isArray(inputRefs.value)) {
      inputRefs.value.focus()
    }
  })
}

function onModalAfterLeave() {
  emailInfoForm.value.email = ''
}

function handleMailboxBindingSubmit() {
  emailInfoFormRef.value?.validate((errors) => {
    if (errors) return ''

    console.log('🟰🟰🟰🟰🟰🟰提交🟰🟰🟰🟰🟰🟰')
  })
}

function handlePasswordChangeSubmit() {
  passwordInfoFormRef.value?.validate((errors) => {
    if (errors) return ''

    console.log('🟰🟰🟰🟰🟰🟰提交🟰🟰🟰🟰🟰🟰')
  })
}
</script>

<template>
  <div class="h-full min-h-fit flex-col rounded-[20px] bg-white p-6 shadow-[0_2px_2px_#0000000a]">
    <div class="ml-[56px] pt-[6px]">
      <ul>
        <li class="font-600 flex items-center text-[18px]">
          <i class="iconfont icon-personal-info text-theme-color"></i>
          <span class="ml-[4px]">{{ t('personal_settings_module.basic_information_setting') }}</span>
        </li>

        <li class="mb-[30px] mt-[24px] flex items-center">
          <h4 class="font-600 list-item-label mr-[19px] text-[14px]">{{ t('common_module.avatar') }}：</h4>

          <div
            class="group relative h-[60px] w-[60px] cursor-pointer overflow-hidden rounded-full bg-[#EAECEC]"
            @click="handleAvatarUpdate"
          >
            <img class="h-full w-full object-cover" :src="userInfo.avatarUrl" alt="Avatar" />

            <div
              class="flex-center absolute bottom-0 h-[26px] w-full bg-[rgba(0,0,0,0.4)] text-[10px] text-white opacity-0 transition group-hover:opacity-100"
            >
              <span>{{ t('common_module.change') }}</span>
            </div>

            <input ref="avatarInputRef" type="file" class="hidden" accept="image/*" @change="handleAvatarUpload" />
          </div>
        </li>

        <li class="mb-[30px] mt-[24px] flex items-center">
          <h4 class="font-600 list-item-label mr-[19px] text-[14px]">
            {{ t('personal_settings_module.account_nickname') }}：
          </h4>

          <div v-if="userInfoFormItemEdit.nickName" class="flex">
            <div class="flex w-[220px] items-center">
              <n-input
                ref="inputRefs"
                v-model:value="userInfoForm.nickName"
                :placeholder="t('personal_settings_module.please_enter_the_account_nickname')"
                type="text"
                size="small"
              />
            </div>

            <div class="ml-[20px] flex items-center">
              <n-button class="!mr-[6px]" size="tiny" @click="handleUserInfoFormItemEditUpdate('nickName', false)">
                <i class="iconfont icon-close"></i>
              </n-button>
              <n-button type="primary" size="tiny" @click="handleUserInfoFormItemEditUpdate('nickName', true)">
                <i class="iconfont icon-queren"></i>
              </n-button>
            </div>
          </div>

          <div v-else class="flex items-center text-[14px] text-[#999]">
            <span class="mr-[5px]">{{ userInfo.nickName || '-' }}</span>

            <i
              class="iconfont icon-edit1 cursor-pointer px-[5px]"
              @click="handleUserInfoFormItemEditUpdate('nickName', true)"
            ></i>
          </div>
        </li>

        <li class="mb-[30px] mt-[24px] flex items-center">
          <h4 class="font-600 list-item-label mr-[19px] text-[14px]">
            {{ t('personal_settings_module.personal_profile') }}：
          </h4>

          <div v-if="userInfoFormItemEdit.remark" class="flex">
            <div class="flex w-[220px] items-center">
              <n-input
                ref="inputRefs"
                v-model:value="userInfoForm.remark"
                type="textarea"
                size="small"
                :placeholder="t('personal_settings_module.please_enter_a_personal_profile')"
                :autosize="{ minRows: 4, maxRows: 4 }"
              />
            </div>

            <div class="ml-[20px] flex items-center">
              <n-button class="!mr-[6px]" size="tiny" @click="handleUserInfoFormItemEditUpdate('remark', false)">
                <i class="iconfont icon-close"></i>
              </n-button>
              <n-button type="primary" size="tiny" @click="handleUserInfoFormItemEditUpdate('remark', true)">
                <i class="iconfont icon-queren"></i>
              </n-button>
            </div>
          </div>

          <div v-else class="flex items-center text-[14px] text-[#999]">
            <span class="mr-[5px]">{{ userInfo.remark || '-' }}</span>

            <i
              class="iconfont icon-edit1 cursor-pointer px-[5px]"
              @click="handleUserInfoFormItemEditUpdate('remark', true)"
            ></i>
          </div>
        </li>

        <li class="mb-[30px] mt-[24px] flex items-center">
          <h4 class="font-600 list-item-label mr-[19px] text-[14px]">{{ t('common_module.mobile_phone_number') }}：</h4>

          <div class="text-[14px] text-[#999]">{{ userInfo.mobilePhone || '-' }}</div>
        </li>

        <li class="mb-[30px] mt-[24px] flex items-center">
          <h4 class="font-600 list-item-label mr-[19px] text-[14px]">{{ t('common_module.email') }}：</h4>

          <div class="text-[14px] text-[#999]">
            <span v-if="userInfo.email">{{ userInfo.email }}</span>
            <span v-else class="text-theme-color cursor-pointer select-none" @click="isShowMailboxBindingModal = true">
              {{ t('personal_settings_module.click_bind_email') }}
            </span>
          </div>
        </li>

        <li class="mb-[30px] mt-[24px] flex items-center">
          <h4 class="font-600 list-item-label mr-[19px] text-[14px]">{{ t('common_module.password') }}：</h4>

          <div
            class="text-theme-color cursor-pointer select-none text-[14px]"
            @click="isShowPasswordChangeModal = true"
          >
            {{ t('personal_settings_module.click_to_set_password') }}
          </div>
        </li>
      </ul>

      <ul class="mt-[60px]">
        <li class="font-600 flex items-center text-[18px]">
          <i class="iconfont icon-language text-theme-color"></i>
          <span class="ml-[4px]">{{ t('personal_settings_module.language_setting') }}</span>
        </li>

        <li class="mb-[8px] ml-[121px] mt-[8px]">
          <h5 class="text-[12px] text-[#999]">{{ t('personal_settings_module.language_setting_doc') }}</h5>
        </li>

        <li class="mb-[30px] flex items-center">
          <h4 class="font-600 list-item-label mr-[19px] text-[14px]">{{ t('common_module.language') }}：</h4>

          <div class="w-[200px]">
            <n-select v-model:value="currentLanguage" :options="languageOptions" />
          </div>
        </li>
      </ul>
    </div>

    <n-modal v-model:show="isShowMailboxBindingModal" :mask-closable="false" :on-after-leave="onModalAfterLeave">
      <n-card
        class="!w-[600px]"
        :title="t('personal_settings_module.email_binding')"
        :bordered="false"
        size="medium"
        closable
        @close="() => (isShowMailboxBindingModal = false)"
      >
        <n-form
          ref="emailInfoFormRef"
          label-placement="left"
          label-width="auto"
          :model="emailInfoForm"
          :rules="emailInfoFormRules"
        >
          <n-form-item :label="t('common_module.email')" path="email">
            <n-input
              v-model:value="emailInfoForm.email"
              :placeholder="t('login_module.please_enter_your_email_address')"
            />
          </n-form-item>
        </n-form>

        <template #footer>
          <div class="text-end">
            <n-space justify="end">
              <n-button @click="() => (isShowMailboxBindingModal = false)">{{
                t('common_module.cancel_btn_text')
              }}</n-button>
              <n-button type="primary" :loading="mailboxBindingSubmitBtnLoading" @click="handleMailboxBindingSubmit">
                {{ t('common_module.confirm_btn_text') }}
              </n-button>
            </n-space>
          </div>
        </template>
      </n-card>
    </n-modal>

    <n-modal v-model:show="isShowPasswordChangeModal" :mask-closable="false" :on-after-leave="onModalAfterLeave">
      <n-card
        class="!w-[600px]"
        :title="t('personal_settings_module.password_change')"
        :bordered="false"
        size="medium"
        closable
        @close="() => (isShowPasswordChangeModal = false)"
      >
        <n-form
          ref="passwordInfoFormRef"
          label-placement="left"
          label-width="auto"
          :model="passwordInfoForm"
          :rules="passwordFormRules"
        >
          <n-form-item :label="t('personal_settings_module.new_password')" path="password">
            <n-input
              v-model:value="passwordInfoForm.password"
              :placeholder="t('personal_settings_module.please_enter_your_new_password')"
            />
          </n-form-item>
          <n-form-item :label="t('personal_settings_module.confirm_new_password')" path="confirmPassword">
            <n-input
              v-model:value="passwordInfoForm.confirmPassword"
              :placeholder="t('personal_settings_module.please_enter_confirm_new_password')"
            />
          </n-form-item>
        </n-form>

        <template #footer>
          <div class="text-end">
            <n-space justify="end">
              <n-button @click="() => (isShowPasswordChangeModal = false)">{{
                t('common_module.cancel_btn_text')
              }}</n-button>
              <n-button type="primary" :loading="passwordChangeSubmitBtnLoading" @click="handlePasswordChangeSubmit">
                {{ t('common_module.confirm_btn_text') }}
              </n-button>
            </n-space>
          </div>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>

<style lang="scss" scoped>
.list-item-label {
  /* stylelint-disable-next-line value-keyword-case */
  width: v-bind(listItemLabelWidth);
  text-align: end;
}
</style>
