<script lang="ts" setup>
import Config from '@/config'
import {useUserStore} from '@/store'
import { appUserEditUserInfoPost } from '@/service'
import {debounce} from 'throttle-debounce';
import {z} from "zod";
import * as R from "ramda";

const {t} = useI18n()
const userStore = useUserStore()

const form = ref({
  firstName: userStore.userInfo?.firstName,
  surname: userStore.userInfo?.surname,
})

const FormSchema = z.object({
  firstName: z.string().min(1, {message: t('pages-login.prompt.first-name')}),
  surname: z.string().min(1, {message: t('pages-login.prompt.last-name')}),
})


function checkForm(): boolean {
  const validateFormField = FormSchema.safeParse(form.value)
  if (!validateFormField.success) {
    const fieldErrorMessage = validateFormField.error.flatten().fieldErrors
    const errorMessage: string | undefined = R.path([0, 0], R.values(fieldErrorMessage))
    errorMessage &&
    uni.showToast({
      title: errorMessage,
      icon: 'none',
    })
  }
  return validateFormField.success
}


async function submit() {
  try {
    await appUserEditUserInfoPost({
      body: {
        ...form.value,
      }
    })
    await uni.showToast({title: t('common.prompt.save-successfully'), icon: 'none'})
    await userStore.getUserInfo()
    setTimeout(uni.navigateBack, 1000)
  } catch (e) {
  }
}

// 提交
const handleSubmit = R.when(checkForm, debounce(Config.debounceLongTime, submit, {
  atBegin: true
}))
</script>

<template>
  <view>
    <navbar :title="t('navbar-nickname')"/>
    <view class="py-36rpx px-30rpx bg-#fff">
        <view class="">
          <view class="text-28-bold">{{ t("pages-login.sign-up.first-name") }}</view>
          <view
              class="mt-20rpx flex px-30rpx items-center h-88rpx border-2rpx border-solid border-#D4D4D4 rounded-20rpx">
            <wd-input
                no-border
                clearable
                :focus-when-clear="false"
                :cursorSpacing="20"
                :maxlength="40"
                v-model.trim="form.firstName"
                custom-class="flex-1"
                placeholder=""
            >
            </wd-input>
          </view>
        </view>
        <view class="mt-36rpx">
          <view class="text-28-bold">{{ t("pages-login.sign-up.last-name") }}</view>
          <view
              class="mt-20rpx flex px-30rpx items-center h-88rpx border-2rpx border-solid border-#D4D4D4 rounded-20rpx">
            <wd-input
                no-border
                clearable
                :focus-when-clear="false"
                use-prefix-slot
                :maxlength="40"
                :cursorSpacing="20"
                v-model.trim="form.surname"
                custom-class="flex-1"
                placeholder=""
            >
            </wd-input>
          </view>
        </view>
      </view>

    <view class="mt-318rpx px-30rpx">
      <wd-button custom-class="!h-108rpx !text-36rpx font-bold !rounded-16rpx" block @click="handleSubmit">
        {{ t('common.save') }}
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss"></style>
