<template>
  <LoginLayout>
    <div class="pos-relative w-500px">
      <div class="text-36px fw-bold lh-50px text-#223354 mb-24px">Sign in</div>
      <div class="lh-18px text-#767676 mb-20px w-350px">We will check if you have an account, and if not, we will help
        you create one.</div>
      <a-form ref="postFormRef" :model="postForm" :rules="postFormRules" :colon="false">
        <a-form-item class="mb-20 w-full custom-form-item" ref="account" label="Email" name="account">
          <a-input v-model:value="postForm.account" placeholder="Please enter your email" size="large" />
        </a-form-item>
        <a-form-item class="custom-form-item2 mb-0" label="Captcha" name="captcha">
          <a-input-group class="w-full flex justify-between">
            <a-input v-model:value="postForm.captcha" placeholder="Please enter captcha" :maxlength="6" size="large" />
            <a-button class="!h-68px !text-18px !b-transparent" :disabled="seconds !== 0 || !postForm.account.length"
              @click="onSendCaptcha" size="large">
              <span v-if="seconds === 0" class="c-666">Get code</span>
              <span v-else>{{ seconds }}s later resend</span>
            </a-button>
          </a-input-group>
        </a-form-item>
        <a-form-item label="" class="my-20px">
          <a-button type="primary" class="w-full !h-68px !b-rd-12px !text-20px text-#fff !fw-700 " @click="onLogin"
            size="large">Sign in</a-button>
        </a-form-item>
      </a-form>
      <div class="text-14px text-#767676 lh-24px">
        By continuing, you agree to  EJET Partner shar 
        <a href="/" class="text-#1A1A1A decoration-none">Terms of Use</a>
        ⁠. Read our <a href="/" class="text-#1A1A1A decoration-none">Privacy Policy⁠.</a>
      </div>
    </div>
  </LoginLayout>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import useUserStore from 'Store/modules/user'
import type { UnwrapRef } from 'vue'
import type { Rule } from 'ant-design-vue/es/form'
import type { CaptchaData, LoginData } from 'Types/api'
import { apiSendCaptcha } from 'API/user'
import { validatePhoneOrEmail, validateEmail, validatePassword, genValidateTrue } from 'Utils/validate'

const postFormRef = ref()
let seconds = ref(0)

interface IRegisterForm {
  account: string
  captcha: string
}

const postForm: UnwrapRef<IRegisterForm> = reactive({
  account: '',
  captcha: '',
})
const postFormRules: Record<string, Rule[]> = {
  account: [{ required: true, validator: validateEmail, trigger: 'change' }],
  captcha: [{ required: true, message: 'captcha is required', trigger: 'change' }],
}

const onSendCaptcha = () => {
  postFormRef.value
    .validateFields(['account'])
    .then(async () => {
      const captcha: CaptchaData = {
        account: postForm.account,
        type: 's_login',
      }
      const data = await apiSendCaptcha(captcha)
      console.log(data)
      countSeconds()
    })
    .catch((error: Error) => {
      console.log('error', error)
    })
}

const countSeconds = () => {
  seconds.value = 60
  const timer = setInterval(() => {
    seconds.value--
    if (seconds.value === 0) {
      clearInterval(timer)
    }
  }, 1000)
}

const onLogin = async () => {
  postFormRef.value.validate().then(async () => {
    const params: Partial<typeof postForm> = toRaw(postForm)
    const userStore = useUserStore()
    await userStore.login(params as LoginData)
  })
}
</script>

<style scoped lang="less">
@import '@/assets/styles/variables.less';

.page {
  ::v-deep(.ant-form) {
    .ant-form-item {
      &.custom-form-item {
        .ant-form-item-row {
          display: block !important;
          width: 500px !important;

          .ant-form-item-label {
            color: #000000;
            margin-bottom: 10px !important;
            font-weight: normal;

            label {
              font-size: 24px;
            }
          }

          .ant-form-item-control {
            .ant-input-affix-wrapper {
              border-radius: 6px;
              width: 500px;
              border-color: none !important;

              input {
                height: 34px;
              }
            }

            input {
              width: 500px;
              border-radius: 12px;
              border-color: transparent !important;
              background-color: #F1F1F1;
              height: 68px;
              line-height: 68px;
              font-size: 18px !important;

              &.ant-input-status-error {
                border-color: #ff4d4f;
              }
            }

            .ant-form-item-explain-error {
              text-align: right;
            }
          }
        }

        .ant-form-item-explain-error {
          text-align: right;
          margin-top: 10px;
        }

      }

      &.custom-form-item2 {
        .ant-form-item-row {
          display: block !important;
          width: 500px !important;

          .ant-form-item-label {
            color: #000000;
            margin-bottom: 10px !important;
            font-weight: normal;

            label {
              font-size: 24px;
            }
          }

          .ant-form-item-control {
            input {
              border-radius: 12px;
              border-color: transparent !important;
              background-color: #F1F1F1;
              height: 68px;
              line-height: 68px;
              font-size: 18px !important;

              &.ant-input-status-error {
                border-color: #ff4d4f;
              }
            }

            .ant-btn {
              background-color: #F1F1F1;
              border-radius: 12px;
              width: 200px;
              margin-left: 20px;
            }

            .ant-form-item-explain-error {
              margin-top: 10px;
              text-align: right;
              padding-right: 170px;
            }
          }
        }
      }
    }
  }
}
</style>
