import type { Block, Layout } from '@/layout/layout.types'
import useLayoutStore from '@/layout/useLayoutStore'
import useRouterStore from '@/useRouterStore'
import request from '@/utils/request'
import { defineStore } from 'pinia'
import { computed, reactive, ref, watch } from 'vue'

interface UserInfo {
  id: string
  username: string
  gender: number
  birthday: string
  avatar: string
  openId: string
}
const defaultUserInfo: UserInfo = {
  id: '',
  username: '',
  gender: 0,
  birthday: '',
  avatar: '',
  openId: ''
}


function areArraysEqualById(arr1: Block[], arr2: Block[]): boolean {
  if (arr1.length !== arr2.length) {
    return false;
  }

  // 将 arr2 转换为一个以 id 为键的映射


  // 检查 arr1 中的每个 item 是否在 arr2 中存在，并且值是否相同
  for (let i = 0; i < arr1.length; i++) {
    console.log(arr1[i].id);
    console.log(arr2[i].id);

    if (arr1[i].id !== arr2[i].id) {

      return false
    }
  }

  return true;
}

export default defineStore('user', () => {
  const token = ref(localStorage.getItem('token') || '')
  const remoteData = ref<Layout | null>(null)
  const remoteAddList = ref<Block[]>([])

  const profile = reactive({ ...defaultUserInfo })
  const layout = useLayoutStore()

  const isLogin = computed(() => !!token.value && !!profile.id)
  function getLinkList(data: Layout) {
    const list = [] as Block[]
    for (const mode of data.content) {
      for (const page of mode.pages) {
        for (const item of page.list) {
          list.push(item)
        }
      }
    }
    for (const item of data.dock) {
      if (item) list.push(item)
    }
    for (const dirItem of Object.values(data.dir)) {
      for (const item of dirItem.list) {
        list.push(item)
      }
    }
    return list
  }
  watch(
    token,
    async (val) => {
      localStorage.setItem('token', val)

      if (!val) return
      const res = await request<UserInfo>('GET', '/api/profile')
      Object.assign(profile, res)
    },
    { immediate: true }
  )

  watch(
    token,
    async (val) => {
      if (!val) return
      console.log(val);

      const data = await request<Layout>('GET', '/api/backup')
      if (!data) {
        useRouterStore().replace('')

        return
      }
      const remoteList = getLinkList(data)
      const localList = getLinkList(layout.state)

      remoteAddList.value = []
      for (const item of remoteList) {
        // if (!localList.some((el) => el.id !== item.id)) {
        //   // addList.push(item)
        //   remoteAddList.value.push(item)
        // }
        if (localList.findIndex(val => val.id === item.id) === -1) {

          remoteAddList.value.push({ ...item })
        }
      }


      if (remoteAddList.value.length > 0 || !areArraysEqualById(remoteList, localList)) {
        // TODO: 交给张阳
        // remoteAddList.value = addList
        remoteData.value = data

        useRouterStore().go('global-backup')
      }
    },
  )
  const logout = () => {
    token.value = ''
    Object.assign(profile, { ...defaultUserInfo })
  }
  const comineData = () => {
    if (!remoteAddList.value) return
    console.log({ ...remoteAddList.value });
    remoteAddList.value.map(item => {
      layout.state.content[layout.state.current].pages[layout.state.currentPage].list.push(item)
    })
  }
  const coverageData = () => {
    if (!remoteData.value) return
    Object.assign(layout.state.content, remoteData.value.content)
    Object.assign(layout.state.dock, remoteData.value.dock)
    Object.assign(layout.state.dir, remoteData.value.dir)

  }
  return {
    token,
    profile,
    isLogin,
    logout,
    coverageData,
    comineData
  }
})