import { inject, onMounted, provide, ref, type InjectionKey } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import { message } from 'ant-design-vue'
import { updateMe } from '@/api/me'
import type { User } from '@/models/login'
import { useConfigStore } from '@/store/configStore'
import { useUserStore } from '@/store/userStore'
import { loading } from '@/utils'

export interface EducatePageContext {
  config: ReturnType<typeof useConfigStore>
  userFormState: ReturnType<typeof ref<User>>
  formRef: ReturnType<typeof ref<FormInstance | undefined>>
  editPassVisible: ReturnType<typeof ref<boolean>>
  setForm: () => void
  copyCode: () => void
  resetData: () => void
  ok: () => void
}

export const EDUCATE_PAGE_CONTEXT_KEY: InjectionKey<EducatePageContext> = Symbol('educatePageContext')

export function useEducatePage() {
  const config = useConfigStore()
  const userStore = useUserStore()

  const userFormState = ref<User>({
    fname: '',
    lname: '',
    mobile: undefined,
    birth_date: '',
    phone_number: '',
    province: '',
    city: '',
    n_code: undefined,
  })
  const formRef = ref<FormInstance>()
  const editPassVisible = ref<boolean>(false)

  function setForm() {
    userFormState.value = userStore.userInfo
  }

  function copyCode() {
    const val = userStore.userInfo?.referral_id
    navigator.clipboard.writeText(val)
    message.info('کد رونوشت شد')
  }

  const resetData = () => {
    formRef.value?.resetFields()
    userFormState.value = {
      fname: '',
      lname: '',
      mobile: undefined,
      birth_date: '',
      phone_number: '',
      province: '',
      city: '',
      n_code: undefined,
    }
  }

  function ok() {
    formRef.value?.validateFields().then(async () => {
      try {
        loading.value = true
        await updateMe(userFormState.value)
        await userStore.getMyInfo()
        editPassVisible.value = false
        message.success('اطلاعات شما با موفقیت به روز رسانی شد')
      } catch (e) {
        console.log(e)
      } finally {
        loading.value = false
      }
    })
  }

  onMounted(() => {
    setForm()
  })

  const context: EducatePageContext = {
    config,
    userFormState,
    formRef,
    editPassVisible,
    setForm,
    copyCode,
    resetData,
    ok,
  }

  provide(EDUCATE_PAGE_CONTEXT_KEY, context)
  return context
}

export function useEducatePageContext() {
  const context = inject(EDUCATE_PAGE_CONTEXT_KEY)
  if (!context) {
    throw new Error('useEducatePageContext must be used within a page that calls useEducatePage()')
  }
  return context
}